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.
In this tutorial, you’ll learn how to set up Auth0 for authentication and identity management on a GatsbyJS site.
Hi David, thanks! You would just use the same approach and have the logic that’s in the account component in whatever your home component will be. And you’d most likely have a “login” button that would trigger the Auth0 authorization. Everything else would basically be the same though (the auth utility, the silent auth, etc). Hope that helps!
I’m looking to protect the whole gatsby site (without the option to login/logout on click) if that makes sense? Would it be best to wrap auth0 stuff in layout.js or higher?
Hi. The lesson worked fine for me until the silentAuth part. I used Github social authentication instead of Google social authentication.
I was able to log in successfully. However, after i refresh the page, it kicked me out to the home page and thereafter, i cannot navigate back to the account page unless i delete the isLoggedIn key through the application console
The expected behavior: when i refresh the page, it should show my name on the page (instead of kicking me out to the home page)
I pasted in the code thus there shouldn’t be any typos in the code.
By the way, GitHub auth is the same used in the GatsbyJS Store, which I implemented using the same procedure in this article. So, feel free to check out that code as well as another resource.
@sam.julien Wouldn’t it be better in the authService isAuthenticated() function to validate tokens.expiresAt instead of localStorage.isLoggedIn?
A token can be expired without an active logout action from the user.
edit: And set ‘expiresAt’ in localStorage instead of ‘isLoggedIn’
Hi @arn, great question. In this case, we’re using isLoggedIn to trigger silentAuth – this checks whether the user has a valid session on the server and returns a valid token. This way, we never have to rely on the client to keep track of the token outside of memory or manually check the expiration date. Hope that helps!
In the example we just navigate to the home route in case of an error in setSession:
if (err) {
navigate("/")
cb()
return
}
I suppose you could call the logout() method just to be safe. I’m trying to think of any edge cases where you wouldn’t want that. I think it’s fine so long as you remember to only call checkSession if isLoggedIn is true. Otherwise, you’ll end up calling it every time the page loads and thus calling log out every time the page loads and a user isn’t logged in.
Hey @sam.julien, going through the quickstart for a spa app, it now directs us to use auth0-spa-js. Will this guide be updated to reflect that at some point?
More importantly should we be using auth0-spa-js going forward or is auth0-js still a good option?
Hi @squadsdev, welcome to the community! I do plan on updating the article, or in the short term at least making a branch in the sample code that shows how you’ll use it with Gatsby. It should actually result in a bit less code. In the meantime, you’re fine using auth0-js for now. If you want to dig into the new SPA SDK with Gatsby yourself, the React Quickstart is the place to go.
Hey @sam.julien, I followed the instructions on this blog post (tweaked a little bit for it to be more appropriate for the project I’m working on), and it worked beautifully. However, in the post you mention,
“Note that this isn’t a very sophisticated method of redirecting since there is no implementation of remembering the browser history. For example, if this function is run from a different route, it will always redirect back to /account . In a real application, you’ll want to implement something more robust.”
Right now I’m trying to do just that…redirect the user back to the page they tried to go to before going through the authentication process. How would I go about setting that up?
Hi @jacobsilver2, great question. If you’re using auth0.js like in the tutorial, you can use state to keep track of this (basically you pass state at login and retrieve/process it during the callback handling). Check out this page of the docs to see what I mean. I’m having a hard time finding a specific walkthrough for doing this in React but I’ll keep poking around.
If you’re using the new auth0-spa-js library, check out the current React QuickStart. You could pretty easily replace auth0.js with auth0-spa-js in your case, though it is not necessary. Note that in the new library, you’ll use appState instead of state.
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.
>> How to Secure GatsbyJS Sites with Auth0 for Authentication
