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

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

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

How to Create Protected Routes in a React app with Firebase and react-router

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

What is firebase,firebase bangla tutorial.

LIKE | COMMENT | SHARE | SUBSCRIBE The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

React Native Firebase Authentication

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.

How to Upload Photos to Firebase Storage in React Native

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.