Skip to content
An example submission for the Gatsby Theme Jam.
JavaScript CSS
Branch: master
Clone or download
Pull request Compare This branch is 31 commits ahead of jlengstorf:master.
Reuben Ellis
Reuben Ellis Added cards and tools
Latest commit 4e53c98 Aug 23, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Added cards and tools Aug 23, 2019
theme Added cards and tools Aug 23, 2019
.gitignore chore: ignore local Netlify stuff Jul 3, 2019 Changed demo location in readme Aug 1, 2019
netlify.toml Added env creation Aug 1, 2019
package.json Added content to README Aug 1, 2019
yarn.lock Added cards and mdx rendering Aug 16, 2019

Gatsby Theme Authentication Enabled Auth0

This is theme which incorporates Auth0, Material-UI for styling components and a sidebar navigation.

See the live demo

Quick Start

  1. Use the auth app starter

    gatsby new my-auth-app


To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    npm install --save gatsby-theme-auth-app
  2. Add the theme to your gatsby-config.js:

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
      resolve: `gatsby-theme-auth-app`,
      options: {
        // basePath defaults to `/`
        basePath: `/posts`

Theme options

Key Default value Description
basePath / Root url for all blog posts
contentPath /content/posts Location of blog posts
assetPath /content/assets Location of assets
mdx true Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)

Additional configuration

In addition to the theme options, there are a handful of items you must modify via the siteMetadata object in your site's gatsby-config.js

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used for the site title and SEO
    title: `My Website Title`,
    // Used to provide alt text for your avatar
    author: `My Name`,
    // Used for SEO
    description: `My site description...`,
    // The login button description (Ex. Login or Login / Signup). Default: Login / Signup
    loginDesc: `Login / Signup`,
    // isAuth determines if authentication is enabled for your app. Default: true
    isAuthApp: true // options: true, false
    // Used for social links in the root footer
    social: [
        name: `twitter`,
        url: ``,
        name: `github`,
        url: ``,

In addition replace the values in the site's env.development file with the correct values from your Auth0 account. If you do not have an Auth0 account create one for free Auth0

// env.development
AUTH0_DOMAIN =; // Replace domain with your auth0 domain
AUTH0_CLIENT_ID = secret_client_id; // This ID can be found after creating an Application within Auth0 within the Application tab
AUTH0_CALLBACK_URL = `http://localhost:8000/callback`; //Remove the literal string character when replacing the callback url
  1. /content: A content folder holding assets that the theme expects to exist. This will vary from theme to theme -- this starter expects a logo directory with either a png, jpg or svg image, an article directory for content and a data directory with a navItems.json object for the navigation items within the sidebar menu. Replace the logo image file, delete the demo articles, replace the navItems.json and add your own! NOTE If the logo directory is empty the theme will use the title attribute in the gatsby-config.js file.

  2. /src: You will probably want to customize your site to personalize it. The files under /src/gatsby-theme-auth-app shadow, or override, the files of the same name in the gatsby-theme-auth-app package. To learn more about this, check out the guide to getting started with using the blog theme starter.

  3. .gitignore: This file tells git which files it should not track / not maintain a version history for.

  4. .prettierrc: This file tells Prettier which configuration it should use to lint files.

  5. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. When using themes, it's where you'll include the theme plugin, and any customization options the theme provides.

  6. LICENSE: Gatsby is licensed under the MIT license.

  7. package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

  8. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

  9. A text file containing useful reference information about your project.

You can’t perform that action at this time.