React Tutorial with Popup Authentication

Learn what’s new with React Hooks. For example, use state in a functional component.

Read more at:

This is a great tutorial on knocking out both Auth0 authentication and seeing a great use of React Hooks.

Any chance this tutorial will/can be modified to not use a pop-up window for authentication?

1 Like

Thank you for reading!

Yes, there is a way to modify to use “redirect” instead of “pop-up”.

In src/auth/service.js in the line that says this:

" this.auth0.popup.authorize({}, (err, authResult) = { "

remove the part that says “.popup”. Be sure to change your “redirect” in “src/auth/config.js” to be something you would rather it redirect to instead of “/close-popup” and add that URL to your Auth0 “Allowed Callback URLs”. Hope that helps! :slight_smile:

Good evening @kapehe! Thanks for replying :grinning:

I was able to get the Auth0 configuration setup to redirect to http://localhost:3000/ instead of http://localhost:3000/close-popup and made the suggested change, however it didn’t seem to work quite like I would have imagined.

The popup window authentication does go away (yay!) and it all happens within the same page (wahoo!) but … the redirect is passing something like http://localhost:3000/#access_token=<thetoken> and the demo does not see the user as being authenticated.

Is there something super obvious I might be missing? I have an example up in a repo at https://github.com/TheRobBrennan/react-auth0-popup/tree/remove-popup if you are curious…

Hi @TheRobBrennan!

We have submitted a PR to your repository with a solution to your problem. Although the code there works, be aware that that is not the best approach. It would be way better if you had a Callback route/component to handle the authentication process when Auth0 redirect users back to your app.

For example, in this article The Complete Guide to React User Authentication with Auth0, you can see that in action. Just search for the “Securing your React App” section on it. I hope it helps!

Thanks! :slightly_smiling_face:

Thanks @kapehe!! Between your tutorial and an excellent pull request from @bruno.krebs the code has been revised!

Thank you both for your help - one great tutorial plus a generous pull request has led to a nice, easy to use starting point.

Please feel free to clone/play with https://github.com/TheRobBrennan/react-with-hooks-and-auth0 - you all rock.

3 Likes