Build a Secure Blog with React, Gatsby, and Netlify

Build a Secure Blog with React, Gatsby, and Netlify

This tutorial shows how to build a secure blog app with Gatsby, React, and Netlify.

Henri De Roeck

Thanks for this post. I understand you want to exclude static generation of secured content (hence: excluding the /account/* pages), but I don’t understand how the content will be displayed once the user has logged in? Because the CMS API needs to verify the authentication token as well, no?

Matt Raible

The content part of the site doesn’t require authentication and is included at build time. The part that’s secured by Okta is dynamic and requires authentication. Does that help?

Anne van Rossum

Yes, for the reader: this includes authentication, but it’s not gating content. It also does not implement role-based access control.

This protects the rich-text editing capability from being using by everybody. It’s implementing access control for editors.

nikivancic

I tried today to run your tutorial in my current environment

System:
OS: macOS 11.3.1
CPU: (12) x64 Intel(R) Core™ i7-9750H CPU @ 2.60GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.16.1 - /usr/local/bin/node
npm: 7.15.0 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 90.0.4430.212
Safari: 14.1
npmPackages:
gatsby: ^3.4.1 => 3.4.1
npmGlobalPackages:
gatsby-cli: 3.6.0

Running the command “npm i netlify-cms-app@2.14.45 gatsby-plugin-netlify-cms@5.3.0” creates a lot of errors of the type ERESOLVE unable to resolve dependency tree

Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.4" from netlify-cms-app@2.14.45
npm ERR! node_modules/netlify-cms-app
npm ERR! netlify-cms-app@“2.14.45” from the root project

In my relatively short life with Gatsby I did not encounter such issue. Is this a time to refresh your tutorial which seems very valuable?

Matt Raible

My guess is you’re using npm 7, which is more strict about peer dependencies. Can you try with npm 6?

nikivancic

The issue is being discussed in this thread https://github.com/gatsbyjs… . There is also a PR ready to process - the question is only when will that patch get released.

Thanks for this quick response Matt - such behavior is always very appreciated. Also, I was using npm 6.14.7 in my app.

It really bugs me for being stopped in such silly way, as it took me a long time to find the article Build a Secure Blog with Gatsby, React, and Netlify which fits perfectly my needs :slight_smile:

nikivancic

two points:
- I switched to my Windows 10 desktop
- I ditched npm in favor of yarn
Went pass the point of versioning conflicts without a hiccup

nikivancic

My next issue is this something that you may not have experienced at the time you wrote this sample:

“warn The GraphQL query in the non-page component
“C:/work/gatsby/gatsby-netlify-okta/src/templates/blog.js” will not be run.
Exported queries are only executed for Page components. It’s possible you’re trying to create pages in your gatsby-node.js and that’s failing for some reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <staticquery> (https://gatsbyjs.org/docs/s…
instead of exporting a page query.

If you’re more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — https://graphql.org/learn/q…

I would care to get your opinion on this, Matt, as I am not used to see you sweep dirt under the carpet"

I was following along your youtube video about this blog. Build a Secure Blog with React, Gatsby, and Netlify - YouTube and around @12:10 where you submit the post after linking your github as the backend. I tried to do the same thing, but Im getting a weird error “Failed to persist entry: API_ERROR: Reference does not exist” I tried researching it and the general consensus was that people had an issue with this is they were apart of a org in github and didnt have the proper access. I checked and my access was correct and completely connected. So im confused to why that error is still persisting. Here’s a link to my repository. GitHub - Jarumi-Bonner/gatsby-netlify-okta

Hello nikivancic,

I did not experience this issue when I last updated the post in April 2021. I see you posted your comment in June 2021. Are you sure you’re using the same versions that I did?

Hello @JBon32,

I did not experience this issue, so I’m not sure. It looks like you’re connecting to a personal repository now. Are you still experiencing the issue? If so, are you using the same versions I used in the tutorial? I can only confirm that things worked with the versions I used.

Hi @mraible ,

It may be the versions I had to use. I tried following the tutorial using the version displayed on the blog but that didn’t take with my system. So Installed Netilfy plugin without specifying a version. So that might be where my issue is stemming from.

Hey Matt, thanks for the tutorial I’ve been following the video and Okta developer blog post and it’s great! I’ve been able to work through several issues I caused, but I haven’t been able to render the registration page when I click ‘sign up’ only the Gatsby logo renders, along with a dev console message: GET https://relaxed-murdock-569d4d.netlify.app/account/api/v1/registration/form 404
okta-sign-in.entry.js:52281
I haven’t been able to figure this one out, I believe I’m using the versions included in the tutorial. Thanks again, I appreciate any advice you have. My repository is:
GitHub - richardsavala/react-blog: react blog, uses Netlify CMS, and Okta JAM
My site is hosted at:
https://relaxed-murdock-569d4d.netlify.app/

Hello, @rickes. Do you have API Access management as part of your Okta org? If you’re using a developer account, you should.