Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

loginWithPopup does not login as `authorization_response` message is never received #295

Closed
tommedema opened this issue Nov 29, 2019 · 2 comments

Comments

@tommedema
Copy link

@tommedema tommedema commented Nov 29, 2019

Description

I've followed the steps in the quickstart for react to get a redirect based login working. However, when substituting the method loginWithRedirect with loginWithPopup, the application breaks.

Here's the working application with a redirect:
https://github.com/tommedema/startup-boilerplate/tree/login-redirect

Here's the not working application with a popup implementation:
https://github.com/tommedema/startup-boilerplate/tree/login-popup

Reproduction

  1. git clone git@github.com:tommedema/startup-boilerplate.git
  2. git checkout login-popup
  3. yarn install
  4. yarn build
  5. cd packages/react-app
  6. cp .env.example .env, you can use my temporary dev client ID (will regenerate after you fixed this):
AUTH0_DOMAIN=...
AUTH0_CLIENT_ID=...
  1. yarn dev --> attempt to login

Result is a blank popup and the application not receiving the authentication authorization. There does not seem to be a handlePopupCallback() method in auth0-spa-js.

Here's a video showing what's wrong:
https://www.loom.com/share/f7350994c4b54dbc90c75911d40e373d

Environment

Please provide the following:

  • Version of this library used: 1.6.0
  • Version of the platform or framework used, if applicable: react 16.12.0
  • Other relevant versions (language, server software, OS, browser): https://whatsmybrowser.org/b/2YSC7JF
  • Other modules/plugins/libraries that might be involved: none
@stevehobbsdev

This comment has been minimized.

Copy link
Contributor

@stevehobbsdev stevehobbsdev commented Dec 2, 2019

When I tried interacting with your app, the page was refreshing in the background when I clicked the login link.. the context between the page and the popup was probably being lost somewhere, meaning that the SDK couldn't close it when it was done. Probably want to throw a preventDefault on that link and do something like this instead (which fixed it for me):

const LoginView: React.FC = () => {
  const { loginWithRedirect, loginWithPopup } = useAuth0();

  const login = async e => {
    e.preventDefault();
    await loginWithPopup();
  };

  return (
    <Fragment>
      <p>What's your inner animal?</p>
      <a href="" onClick={login}>
        Login to view Emoji
      </a>
    </Fragment>
  );
};
@tommedema

This comment has been minimized.

Copy link
Author

@tommedema tommedema commented Dec 2, 2019

@stevehobbsdev that makes a lot of sense; adding e.preventDefault() resolves this issue. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.