How to use Firebase UI to control data flow after signing in successfully

Use signInSuccessWithAuthResult to handle data flow to redirect or stay.

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

StyledFirebaseAuth is bundled with the CSS directly.

I use the latter one. And here is a basic example of a StyledFirebaseAuthfrom 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>
    );
  }
}

firebase react javascript

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Using Firebase and react-router to create protected routes in a react app.

ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

Using React Native we and Firebase we will perform some React Native Firebase login with Google, as well as phone, password with email and even anonymous logins.

Uploading photos to Firebase Storage is a common practice in React Native apps. Using React Native you can build a variety of app screens that are cross-platform using JavaScript as the main programming language.