Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-theme-auth0 🔐

A Gatsby theme for adding Auth0 to your application.

GitHub npm Netlify Status

What’s in the box?


$ npm install --save gatsby-theme-auth0


// 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

Set up your login/logout buttons and you’re good to go!

import React from "react";
import { AuthService, useAuth } from "gatsby-theme-auth0";

export default () => {
  const { isLoggedIn, profile } = useAuth();
  return (
      {profile && <p>Hello {profile.name}</p>}
      {isLoggedIn ? (
        <button onClick={AuthService.logout}>Logout</button>
      ) : (
        <button onClick={AuthService.login}>Login</button>

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


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:


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



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.

© 2023 Gatsby, Inc.