Auth0 Home Blog Docs

Securing Gatsby with Auth0

In this tutorial, you’ll learn how to set up Auth0 for authentication and identity management on a GatsbyJS site.

Brought to you by @sam.julien :man_technologist:t2:

Read on :v:>> https://auth0.com/blog/securing-gatsby-with-auth0

I’d love to hear how you’re using Gatsby!

This is great, If i wanted to secure the whole site with auth0, whats the best way to do that?

1 Like

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!

Thanks.

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?

Ah, I see. Well, in that case, you’d probably want to modify wrapRootElement so that it handles both log in and silent auth.

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.

any idea what could be the issue?

Thanks

Hi @myhendry, welcome to the community!

Are you using the provided Auth0 developer keys for your GitHub connection? If so, silentAuth won’t work. You’ll need to create your own GitHub keys. You can read more about that in the Social Connections Devkeys docs as well as the docs on how to connect your app to GitHub.

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.

Hope that helps!

Cheers,
Sam Julien

Thanks Sam Julien! I will study that :slight_smile:

1 Like

@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!

Hi, thanks for the reply!
I see now that I got confused with !isLoggedIn :slight_smile:

But what if this fails somehow? Add logout() in the checksession error/empty result?

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. :thinking: