gatsby-theme-auth0
v1.1.1
Published
A Gatsby theme for Auth0
Downloads
12
Maintainers
Readme
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 viacallbackPath
- 🎨 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
| 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.