Handling Authentication in React with Context and Hooks

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 handle identity management in React by creating a global state for your authentication details with Context and update these details with Hooks.

By #GuestAuth0r @royderks :man_technologist:t2:

Read on :atom_symbol:

1 Like

Got any questions regarding the article? Feel free to reopen the topic!

Thanks for this article @royderks

How would you persist the logged in state between refreshes?

Let me ping @royderks directly through our Slack so as to get his response faster!

Hi @jredford, glad you enjoyed the article!

For persisting the authenticated state of the users, you can have a look at the “Keeping Users Signed In after a Refresh” section of this article https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/. It means you need to silently check if a user is logged in by using a Silent Authentication request

2 Likes

Thanks a lot Roy for the input!

Perfect, I was able to persist the auth state with the help of that article!

Thanks again @royderks and thanks @konrad.sopala

3 Likes

Glad we were able to help!

Nice tutorial. I’ve gone through to the end but I keep getting the following error in console:

Unhandled Promise Rejection: null

Clearly there is something wrong either in the .env file or in the settings of the Auth0 app. Could you provide more details on what settings you need to get this working in the Auth0 app. For example, does http://localhost:3000 need to be entered into the CORS setting?

As it stands now, I’ll get the error in the console as soon as I start the app, and when I press login, the browser loads https://dev-5-vlv7-y.auth0.com/ (my app domain) with a login form.

1 Like

Hello, Peter! Welcome to the Auth0 community. I see what you mean! I am getting the same message in the Dev Console. Part of that is that the Promise has no catch element and also that on page load the handleAuthentication method is not successful.

Let me revise the code. I think it will also be best to update this blog post to use our latest Auth0 SPA SDK. I’ll be working on this. As the weekend is soon approaching, I’ll give you an update by next week Wednesday. How does this sound?

Hello, Peter! I sincerely apologize that I forgot to give you an update. We are working on revamping the guidance for React Context and Hooks. I don’t have an ETA yet but the Research and Development is in progress :man_scientist: I’ll be updating this thread and the blog post once it’s ready :pray:

I have the same problem.

2 Likes

Hello, Przemysław :slight_smile: Welcome to our Auth0 Community. We continue working on this and we’ll provide updated guidance on the React space in the near future. We want to ensure we get it right and tested before we publish it :muscle:

3 Likes

Same issue :frowning: Maybe you should put a note at the top of the article so people don’t waste a lot of time implementing the code in the article only to have problems?

1 Like

Hello, Brendan, welcome to our Auth0 Community. I apologize for that. You are right, your time is valuable and we want you to receive full benefit from our guidance without hitting speed bumps or blockers. I am going to escalate this internally and have a solution ASAP. If we cannot work on a full blog post for it, we should at least provide you with a working sample app :+1:

Oops sorry, I didn’t mean to be quite so direct. Thanks for the tutorials, they help a lot. Anyway, I was looking around and I think your docs themselves are really good for this particular use case, i.e.: https://auth0.com/docs/quickstart/spa/react I’m pretty new to react so I’m probably missing something.

Thanks

1 Like

You are fine, Brendan! It’s valid and solid feedback. I do suggest at the time being to refer to that React QS for our latest guidance. I am discussing with my team internally what position we should take here as this blog post is using the older library, auth0-js. I think it’s best to provide guidance for both libraries as auth0-js is still commonly used. But, if you want to start with the latest, that React QS is a good point to start: it’s using Context and Hooks.

I’ll be working on adding a note based on your feedback. I think that’s a good addition to the blog post :pray:Thank you again for bringing that up!

I suggest deleting this article asap because

1- it’s about old context API and less about how to use auth0.
2- it’s an old auth0 sdk is Dan trying to explain how to use and you won’t know that until you read the comments.

1 Like