Skip to main content
View plugin on GitHub
See starters using this

gatsby-theme-auth0 🔐

A Gatsby theme for adding Auth0 to your application.

GitHub npm Netlify Status

What’s in the box?

Installation

$ npm install --save gatsby-theme-auth0

Usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-auth0",
      options: {
        domain: process.env.AUTH0_DOMAIN,
        clientID: process.env.AUTH0_CLIENT_ID,
        redirectUri: process.env.AUTH0_CALLBACK_URL,
        // audience: process.env.AUTH0_AUDIENCE, // Optional
        // responseType: process.env.AUTH0_RESPONSE_TYPE, // Optional
        // scope: process.env.AUTH0_SCOPE, // Optional
        // callbackPath: "/auth/callback", // Optional
      },
    },
  ],
};

Theme options

Key Default Required Description
domain true Configure Auth0 Domain
clientID true Configure Auth0 Client ID
redirectUri true Configure Auth0 Callback URL
audience false Configure Auth0 Audience
responseType "token id_token" false Configure Auth0 Response Type
scope "openid email profile" false Configure Auth0 Scope
callbackPath "/auth/callback" false Change callback URL path

Shadowing

Gatsby Themes has a concept called Shadowing, which allows users to override a file in a gatsby theme. This allows the theme to be fully customizable.

To start shadowing, create a folder with the theme name gatsby-theme-auth0 in your project’s src directory.

Now you’re able to override any file in the theme. For example, if you want to override the callback component, create a file:

src/gatsby-theme-auth0/components/callback.js

Here’s a demo of that demos/custom/src/gatsby-theme-auth0/components/callback.js

Demos

Dev

Set up env variables

Go to demo application directory, copy the .env.example -> .env.development. Fill in the required environment variables before starting up the client dev server.

Available Scripts

$ yarn dev

This will run the demo app in development mode using .env.development.

Navigate to http://localhost:8000 to view it in the browser.

$ yarn build

This will build the demo app for production using .env.production.

Outputs to the demo/public folder.


Docs
Tutorials
Plugins
Blog
Showcase