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: https://github.com/auth0-samples/auth0-react-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: https://github.com/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: https://auth0.com/docs/quickstart/spa/react/02-calling-an-api#call-the-api
GitHub: https://github.com/auth0/auth0-spa-js#2---calling-an-api
getTokenSilently(): https://github.com/auth0/auth0-spa-js/blob/178b65f30c9b7a76ce762a1b4de1bd3ccfca5e5a/src/Auth0Client.ts#L345

1 Like

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: https://auth0.com/docs/quickstart/spa/react/02-calling-an-api#call-the-api
GitHub: https://github.com/auth0/auth0-spa-js#2---calling-an-api
getTokenSilently(): https://github.com/auth0/auth0-spa-js/blob/178b65f30c9b7a76ce762a1b4de1bd3ccfca5e5a/src/Auth0Client.ts#L345Sorry 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: https://auth0.com/docs/quickstart/spa/react/02-calling-an-api#call-the-api
GitHub: https://github.com/auth0/auth0-spa-js#2---calling-an-api
getTokenSilently(): https://github.com/auth0/auth0-spa-js/blob/178b65f30c9b7a76ce762a1b4de1bd3ccfca5e5a/src/Auth0Client.ts#L345

1 Like

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?