Securing Gatsby with Auth0

konrad.sopala · June 3, 2020, 1:21pm

Perfect to hear that!

dc.gaudium · June 18, 2020, 7:52am

@sam.julien Do you have any updates on the article to set up Gatsby with auth0-spa-js?

Also, wanted to flag comment #29 from @dmitriy.movch

Am I correct, anybody can set the flag isLoggedIn to ‘true’ in local storage in his browser and get access to the route /account and he doesn’t need to login? It is not secure.

In testing my site, I easily bypassed Auth0 by manually setting isLoggedIn to true in the browser devtools. Then I was able to continue to access ‘protected’ pages since isAuthenticated() ONLY checks if isLoggedIn is true. It was surprisingly easy to figure out how get around authentication.

Are there more checks I can run as part of isAuthenticated()? Should I be calling checkSession()? Should I be using a nonce as mentioned in the docs and in Mitigate Replay Attacks When Using the Implicit Flow? Is there a way to verify the accessToken and idToken in the following way?

export const isAuthenticated = () => {
  if (!inBrowser) {
    return;
  }
  const isLoggedIn = localStorage.getItem(IS_LOGGED_IN) === 'true';
  const hasValidAccessToken = validateToken(tokens.accessToken);
  const hasValidIdToken = validateToken(tokens.idToken);

  return isLoggedIn && hasValidAccessToken && hasValidIdToken;
};

const validateToken = (token) => {
  // validate JWT?
  // send to Auth0 for validation?
  // call checkSession and make sure the tokens and/or nonce match up?
}

It just seems like there’s a lot of room for improvement here and I’m not sure where to start

dc.gaudium · June 18, 2020, 8:07am

Another bug I found is when a user goes to the website and logs in. isLoggedIn is set to true. Then, let’s say the user forgets to log out and then returns a few days later. isLoggedIn is still set to true, but the session and token have all expired. The user is still able to get to ‘protected’ pages since isAuthenticated() only checks if isLoggedIn is true.

My attempt to fix this is the following:

in gatsby-browser.js, componentDidMount calls silentAuth()
silentAuth() calls checkSession()
checkSession calls setSession() with an error since the session is expired
my fix: in the if (err) block of setSession(), set isLoggedIn to false
now isAuthenticated() returns false
when the user tries to go to /account, it calls login()

Does this sound like the right way to fix this?

konrad.sopala · June 18, 2020, 8:16am

Hey there @dc.gaudium!

I’m sure @sam.julien will look at it once he’s online

dc.gaudium · June 21, 2020, 6:39am

Hmmm… Quickly glancing through the docs for the auth0-spa SDK, it looks like it solves a lot of the problems I mentioned. If the Gatsby-specific SPA article is still in the works, I’m looking at the following articles:

auth0-spa overview article
auth0 to auth0-spa migration article
the auth0-spa React quickstart

Looks like those are good places to start. @sam.julien Are there any other articles that would help or other articles that I’m missing?

sam.julien · June 22, 2020, 3:26pm

Hey @dc.gaudium, thanks for following up. Yes, the SPA SDK will solve nearly everything we’ve mentioned in this thread. We’re coming out with a new article on Gatsby auth this week, so stay tuned for that. It will be used in conjunction with the new React SDK.

Another resource that may help is my talk on auth in Gatsby from Byteconf React: Power Up Gatsby with Auth! - YouTube

The slides and sample code and stuff is all here: http://samj.im/byteconf-react

That talk is not specific to Auth0 but shows the same approach we use for the SPA SDK. Just know that the new React SDK will abstract away the need to create your own context and hooks.

Qurus · June 28, 2020, 12:09pm

Hello. I have done everything on tutorial. On local works perfect. But when I deploy to Netlify or Vercel. Login page only showing loading. I have done all the credentials true. And local build also not working. Can anyone know the issue?

dynosapp · June 28, 2020, 11:31pm

Thanks, for the post. We took this solution and applied it to the auth0-lock. It works for gastby-develop and the lock shows up just fine on the localhost. However, on gatsby-build, the build is successful, but the lock is failing to load. We get the following error.
Uncaught (in promise) Error: page resources for /signup/ not found. Not rendering React at production-app.js:128
We have signup component which renders fine, but inside that component, it is not able to import these:

