Please read our latest guidance: The Complete Guide to React User Authentication with Auth0. This new guide is based on the new Auth0 React SDK, React Context, and React Hooks.
Learn how to authenticate a React app using Auth0’s new SPA SDK, React Context, and React Hooks.
Brought to you by @chrisoncode 
For a more hooks oriented approche, I recommend looking on this tutorial samples: GitHub - auth0-samples/auth0-react-samples: Auth0 Integration Samples for React Applications.
The on above, is more no-hooks approach at some point! All depend of your React application, in fact.
It would be helpful to have this example in TypeScript as well. Also, a way to d/l the entire source for the sample.
Hi Ramiro,
I’ve followed the tutorial and have can successfully log in and log out using the source code: GitHub - auth0-blog/react-auth0-spa-sdk-ga with my Auth0 credentials.
But if i close the browser tab and open a new one and load http://localhost:3000/ then neither login nor logout is displayed and the only way to “reset” the webapp is to delete the cookies.
How should this be handled and would you be able to make source code updates?
Another question I have is around having multiple tabs open of the same webapp and how this should be securely handled. There is a discussion regarding this from 2018 but not sure if it is still relevant and if it applies to SPAs? (Also, let me know if I should be asking up this question in a different channel?)
Thanks,
Dan
Yup! Both are great approaches. All depends on your team and current codebase.
A TypeScript example is a great idea. May have to do that in the future.
To download the entire source, visit the GitHub repo. Also you can download the entire thing with this download link:
https://github.com/auth0-samples/auth0-react-samples/archive/master.zip
Hey Dan,
Do you have your source code available? To check if you are logged in or not, you can download the React Developer Tools
This may be an issue that your logged in or logged out information isn’t being loaded into React on page load and that’s why logged in/logged out info is not showing. The React Developer Tools are a good way to debug this to see if the correct authenticated information is making it into your React app on page load.
Could you expand more on the multiple tabs? Every time a new tab is opened, Auth0 is checked for authentication using the checkSession() method. This means that every tab is authenticated as soon as it is opened. Every time you call your backend API also, you should be sending a JWT token so that every request you make is authenticated. Between checkSession() and the JWT, that is good security.
If you have any further questions, let me know!
Great article, but you repeatedly promise to explain how to get a token to make authenticated API calls. It would be really helpful if that information could be included!
Hey Chris,
This was very helpful but it looks like you forgot to include the section for ‘Grabbing an auth token to use when calling APIs’. I would appreciate it if you could post that as well.
Sorry about that. Here’s a link to the Auth0 React Quickstart that has the technique. Basically you use the getTokenSilently() method in the auth0-spa-js.
Tutorial: Auth0 React SDK Quickstarts: Call an API
GitHub: GitHub - auth0/auth0-spa-js: Auth0 authentication for Single Page Applications (SPA) with PKCE
getTokenSilently(): auth0-spa-js/Auth0Client.ts at 178b65f30c9b7a76ce762a1b4de1bd3ccfca5e5a · auth0/auth0-spa-js · GitHub
Sorry about that. Here’s a link to the Auth0 React Quickstart that has the technique. Basically you use the getTokenSilently() method in the auth0-spa-js.
Tutorial: Auth0 React SDK Quickstarts: Call an API
GitHub: GitHub - auth0/auth0-spa-js: Auth0 authentication for Single Page Applications (SPA) with PKCE
getTokenSilently(): auth0-spa-js/Auth0Client.ts at 178b65f30c9b7a76ce762a1b4de1bd3ccfca5e5a · auth0/auth0-spa-js · GitHub about that. Here’s a link to the Auth0 React Quickstart that has the technique. Basically you use the getTokenSilently() method in the auth0-spa-js.
Tutorial: Auth0 React SDK Quickstarts: Call an API
GitHub: GitHub - auth0/auth0-spa-js: Auth0 authentication for Single Page Applications (SPA) with PKCE
getTokenSilently(): auth0-spa-js/Auth0Client.ts at 178b65f30c9b7a76ce762a1b4de1bd3ccfca5e5a · auth0/auth0-spa-js · GitHub
Thanks a lot for those links @chrisoncode!
Great tutorial! Is it a problem that we are handling variables such as ‘isAuthenticated’ from the front end without checking Auth0 for this each time…? Can these variables be messed with by a malicious user?
I have a problem with maintaining the session.
Even with the default project, every time that I login and refresh the page, it redirects to the signup page, it doesn’t cache the session.
Any solution on that?
There could be an issue with showing users parts of the UI that they shouldn’t see. They shouldn’t be able to see (GET) or update (POST) any sensitive data though since the token will be checked whenever we hit our API.
You can take this a step further and update isAuthenticated by checking Auth0 every time.
It could be that you are using social logins? When we use social logins with Auth0’s default keys (for Facebook, Twitter, etc), the session will NOT be kept.
Bring in your own keys or try email/password when working locally. Hopefully that helps.
Thanks for sharing that knowledge Chris!
I am using the Auth0 SDK for the first time in a single page React app, but for some reason when I navigate to a different component, the Auth0Context does not persist and I am logged out again. If anyone knows why this may be happening I would be very grateful! Thanks!
Hey there!
Can you share with us a link to the repo / quickstart of ours that you are using? Thanks!
Hi! I followed this tutorial: https://rb.gy/03ppfl
I have no trouble getting the Auth0Context to work properly in the NavBar component, and in a profile component that I added. But then when I begin the actual workflow of my application and call useAuth0() as instructed in the tutorial, it seemingly doesn’t register that I’ve already logged in. Thanks so much in advance for your help!
