npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-theme-auth0-ts

v1.0.7

Published

[![Netlify Status](https://api.netlify.com/api/v1/badges/86f1f840-1a9c-4994-be3e-6c9341cf6d9a/deploy-status)](https://app.netlify.com/sites/gatsby-theme-auth0-ts-example/deploys) _See example site deployed at [gatsby-theme-auth0-ts-example.netlify.com](ht

Downloads

71

Readme

NPM npm CircleCI

Gatsby authentication solution.

Netlify Status
See example site deployed at gatsby-theme-auth0-ts-example.netlify.com.

Jump to comparison with gatsby-theme-auth0

Features

  • Easy set up; simply set up your ENV with values from your Auth0 application.
  • Full typescript support
  • Routing with <PrivateRoute />
  • Access session and auth utilities via the React Context API (SessionContext)

Setup

This setup assumes you are using yarn and dotenv. See the demo app for more details

  1. Create an auth0 'Single Page Web App' application for your site and configure the auth0 application. An example for development running at http://localhost:8000:
  • Add http://localhost:8000/auth/callback to the Allowed Callback URLs field.
  • Add http://localhost:8000 to Allowed Web Origins and Allowed Logout URLs.
  1. Add this package to your gatsby site dependencies: yarn add gatsby-theme-auth0-ts
  2. Add the theme to your gatsby-config. Environment variables should be filled in from the auth0 app you created.
### .env.development

# ~ Make sure to add me to your .gitignore ~

# Required for Auth0
AUTH0_DOMAIN=<FILL IN FROM YOUR AUTH0 APPLICATION>
AUTH0_CLIENT_ID=<FILL IN FROM YOUR AUTH0 APPLICATION>
AUTH0_CALLBACK_URL=http://localhost:8000/auth/callback

# Optional
AUTH0_AUDIENCE=
AUTH0_RESPONSE_TYPE=
AUTH0_SCOPE=
// gatsby-config.js
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    title: "Gatsby + Auth0 + Ts",
  },
  plugins: [
    {
      resolve: "gatsby-theme-auth0-ts",
      options: {
        /*
        Required: for more information on these values
        see https://auth0.com/docs/libraries/auth0js/v9#initialization
        */
        auth0Domain: process.env.AUTH0_DOMAIN,
        auth0ClientID: process.env.AUTH0_CLIENT_ID,
        auth0RedirectUri: process.env.AUTH0_CALLBACK_URL,

        /* Optional */
        // auth0Audience: undefined,
        // auth0ResponseType: "token id_token",
        // auth0Scope: "openid profile",
      },
    },
  ],
}
  1. Begin creating your app. The Example App shows off some of what you can do:
  • Programatically create authenticated-only pages: see gatsby-node and the account page. <PrivateRoute component={MyRoute} /> accepts a @reach/router RouteComponent which will receive and additional user prop (or redirect to the authentication flow if the user is not logged in). @reach/router is used by Gatsby's routing layer so ready to go.
  • Access the user + session state directly via the React context api: see the Header component.

Usage

User (source)

A User object can be either a LoggedInUser or a LoggedOutUser.

<PrivateRoute /> (source)

The PrivateRoute source component is intended to be used within the context of @reach/router. It wraps the internal component prop and passes in a user (LoggedInUser) prop as well. If the user is not logged in PrivateRoute will redirect them to the authentication flow.

import { PrivateRoute, PrivateRouteComponent } from "gatsby-theme-auth0-ts"

const Home: PrivateRouteComponent = ({ user }) => {
  return <p>Hi, {user.profile.nickname ? user.profile.nickname : "friend"}!</p>
}

const Account = () => {
  return (
    <Layout>
      <Router>
        <PrivateRoute component={Home} path="/account" />
        {/* ET CETERA */}
        <PrivateRoute component={Settings} path="/account/settings" />
      </Router>
    </Layout>
  )
}

SessionContext (source)

The SessionContext is a React Context which provides a Session object containing (in particular) a user and an auth object with helpers for triggering the login and logout flows:

import { SessionContext } from "gatsby-theme-auth0-ts"

const LoginOrOut = () => {
  const session = React.useContext(SessionContext)
  const { auth } = session

  return user.isLoggedIn ? (
    <button onClick={() => auth.logout()}>Log Out</button>
  ) : (
    <button onClick={() => auth.authorize()}>Log In</button>
  )
}

Contributing

Issues and Pull requests accepted. Contributors must abide by the Contributor Covenant CoC.

Contributors

@erikdstock

Comparison with gatsby-theme-auth0

epilande/gatsby-theme-auth0 is another approach to combining gatsby and auth0 developed independently of this package. Both provide typescript support and use a similar auth0 configuration. They differ in that:

  • This package uses the <PrivateRoute /> component as the primary method of triggering the authentication flow.
  • This package exposes session information via the SessionContext (i.e. React.useContext(SessionContext))
  • epilande/gatsby-theme-auth0 handles authentication primarily via a custom react hook.

Credits/See Also: