gatsby-theme-auth0 🔐

A Gatsby theme for adding Auth0 to your application.

What's in the box?

• 💯 Easy to set up authentication.
• 🔑 SSO. Try it out with demo1 & demo2.
• 🔋 Batteries included: AuthService & useAuth.
• 🤙 /auth/callback page automatically set up. Configurable via callbackPath
• 🎨 Fully customizable & extendable.

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
      },
    },
  ],
};

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 (
    <div>
      {profile && <p>Hello {profile.name}</p>}
      {isLoggedIn ? (
        <button onClick={AuthService.logout}>Logout</button>
      ) : (
        <button onClick={AuthService.login}>Login</button>
      )}
    </div>
  );
};

Theme options

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

• Minimal: Demo | Code
• Custom: Demo | Code

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.