Securing Gatsby with Auth0

hi @arn, if I follow your code I get back a state that seems to be an encoded value, or a random value, but I’m not getting back the state I put in.

@sam.julien I’ve also tried the appState param, but that seems to always return ‘null’, I’m using the Universal login page…

@sam.julien friendly reminder on the Gatsby with SPA library, any time yet to whip up a new example?

Good weekend!

2 Likes

Ok got the state to work, but not using ‘state’, but in the login function in Sams sample, do:

  auth.authorize({
    appState: {
      redirectUri: `${window.location.pathname}${window.location.search}`,
    },
  })

In setSettion you can now do the redirect as suggested by @arn

Perhaps this is related to me using the Universal Login, where I’ve seen some more cases of state not working.

If I remember correctly, a token is automatically placed in the authresult.state when no state is set (using universal login). I did a check like

if (authResult.state && authResult.state.charAt(0)==='/') {
  navigate(authResult.state); 
} else {
  navigate('/');
}

Thanks guys for shaaring these code snippets!

@aldegoeij Hey there, good to hear from you! I’ve been working on a prototype of using auth0-spa-js with the Hooks wrapper inside of Gatsby. I’ve got it working in the browser, but it’s kind of useless right now because the build breaks due to the use of browser APIs. In the current implementation with auth0.js, you’ll notice we do a few isBrowser checks in the auth utility. Because it’s just a class, we can just return and pretend like nothing happened. With hooks, it’s a bit more complicated. I’m going to work with the SDK team to try to figure out the most idiomatic solution to this. Once I get that part figured out, I’ll be able to post the sample code here. Thanks for your continued patience! :pray:

2 Likes

Fantastic tutorial. Thank you.

Question: what’s the simplest way to integrate this with Stripe and PayPal for subscriptions and handle user roles for different pages?

E.g. Customer makes a Gold subscription and can access all pages, but a Bronze subscription can only access some pages.

For Stripe and PayPal purchases, cancellations or billing changes, where to direct the webhook to add Auth0 account? I’d love a guide on this (I would even pay for it). No clear tutorials around that cover paid subscriptions + Auth0 + Gatsby.

1 Like

Donovan, welcome to the Auth0 community :slight_smile: It’s cool that you mention this use case of Stripe/PayPal. I’ve been polling internally for the demand for such content and collecting feedback from around our community.

Customer makes a Gold subscription and can access all pages, but a Bronze subscription can only access some pages.

This a pretty cool premise for a blog post :100: I am going to open a new topic in this forum so we can move the discussion there, if you’d like. I’d love to get more of your thoughts on what the outline of such blog post may look like and also perhaps feedback from others :+1: Thank you!

UPDATE: Here’s the topic :slight_smile:

Hi Sam Julien, I understand Gatsby is advocating using app.js for client-only routes and pages for statically rendered routes.

As your example is using pages for client-only routes, it will require additional codes in gatsby-node.js and will also not be in line with what Gatsby advocates in order to keep the codes cleaner and thus be easier to maintain down the road.

is it possible to rewrite your codes to use with app.js? Thanks :slight_smile:

I’m sure Sam will cover that once he’s online!

Hey @myhendry, thanks for writing in.

Can you clarify what you mean by this and where you saw this recommendation?

The approach I took in the article was based on this livestream that Jason Lengstorf (former dev rel at Gatsby) did with Ado Kukic on adding Auth0 to Gatsby, so it’s definitely a viable way to do it (or at least it was at the time). It’s the same way they built the Gatsby swag store.

That said, as I’m building a new sample app with auth0-spa-js I will probably not take this same approach, so I’m curious to better understand what you mean.

Thanks!

Hi @sam.julien, my understanding is that the preferred way for dynamic apps in Gatsby is to use app.js. For static apps, we use pages. This way, we can better segregate concerns thus files in reserved ‘pages’ folder will be rendered statically whilst those in another folder will be rendered dynamically. I have done a demo authentication with Gatsby using Auth0 and simple-auth using Firebase. Firebase uses app.js while the Auth0 uses pages. Gatsby Auth Demo

I think consistency in pattern will make it easier for us to manage our project and separate portion of our apps which are dynamic and which are static.

Thanks for the excellent work with Auth0. it makes authentication a breeze :smiley:

Interesting @myhendry, thanks for sharing! I will look into this as I build out my next sample app.

Glad you are having a good experience with Auth0!

Hi Sam, based on your securing gatsby with auth0 codes, how can we use returnTo to control the URLs to go to when logging out? I have a localhost:8000 for dev and hendry-gatsby.netify.com as logout URLs on auth0 dashboard. Thanks

Found this one: GitHub - NWRichmond/gatsby-auth0-spa-example: Example Gatsby app which uses the auth0-spa-js SDK for protected routes
Still uses wrapRootelement and useAuth0()

On a separate not, is there an easy way if I have two SPAs on the same domain that they share Auth0 credentials / tokens somehow, or will they always do a callback loop when I navigate between them?

I agree that Auth0 authentication is fast (much faster than Firebase Web!) but I found Firebase to be simpler to set up, and Meteor account ridiculously easy, and truly a breeze (one line of code).

Anyway, I wanted to ask, is this tutorial still the recommended method to start with when using Gatsby on a new project? Or is the auth0-SPA version / React Quickstart recommended now?

In the latter case, it would help to mention that at the top of this blog post.

1 Like

Friendly ping @sam.julien!

Hey @Civility (and everyone else on this thread :wave:),

We’re actually writing a new article as we speak about using auth0-spa-js with Gatsby that should be published in the next month. Once that’s published, we’ll add a notice to the top of my article. We haven’t because many folks are still using auth0.js and so the article is still valid in that case.

We’re also doing two collaborative streams with Gatsby that will walk through this process:

On May 2nd, I’m giving a talk at ByteConf React (it’s free!) about Gatsby auth. It doesn’t mention Auth0 specifically but is the same basic process. I’ll be posting the slides and code here.

Hope that helps!

Cheers,
Sam Julien

1 Like

Thanks @sam.julien!

And to prevent this from happening again, I’d like to mention that (at least) two Gatsby themes have been built based on this post:

2 Likes

Thanks for sharing that @Civility!

I might be late to the party but has anyone ever run into webpack issues when running “npm run build”. Developer mode runs fine but as soon as a I try to build it crashes with:
WebpackError: TypeError: auth0_js__WEBPACK_IMPORTED_MODULE_0___default.a.WebAu th is not a constructor
I’ve tried deleting the cache and public folders along with a fresh install and im getting the same error.
I cant tell if this is version issue or not

I followed this blog pretty closely heres a link to my project: GitHub - L-Town-FC/we-roast: Dont talk to me before i've had my coffee