Auth0 Home Blog Docs

Auth0 authentication on programmatically generated pages in Gatsbyjs

I’m implementing auth0 along with gatsbyjs and I can get everything working using the standard "account’ tutorial and all the examples on the same topic. Protecting pages that are defined and coded from the beginning is fine. But, I want to protect when the pages are rendered from pure markdown. So, I have a number of markdown files that render similar to blog posts. They use the layout.js and posttemplate.js classes to render and the createPages in gatsby-node.js is used to read in the markdown and generate the pages during the build.

Since these pages are generated during the build, there is no corresponding .js file in the page folder where I can add the login checks. How would I add auth0 to protect these dynamically created pages?

Hey there @jeffdstephens!

As of now not sure if it’s doable but let me discuss it and do some research internally to see what we can get here!

After some initial discussion it seem like the best way for it would be to use a reverse proxy like Nginx.

1 Like

Great! Thanks. I’ll give that a look. I’m also wondering if I could put those markdown files under the same path as the account.js and maybe that would force the auth0 process. I might try that as well. Thanks again!

Sure! Let me know if you have more questions and we’ll do our best to accommodate them!

1 Like

So, I looked at the NGINX Plus implementation and I’m not looking to pay for their service at this point.

I also tried to hack it together by adding a folder under pages called ‘account’. I then put the markdown files under that directory and tried to protect anything under the account/* route. It’s sort of working in that auth0 still tries to authenticate me when I browse to ‘/account’ and I’m able to build the markdown page via the gatsby-node.js process and I’ve confirmed that with graphiql. So, the page based on markdown was built and the path is src/account/subdirectory/markdownpage. It appears to work with that workflow, however, if I just copy the url for that full path, open a new browser, paste the URL and browse to it, it doesn’t enforce the authentication and just shows the page. If I cut off the markdownpage part of the URL and browse to /account/subdirectory it does initiate the auth0 pop-up. So close, yet so far.

Gotchya. Thanks a lot for sharing that! I think the usecase is quite uniqe in terms of what our community developers are struggling with. I added some tags to your questions so that others can find it easier and also share some knowledge!

Thanks Konrad. I feel like it shouldn’t be that unique though. Maybe it’s more a question for Gatsbyjs? If the capability is there to “dynamically” build pages from markdown files during the gatsby build process, I should be able to protect those pages with something like Auth0.

Hmmm you’re right. I’ll try to check with our engineering team if there is someone who can propose some kind of the right approach for that using our stack.

1 Like

I saw some of your engagements with Gatsby team on Twitter. Let me repost their suggestions here so that also others can benefit:

Knowledge from Gatsby team:

Unless you control the hosting environment and can authorize access to files, you can’t protect built files. Another option is to not build those pages but instead push the queried data to a database w/ API that you can queried from authenticated clients.

The easiest way is to put the authenticated page data behind an API and load them from the client when user has authenticated.

Also this blogpost from us:

https://auth0.com/blog/securing-gatsby-with-auth0/ (static sites)

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.