import { Auth0Lock, Auth0LockPasswordless } from "auth0-lock"
At this point we are stuck. Not sure how to proceed.

Additional information is that we had to apply resolutions as suggested from this post. Otherwise, it would break immediately. I am not sure if the resolution is causing any issues. If anyone had any luck running auth0-lock with Gatsby, please kindly chime in. Thank you!

dynosapp · June 30, 2020, 5:50am

Hello,
I am trying to get Auth0-Lock working on our Gatsby site. It works great on the local. However, after publishing the site, it is not redirecting.
Essentially, what we found was it is not firing the lock.on('authenticated', function(authResult) {....
We followed the instructions from the blog post (How to Secure GatsbyJS Sites with Auth0 for Authentication) and created this repo with our modifications: https://github.com/GreenOn/auth0-lock-gatsby.

And here is the hosted site: http://gatsby-auth0-lock-test.s3-website.us-east-2.amazonaws.com/.
We tried all kinds of things, but unable to get our site redirected. Could anyone take a look and help, please?
Thanks!
Pramod

konrad.sopala · June 30, 2020, 1:09pm

The above message was merged into this thread not to complicate communication. Thanks!

dynosapp · June 30, 2020, 4:32pm

We had to comment out the loaders.null() part out of the gatsby-node-js file to get rid of the Uncaught (in promise) Error: page resources for /signup/ not found.

// exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  //   if (stage === "build-html") {
  //     /*
  //      * During the build step, `auth0-js` will break because it relies on
  //      * browser-specific APIs. Fortunately, we don’t need it during the build.
  //      * Using Webpack’s null loader, we’re able to effectively ignore `auth0-js`
  //      * during the build. (See `src/utils/auth.js` to see how we prevent this
  //      * from breaking the app.)
  //      */
  //     actions.setWebpackConfig({
  //       module: {
  //         rules: [
  //           {
  //             test: /auth0-lock/,
  //             use: loaders.null(),
  //           },
  //         ],
  //       },
  //     })
  //   }
  // }

Now we at least get the lock.show() getting fired but no luck in getting the lock.on working.
Again, it works on the localhost but not on the hosted site.

→ Reproducible Repo and Hosted Site.

dynosapp · June 30, 2020, 11:53pm

I think we figured this out. On the localhost, it is a like a singlepage app, so after successfully logging in, it was able to find lock object on any page. However, on the production site, it is converting everything to static pages. So, lock object is only available on the signin page. When it returns to the index page, since the auth.js file out of utils is not referenced there, it doesn’t do anything. So, to solve the problem, auth.js reference was added to the index.js file and it works fine now. This was a bit tricky and glad that it is finally working.

konrad.sopala · July 1, 2020, 2:11pm

Perfect! Glad to hear that!

philip.colmer · August 6, 2020, 1:59pm

Hi - did this get published?

So I shouldn’t be trying to use the approach taken in GitHub - twclark0/gatsby-auth0 because it uses the SPA SDK and not the new React SDK?

Thanks.

philip.colmer · August 11, 2020, 8:04am

I wanted to add that I’ve managed to update my website so that it now used auth0-react instead of auth0-js. Using the React SDK results in much cleaner code.

A big shout out to Adam Mcgrath for being very patient and supportive when answering the various issues as I’ve submitted them on GitHub.

There is a sample Gatsby app included in the repo for the React SDK:

konrad.sopala · August 11, 2020, 9:44am

Thanks for sharing that Philip!

dan-auth0 · September 5, 2020, 6:39pm

We recently release the new Auth0 React SDK that makes it easier to add user authentication to React applications. You can integrate the Auth0 React SDK with Gatsby. Please checkout this Gatsby sample code and Gatsby example app for more details. Thank you for using Auth0 to secure your user experience.

konrad.sopala · September 8, 2020, 10:20am

Thanks for the headsup Dan!

vacilando · November 19, 2020, 2:09pm

Is there an update to this tutorial that takes into account the new File System Route API from Gatsby Announcing Gatsby’s new File System Route API | Gatsby ?

konrad.sopala · November 20, 2020, 11:44am

Thanks for asking! Let me contact appropriate people to get more info about that