How to use Firebase UI to control data flow after signing in successfully(redirect or stay?)
By: Yingqi Chen
Tags: Firebase, Firebaseui, Signinsuccessurl, React, JavaScript

How to use Firebase UI to control data flow after signing in successfully(redirect or stay?) Yingqi Chen Follow Aug 16 · 3 min read

To build a user authentication system, Firebase UI is a brilliant tool! Once you install and configure it properly(both in your code and in Firebase console), you get 11 beautiful and working UI for signing in automatically, for GCP(Google Cloud Platform) users, you would even have two more ways to enable SAML and OIDC providers.

Install and configure

It is not too hard to start, you can follow the documentation to install, enable the specific provider in Firebase console and configure. And since I am using it for my Gatsby(which is a framework written in React) app, I use this documentation too to set up in React.

There are two components that you can use FirebaseUI : FirebaseAuth and StyledFirebaseAuth . The difference is illustrated here in the documentation:

FirebaseAuth has a reference to the FirebaseUI CSS file (it requires the CSS). StyledFirebaseAuth is bundled with the CSS directly.

I use the latter one. And here is a basic example of a StyledFirebaseAuth from the documentation:

// Import FirebaseAuth and firebase.

import React from 'react';

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

import firebase from 'firebase'; // Configure Firebase.

const config = {

apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',

authDomain: 'myproject-1234.firebaseapp.com',

// ...

};

firebase.initializeApp(config); // Configure FirebaseUI.

const uiConfig = {

// Popup signin flow rather than redirect flow.

signInFlow: 'popup',

// Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.

signInSuccessUrl: '/signedIn',

// We will display Google and Facebook as auth providers.

signInOptions: [

firebase.auth.GoogleAuthProvider.PROVIDER_ID,

firebase.auth.FacebookAuthProvider.PROVIDER_ID

]

}; class SignInScreen extends React.Component {

render() {

return (

<div>

<h1>My App</h1>

<p>Please sign-in:</p>

<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>

</div>

);

}

}

Callback after signing in

The documentation is very clear so I didn’t plan to talk too much about this. What I care the most is the data flow because when I used in a few days ago in my Gatsby app, I didn’t see too much information. So I want to write it down just in case someone might need it in the future.

When it is configured, you can sign in with the provider and connect it to the Firestore and create a user in Authentication in Firestore . After that, signInSuccessUrl: ‘/signedIn’ is going to redirect the flow to /signedIn .

But what if you want to do more than just redirect? Then you should use a callback called: signInSuccessWithAuthResult . It should be nested in callbacks object in uiConfig . So the example in the documentation looks like this:

// Configure FirebaseUI.

uiConfig = {

// Popup signin flow rather than redirect flow.

signInFlow: 'popup',

// We will display Google and Facebook as auth providers.

signInOptions: [

firebase.auth.GoogleAuthProvider.PROVIDER_ID,

firebase.auth.FacebookAuthProvider.PROVIDER_ID

],

callbacks: {

signInSuccessWithAuthResult: () => false

}

}

Use signInSuccessWithAuthResult callback to decide to redirect or stay

The callback will be a function that takes in two parameters, authObject (usually the user )and redirectURL . So you can do more after signing in successfully.

What it will return is actually a simple boolean value. If it returns true, then after signing in, user will be redirected to the URL that is specified by signInSuccessUrl . When it returns false, the user will stay on the same page.

Take care of async request in signInSuccessWithAuthResult

Another problem I have when I play with signInSuccessWithAuthResult is that since it asks for exactly a boolean value, when I use async/await to try to fetch data from a database or an API, I got an error stating that what I return is a Promise<boolean> , which does not match exactly what signInSuccessWithAuthResult expect to receive.

To handle this problem, just use a very small trick: use .then to handle the promise inside of the function. It is just a small trick, but I don’t see too much information about it online, so I write it here. Hopefully it will help you some day.

Notes

Just try to share a note about signInFlow . There are two ways: popup and redirect . It is defaulted to be redirect so if you want to speed up the loading process, specify it to popup !

Thanks for reading!