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.
To install this example application, run the following commands:
git clone https://github.com/oktadeveloper/gatsby-netlify-okta-example.git gatsby-blog
cd gatsby-blogCreate 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-namePush, 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/accounthttp://localhost:9000/accounthttps://<your-site>.netlify.com/account
- Specify the following Logout redirect URIs:
http://localhost:8000http://localhost:9000https://<your-site>.netlify.com
- Click Done
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:8000http://localhost:9000https://<your-site>.netlify.com
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!
This example uses the following open source libraries:
Please post any questions as comments on the blog post, as issues in this repository, or visit our Okta Developer Forums.
Apache 2.0, see LICENSE.
