Auth0 Home Blog Docs

Authenticating Your First React App

Learn how to authenticate a React app using Auth0’s new SPA SDK, React Context, and React Hooks.

Read on :atom_symbol:

Brought to you by @chrisoncode :man_technologist:t2:

For a more hooks oriented approche, I recommend looking on this tutorial samples:

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: 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?)


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:

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!