Redirect instead of popup about firebaseui-web-react HOT 24 CLOSED

I updated to v1.0.10, and it works beautifully guys! Thanks for the help. I deployed the updated version in case you want to see for yourselves. :)

from firebaseui-web-react.

Hey @MatthieuVeillon, I have not yet tried with signInFlow: 'redirect'. In the example Using FirebaseAuth with a redirect I showing how to do a redirect after the sign-in flow is complete but you are right, the sign-in flow is still using popup.

Using signInFlow: 'redirect' with a state change should still work. Would you have an example online where this doesn't work?

You could also use the firebase.auth().onAuthStateChanged listener to check the auth state after the redirect. Actually, in general, it might be good to only draw the UI after the firebase auth state is ready. So wait for firebase.auth().onAuthStateChanged to trigger once and then draw the app's UI.

from firebaseui-web-react.

You could also use the firebase.auth().onAuthStateChanged listener to check the auth state after the redirect. Actually, in general, it might be good to only draw the UI after the firebase auth state is ready. So wait for firebase.auth().onAuthStateChanged to trigger once and then draw the app's UI.

This is how I set things up. The <FirebaseAuth> component is always rendered unless the user is signed in, as I expect it — as it’s kind of a black box — to handle whatever’s needed in order to log me in, be it listen for redirect tokens, auth state changes or anything else.

What’s missing here?

import React, { Component } from 'react'
import firebase from 'firebase'
import { FirebaseAuth } from 'react-firebaseui'

export default class SignIn extends Component {
    state = {
        signedIn: false
    }

    uiConfig = {
        signInFlow: 'redirect',
        signInOptions: [
            firebase.auth.FacebookAuthProvider.PROVIDER_ID,
            {
                provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
                recaptchaParameters: {
                    type: 'image',
                    size: 'normal',
                    badge: 'bottomleft'
                },
                defaultCountry: 'NO'
            }
        ],
        callbacks: {
            signInSuccess: this.onSignInSuccess
        }
    }

    componentDidMount() {
        this.props.auth.onAuthStateChanged(user => {
            if(user)
                this.onSignInSuccess()
        })
    }

    onSignInSuccess = () => {
        this.setState({ signedIn: true })
        return false
    }

    render() {
        if(!this.state.signedIn) {
            return (
                <div id="sign-in">
                    <h1>Please sign in to <strong>App</strong></h1>
                    <FirebaseAuth uiConfig={this.uiConfig} firebaseAuth={this.props.auth} />
                </div>
            )
        }

        return ''
    }
}

from firebaseui-web-react.

Can you check that componentDidMount actually fires? and what about the auth state changed observer. Basically could you replace with:

  componentDidMount() {
        console.log('Component Mounted, starting to observe onAuthStateChanged');
        this.props.auth.onAuthStateChanged(user => {
                console.log('New signedIn state', !!user);
                this.setState({ signedIn: !!user })
        })
    }

And see what gets logged?

from firebaseui-web-react.

I’m getting these on both page loads (before and after the redirect):

Component Mounted, starting to observe onAuthStateChanged
New signedIn state false

from firebaseui-web-react.

Strange...

Can you show me how you create the firebase app instance? this.props.auth. just want to make sure it's not using a random app name for instance.

On a side note: as per my own testing popup auth actually works well in mobile browsers. You can try this app on a bunch of mobile devices for instance: https://www.friendly-pix.com

from firebaseui-web-react.

this.props.auth is just the initialized Firebase app instance, passed in from the parent component (the React app itself).

Basically just

import Fire from '../fire'
const auth = Fire.auth()

// Then in render()
<SignIn auth={auth} />

from firebaseui-web-react.

I just wanted to make sure the app doesn't have a random name at initialization. For instance: firebase.initializeApp(config, randomAppName); If the app name changes between page loads then things won't work properly between pages (Just checking, since it's unlikely that you are doing this anyhow).

from firebaseui-web-react.

Not passing in any app name, actually. It’s optional in the documentation, but does your implementation rely on it?

from firebaseui-web-react.

nope it's good that you are not :)

@bojeil-google do you have any idea? It's strange after the page redirects back the user is not signed-in...

@Haraldson by any chance would you be able to put this non-working example online somewhere? So we could try it out and experience the issue.

from firebaseui-web-react.

@nicolasgarnier The Facebook Login app isn’t public, I would have to manually add you as a tester to it. Send me your fbid/username if still interested.

from firebaseui-web-react.

Here it is: https://www.facebook.com/nivco

from firebaseui-web-react.

And the WIP app: <link removed>

from firebaseui-web-react.

Thanks @Haraldson.

@bojeil-google > After the redirect flow it looks like the user is signed in the temporary Firebase app instance created by firebaseUi, but not in the original app instance. For instance in the app pointed above:

auth.app.firebase_.app('nt-versus-firebaseui-temp').auth().currentUser returns a user but
auth.currentUser is null...

Looks like there is something wrong with the way the temporary app signs-users in the main app after the redirect in react. Not sure what it could be but maybe that rings a bell to you...

from firebaseui-web-react.

Not sure yet why this is happening as I can't test it. Can you add my Facebook account as a tester?
https://www.facebook.com/profile.php?id=100010123453643

from firebaseui-web-react.

@bojeil-google I added you now!

from firebaseui-web-react.

Ok, I think I have a theory:

      t.prototype.componentDidMount = function() {
            n(221);
            var e = n(222);
            this.firebaseUiWidget = e.auth.AuthUI.getInstance() || new e.auth.AuthUI(this.firebaseAuth),
            this.firebaseUiWidget.reset(), 
            this.firebaseUiWidget.start("#" + this.elementId, this.uiConfig)
        }

You are calling reset() right after initialization, that is cancelling the previous pending operation. We cancel on reset because for single page apps, reset is used to cancel and restart sign in. So when the UI is shown again on the same page, it doesn't process a previous operation. When you instantiate a new instance, don't call reset immediately after. Call it only when already initialized.

from firebaseui-web-react.

I never call reset() on anything, but maybe the built code does? If so, that’s all happening in the <FirebaseAuth> component.

from firebaseui-web-react.

Yep that's done in <FirebaseAuth> let me make an exception for the redirect flow...
I'll publish anew version so you can try it out asap.

from firebaseui-web-react.

@Haraldson can you try v1.0.10 ? :)

from firebaseui-web-react.

@bojeil-google if the reset() was the culprit would the nt-versus-firebaseui-temp app still have the signed-in user?

from firebaseui-web-react.

In this case, yes. When the FirebaseUI instance is initialized, the temp app is also initialized which initializes the Auth instance underneath. That is enough for it to complete the sign in with redirect. reset does not signOut the user from that temp instance: https://github.com/firebase/firebaseui-web/blob/master/javascript/widgets/authui.js#L441
We could add logic to do so. The risks of dangling auth states are low since we use sessionStorage for that state, so the session will be lost when the window is closed.

from firebaseui-web-react.

I think we can signOut from the temp instance on reset. It's not a high priority but I think it is better to do so.

from firebaseui-web-react.

yay! Awesome thanks for checking @Haraldson

from firebaseui-web-react.