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”