Redirect instead of popup

[MatthieuVeillon]

Hi,

Thanks for your work Nicolas. Trying to get it work with redirect flow with a change state.

I tried signInFlow: 'redirect' but doesn't seems to work. In your "Using FirebaseAuth with a redirect" exemple - the signInFlow is at 'popup'. I assumed 'redirect' would be the right one, am I messing around ?

Thanks

[nicolasgarnier]

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.

[Haraldson]

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 ''
    }
}

[nicolasgarnier]

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?

[Haraldson]

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

Component Mounted, starting to observe onAuthStateChanged
New signedIn state false

[nicolasgarnier]

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

[Haraldson]

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} />

[nicolasgarnier]

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).

[Haraldson]

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

[nicolasgarnier]

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.

[Haraldson]

@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.

[nicolasgarnier]

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

[Haraldson]

And the WIP app: <link removed>

[nicolasgarnier]

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...

[bojeil-google]

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

[Haraldson]

@bojeil-google I added you now!