Skip to content
Gatsby, Netlify, and Okta Example App
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.
blog
src Add Auth with Okta Jan 6, 2020
static Fix repo name Jan 6, 2020
.gitignore
.prettierignore Add project to Git Jan 6, 2020
.prettierrc
LICENSE
README.md on > with Jan 7, 2020
gatsby-config.js
gatsby-node.js
package-lock.json
package.json Add Auth with Okta Jan 6, 2020

README.md

Blogging with JAM: Gatsby, Netlify, and Okta

This example app shows how to build a blog app with the #JAMstack, including Gatsby, Netlify CMS, and Okta.

Prerequisites:

Okta has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage and secure users and roles in any application.

Getting Started

To install this example application, run the following commands:

git clone https://github.com/oktadeveloper/gatsby-netlify-okta-example.git gatsby-blog
cd gatsby-blog

Create a new project on GitHub and push this project to it, or fork this project.

Modify static/admin/config.yml to use your GitHub repo:

backend:
  name: github
  repo: your-username/your-repo-name

Push, watch your Netlify CI process, and enjoy the fruits of your labor when you're in production!

The only sad part is you'll be using my account for auth. Fix this by creating your own Okta developer account.

Then, register your Gatsby app on Okta:

  1. Log in to your developer account, navigate to Applications, and click on Add Application
  2. Choose Single-Page App and Next
  3. Enter a name like Gatsby Account
  4. Specify the following Login redirect URIs:
    • http://localhost:8000/account
    • http://localhost:9000/account
    • https://<your-site>.netlify.com/account
  5. Specify the following Logout redirect URIs:
    • http://localhost:8000
    • http://localhost:9000
    • https://<your-site>.netlify.com
  6. Click Done

Add Trusted Origins for Your Gatsby Sites

Gatsby can run on two different ports (8000 and 9000) locally. One is for development and one is for production (invoked with gatsby build and gatsby serve). You also have your production Netlify site. Add all of these as Trusted Origins in API > Trusted Origins.

Click Add Origin, select CORS and Redirect for Type, and add each of the following:

  • http://localhost:8000
  • http://localhost:9000
  • https://<your-site>.netlify.com

Configure your Okta Settings

Copy your org URL and client ID into src/components/Login.js:

const config = {
 baseUrl: '<okta-org-url>',
 clientId: '<okta-client-id>',
 ...
};

Start everything with npm start and enjoy your JAMmin blog app!

Links

This example uses the following open source libraries:

Help

Please post any questions as issues in this repository, or visit our Okta Developer Forums.

License

Apache 2.0, see LICENSE.

💫 Deploy

Deploy to Netlify

You can’t perform that action at this time.