@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!
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.
Donovan, welcome to the Auth0 community 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 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 Thank you!
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
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.
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
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
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.
Hey @Civility (and everyone else on this thread ),
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:
May 5th, Tyler Clark will be hosting Gatsby on the Auth0 channel
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.
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