gatsby-netlify-okta-example
gatsby-netlify-okta-example copied to clipboard
Gatsby, Netlify, and Okta Example App
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.
Please read Build a Secure Blog with React, Gatsby, and Netlify to see how this app was created.
Prerequisites:
- Node 12+ installed
- A GitHub Account
- A Netlify Account
- An Okta Developer Account
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
- Links
- Help
- License
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
branch: main
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:
- Log in to your developer account, navigate to Applications, and click on Add Application
- Choose Single-Page App and Next
- Enter a name like
Gatsby Account
- Specify the following Login redirect URIs:
-
http://localhost:8000/account
-
http://localhost:9000/account
-
https://<your-site>.netlify.com/account
-
- Specify the following Logout redirect URIs:
-
http://localhost:8000
-
http://localhost:9000
-
https://<your-site>.netlify.com
-
- 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 comments on the blog post, as issues in this repository, or visit our Okta Developer Forums.
License
Apache 2.0, see LICENSE.