Auth0 Home Blog Docs

React Tutorial with Popup Authentication

hooks
react
auth
popup
#1

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

Read more at:

#2

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
#3

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:

#4

Good evening @sarahkapehe! 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…

#5

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 https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/, 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:

#6

Thanks @sarahkapehe!! 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.

2 Likes