Email provider does not work in a popup

[jakeleventhal]

trafficstars

when setting the option signInFlow: 'popup', it works properly for Facebook and Google authentication, but does not work for email authentication. I am instead redirected to https://www.accountchooser.com/redirect.html#localhost:3000

[swiftanthony]

Same here. I use your provided example project for testing. Change signInOptions to:

signInOptions: [
  {
    provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
    signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
  }
],

I will receive the email with link, but clicking on it will not sign me in. If I comment out the line signInFlow: 'popup' sign in works

[jakeleventhal]

I'm using firebase.auth.EmailAuthProvider.PROVIDER_ID

[philberg]

@swiftanthony I am having the same issue, but I don't have a popup enabled. I think there is something wrong with the StyledFirebaseAuth and the emailLink auth method.. Any ideas?

[dankawka]

@jakeleventhal

I'm experiencing exactly the same behaviour...

provider: firebaseAuth.EmailAuthProvider.PROVIDER_ID,
signInMethod: firebaseAuth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,

[ctavan]

Same problem here, EMAIL_LINK_SIGN_IN_METHOD won't work with signInFlow: 'popup'.

@philberg @jakeleventhal any news in the meantime?

[jakeleventhal]

@ctavan yeah, i switched to login with amazon lol

[wti806]

If you want to disable accountchooeser, you can disable it by adding: credentialHelper: 'none' in the config object.

[ctavan]

@wti806 thanks for the hint! Disabling account chooser is nice.

However EMAIL_LINK_SIGN_IN_METHOD still won't work with signInFlow: 'popup' irrespective of credentialHelper: 'none' or not.

[wti806]

I tried popup mode with firebaseui: https://github.com/firebase/firebaseui-web#demo It works for me. So it should be something wrong with the react-wrapper. I'll look into it when I have time. Thanks for reporting the issue.

[dankawka]

@wti806 I believe it is related to:

if (this.uiConfig.signInFlow === 'popup') {
        this.firebaseUiWidget.reset();
      }

My code works fine:

import React from 'react';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';

class NewFirebaseAuth extends React.PureComponent {
  componentDidMount() {
    this.observer = this.props.firebase.auth().onAuthStateChanged(user => {
      if (!user && this.isSignedIn) {
        this.ui.reset();
      }

      this.isSignedIn = !!user;
    });

    this.ui =
      firebaseui.auth.AuthUI.getInstance() ||
      new firebaseui.auth.AuthUI(this.props.firebaseAuth);

    // Trigger the callback if any was set.
    if (this.props.uiCallback) {
      this.props.uiCallback(this.ui);
    }

    this.ui.start('#NEW_FIREBASE_AUTH', this.props.uiConfig);
  }

  componentWillUnmount() {
    this.observer = null;
  }

  render() {
    return <div id="NEW_FIREBASE_AUTH" />;
  }
}

export default NewFirebaseAuth;

[Luke-Markham]

credentialHelper: 'none' works for me !

[tomseago]

So yes, I can confirm that the email link login does not work if the mode is set to popup. So the simple solution is to change the mode right? Well - when I do that, it seems that google stops working! So I'm stuck with making a choice between popups with google, or no popups with email, but then no google. I haven't tested all the other providers yet. I'd love to be able to get popups + google + email link all working happily together.

Setting the credentialHelper to none didn't seem to have any real effect one way or the other for me.

[trtg]

@dankawka where is the questionable snippet of code you mentioned? This bit:

if (this.uiConfig.signInFlow === 'popup') {
        this.firebaseUiWidget.reset();
      }

I'm trying to figure out why with the StyledFirebaseAuth component the uiconfig.callbacks are not called for email provider using sign in link flow if an observer is registered for onAuthStateChanged. Would also be good to know why popup flow is broken here.

[dankawka]

@trtg It started to work when I removed that part from the original code.

[knxlab]

Hi,

I have the same problem, and I've found an ugly solution, but well, it works :)

signInFlow: firebase.auth().isSignInWithEmailLink(window.location.href) ? 'redirect' : 'popup',

[jackykwandesign]

Hi,

I have the same problem, and I've found an ugly solution, but well, it works :)

signInFlow: firebase.auth().isSignInWithEmailLink(window.location.href) ? 'redirect' : 'popup',

Thanks for your solution, really appreciate that

[Sydney-o9]

For those of you using SSR, you will have to make sure you have a window object

signInFlow: (typeof window != "undefined" && firebase.auth().isSignInWithEmailLink(window.location.href)) ? 'redirect' : 'popup',