The Complete Guide to React Authentication with Auth0

@dan-auth0 Thanks for the feedback.
There are no errors on the developer console.

I set it up following this tutorial… should I post the variables here so you could take a look if it were setup correctly?

https://undefined/authorize?screen_hint=signup&scope=openid%20profile%20email&response_type=code&response_mode=query&state=ck1lVXNmdmZkZFFuM2w2Ln5hcVdPaTJrMlpCcVVnYWQzRjA5dDk0bTluMw%3D%3D&nonce=RXJ3aWFPb2JBTn5OMnQ1bXF2X0dORUxPOTRDeFgtcGVEeHBTSFZ1OFVTMA%3D%3D&code_challenge=zBiIkOv_cmRb7MTYPAm0CccOvivR6kvu2lNYesK6uc0&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtcmVhY3QiLCJ2ZXJzaW9uIjoiMS4xLjAifQ%3D%3D

This is what the browser shows …

1 Like

I have seen this error before! Ensure that you restart your React application after you make the changes to .env. After you make the changes and restart, does it work?

1 Like

Works fine now. It was an error on my side. It resulted from the wrong wrapping of the Auth0Provider component. Thanks

2 Likes

Glad you have it working now!

1 Like

Great to read that you got your app working!

Hi

Thank you for tutorial. I followed it up and it works fine with Auth0. However when i try to test it with custom identity server it throws an error:
The authorization grant type is not supported by the authorization server.

The error occurs when it tries to exchange code for access token.
Is there a way to overcome this problem using the sdk?

Howdy, Daniyar. Welcome to the Auth0 community and thank you for reading the blog post. To better assist you, could you please expand on what you mean by using a custom identity server? Thanks!

Hey Dan

Thanks for your reply! I did find a solution, and I just want to share it here. I was originally running into a CORS issue, and had added mode: "no-cors" in the fetch calls in ExternalApi to get around it. I now know that that returns an opaque response which wasn’t getting parsed, so that’s why I was getting the 500 Server Error.

The real issue was that I needed to fix the cors clientOrigins in the express server. In short, it’s all good now :+1:

2 Likes

Perfect! Thanks for sharing it with the rest of community!

Thanks for sharing, Claire. I am glad that you got your apps working. Was your React application using a port different than 4040?

1 Like

Hey dan first off thanks for the amazing tutorial, the thing is everything is working but I would like user.sub from const { user } = useAuth0(); to be sent to my express backend as soon as I login in the front end. Could you help me with doing so plz? I was looking at node js auth0 tutorial but it was just confusing on how i could connect the front end login page to the backend since I am not that experienced.

1 Like

Thanks for reading the blog post and for your feedback :slight_smile: I am glad you liked it.

To better assist you, could you please share more details on your use case? For example, what is your end goal?

1 Like

Alright! In the app im making users save flight information. Then that info is sent to the back-end with the user.sub, ultimately i have a savedPage component where im trying to give user’s information back by sorting them out with user.sub. So i would like to send the user.sub info to the backend again when the user is logged in to sort it out. Sorry if my explanation is not good.

Sorry for the late reply, I was out of office. It sounds like what you need is a way to pass the user.sub to your backend when the user logs in, is that right?

no problem, yea exactly thats what i want to do

Hi, I’ve tried to follow this blog post by amending my current app. Everything seems to work fine until I expect to see the authentication persisting. A window refresh or jumping to a different page other than the redirected URL wipes the authentication.

Any ideas please, I really can’t see what I’m doing wrong…

Code → https://github.com/gwhitdev/mealmaker/tree/session

@dan-auth0 I just wanted to thank for an extremely well-written article! I especially liked extra info that could be expanded to give more detail on various topics.

2 Likes

Glad you liked it @cihat! Huge kudos @dan-auth0!

Thanks for your feedback, Cihat! I appreciate it :slight_smile:

1 Like