Skip to content
πŸ” A Gatsby Theme for adding Auth0 to your application.
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demos πŸ› Fix demo inconsistency Jul 29, 2019
gatsby-theme-auth0 πŸ“ Update README Jul 29, 2019
.editorconfig πŸŽ‰ Initial commit Jul 22, 2019
.eslintignore ✨ Set up eslint Jul 29, 2019
.eslintrc ✨ Set up eslint Jul 29, 2019
.gitignore πŸŽ‰ Initial commit Jul 22, 2019
.prettierrc πŸŽ‰ Initial commit Jul 22, 2019
LICENSE
README.md
package.json πŸ€– Add pre-push hook Jul 29, 2019
tsconfig.json πŸŽ‰ Initial commit Jul 22, 2019
yarn.lock ✨ Set up eslint Jul 29, 2019

README.md

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

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

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.

You can’t perform that action at this time.