The Complete Guide to React Authentication with Auth0

David, that’s a great question :slight_smile: I’ll be creating much more content on React Security and Identity in the coming weeks/months and this is a use cause that I want to highlight! React SDK vs Auth0 SPA SDK.

Technically, what happens under the hood is still the same. However, prior to the introduction of the React SDK, we prompted developers to create a React Component to manage their Auth0 Authentication integration. You’d copy and paste a large section of code into a file that would be your “React SDK”.

What we did was to package all that integration into its own consumable package following the idioms of React. Now, you download the SDK and think in terms of React constructs at a high level (Hooks, Higher-Order Components) instead of having to implement authentication functionality from scratch.

You could also say that the React SDK is opinionated. We provide you with the high-level functions to power the authentication flow. If you were to use the Auth0 SPA SDK, you assemble the flow perhaps in a different way and create different hooks or wrappers.

To my knowledge, if you need to access the Auth0 Client outside of the React Realm, you may benefit from using the Auth0 SPA SDK.

Regarding Gatsby:

We are in the process of updating our Gatsby Guidance to use the new React SDK. I recommend that you try out the React SDK with Gatsby as it’s very easy to use. You can use the withAuth0 HOC to wrap the components you want to protect or you could create a private route component for the router that Gatsby uses. On my personal experience, I always ended up migrating to React Router as I find it easier to create that private route component.