• Stars
    star
    1,262
  • Rank 37,273 (Top 0.8 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created about 7 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Wrapper for firebaseUI Web

npm version GitHub license

FirebaseUI React Components

FirebaseUI React Components provides React Wrappers on top of the Firebase UI Web library and notably Firebase UI Auth.

FirebaseUI Auth provides a drop-in auth solution that handles the UI flows for signing in users with email addresses and passwords, and Identity Provider Sign In using Google, Facebook and others. It is built on top of Firebase Auth.

Installation and Usage

For an example on how to use the FirebaseAuth react component have a look at the example folder.

Install the npm package in your React app:

npm install --save react-firebaseui

You also need the firebase package installed which is a peer dependency:

npm install --save firebase

In your app:

  1. Import the FirebaseAuth or the StyledFirebaseAuth component from react-firebaseui and import firebase.
  2. Configure Firebase as described in the Firebase Docs.
  3. Write a Firebase UI configuration as described in firebase/firebaseui-web.
  4. Use the FirebaseAuth component in your template passing it the Firebase UI configuration and a Firebase Auth instance.

FirebaseAuth vs. StyledFirebaseAuth

There are two similar components that allow you to add FirebaseUI auth to your application: FirebaseAuth and StyledFirebaseAuth.

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

For simplicity you should use StyledFirebaseAuth and for potential better performances and build sizes you can use FirebaseAuth. FirebaseAuth is meant to be used with a CSS/style loader as part of your webpack built configuration. See the Packing your app section.

Using StyledFirebaseAuth with a redirect

Below is an example on how to use FirebaseAuth with a redirect upon sign-in:

// Import FirebaseAuth and firebase.
import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

// 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,
  ],
};

function SignInScreen() {
  return (
    <div>
      <h1>My App</h1>
      <p>Please sign-in:</p>
      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
    </div>
  );
}

export default SignInScreen

Using StyledFirebaseAuth with local state.

Below is an example on how to use StyledFirebaseAuth with a state change upon sign-in:

// Import FirebaseAuth and firebase.
import React, { useEffect, useState } from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

// 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',
  // We will display Google and Facebook as auth providers.
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // Avoid redirects after sign-in.
    signInSuccessWithAuthResult: () => false,
  },
};

function SignInScreen() {
  const [isSignedIn, setIsSignedIn] = useState(false); // Local signed-in state.

  // Listen to the Firebase Auth state and set the local state.
  useEffect(() => {
    const unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => {
      setIsSignedIn(!!user);
    });
    return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
  }, []);

  if (!isSignedIn) {
    return (
      <div>
        <h1>My App</h1>
        <p>Please sign-in:</p>
        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
      </div>
    );
  }
  return (
    <div>
      <h1>My App</h1>
      <p>Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
      <a onClick={() => firebase.auth().signOut()}>Sign-out</a>
    </div>
  );
}

export default SignInScreen;

Accessing the FirebaseUI instance

To allow for further configuration you can access the firebaseUI instance before it is started. To do this you can pass a uiCallback callback function that wil be passed the Firebase UI instance. For example here is how to enable the disableAutoSignIn() option:

// ...

return (
  <div>
    <h1>My App</h1>
    <p>Please sign-in:</p>
    <StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
  </div>
);

Packing your app

If you are using the StyledFirebaseAuth component there should not be special configuration needed to package your app since the CSS is already included within the component. if you would like to extract the CSS you should use the FirebaseAuth component instead.

The FirebaseAuth needs a global CSS to get proper styling. The CSS is already imported within FirebaseAuth. If you are using webpack you'll need to add CSS loaders:

{
  module: {
    rules: [
      {
        test: /\.css/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

PS: make sure your rule does not exclude /node_modules/ as this is where the library, and therefore, the CSS is located.

With ExtractTextPlugin

If you are using ExtractTextPlugin to extract a CSS file from the required CSS files you would typically use:

{
  plugins: [new ExtractTextPlugin('./bundle.css')],
  module: {
    rules: [
      {
        test: /\.css/,
        loader: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader']
          })
      }
    ]
  }
}

PS: make sure your rule does not exclude /node_modules/ as this is where the library, and therefore, the CSS is located.

With ExtractTextPlugin and CSS modules

If you are using CSS modules in your app you need to handle the CSS files in /node_modules/ in a separate loader so that they are imported as global CSS files and not modules. Your setup could look like:

{
  plugins: [new ExtractTextPlugin('./bundle.css')],
  module: {
    rules: [
      // CSS loaders for CSS modules in your project. We exclude CSS files in ./node_modules
      {
        test: /\.css$/,
        exclude: [/\.global\./, /node_modules/],
        loader: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use:[
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 1,
                  modules: true,
                  autoprefixer: true,
                  minimize: true,
                  localIdentName: '[name]__[local]___[hash:base64:5]'
                }
              }
            ]
          })
      },

      // CSS loaders for global CSS files which includes files in ./node_modules
      {
        test: /\.css/,
        include: [/\.global\./, /node_modules/],
        loader: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader']
          })
      }
    ]
  }
}

Styling

To change the styling of the FirebaseAuth or the StyledFirebaseAuth widget you can override some of its CSS. To do this, import a CSS that will be included in your packed application. For instance create a firebaseui-styling.global.css file and import it in your app:

import './firebaseui-styling.global.css'; // Import globally. Not with CSS modules.

Note: If you are using the With ExtractTextPlugin and CSS modules Webpack build rule above, the .global.css suffix will make sure the CSS file is imported globally and not ran through modules support.

If you would like to see an example of styling, have a look at the example app.

Alternatively you can include the styling in a <style> tag in your application's markup.

Server-Side Rendering (SSR)

FirebaseUI React cannot be rendered server-side because the underlying, wrapped library (FirebaseUI) does not work server-side.

You can still import and include this library in an app that uses SSR: there should be no errors but no elements will be rendered.

Contributing

We'd love that you contribute to the project. Before doing so please read our Contributor guide.

License

Β© Google, 2011. Licensed under an Apache-2 license.

More Repositories

1

functions-samples

Collection of sample apps showcasing popular use cases using Cloud Functions for Firebase
JavaScript
12,063
star
2

flutterfire

πŸ”₯ A collection of Firebase plugins for Flutter apps.
Dart
8,671
star
3

quickstart-android

Firebase Quickstart Samples for Android
Java
8,563
star
4

firebase-js-sdk

Firebase Javascript SDK
TypeScript
4,830
star
5

quickstart-js

Firebase Quickstart Samples for Web
HTML
4,818
star
6

FirebaseUI-Android

Optimized UI components for Firebase
Java
4,628
star
7

firebaseui-web

FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices.
JavaScript
4,558
star
8

firebase-tools

The Firebase Command Line Tools
TypeScript
3,994
star
9

firebase-ios-sdk

Firebase iOS SDK
Objective-C
3,583
star
10

quickstart-ios

Firebase Quickstart Samples for iOS
Swift
2,773
star
11

firebase-android-sdk

Firebase Android SDK
Java
2,244
star
12

codelab-friendlychat-web

The source for the Firebase codelab for building a cross-platform chat app
JavaScript
1,749
star
13

firebase-admin-node

Firebase Admin Node.js SDK
TypeScript
1,621
star
14

FirebaseUI-iOS

iOS UI bindings for Firebase.
Objective-C
1,507
star
15

geofire-js

GeoFire for JavaScript - Realtime location queries with Firebase
TypeScript
1,443
star
16

firebase-admin-go

Firebase Admin Go SDK
Go
1,142
star
17

superstatic

Superstatic: a static file server for fancy apps.
JavaScript
1,097
star
18

firebase-functions

Firebase SDK for Cloud Functions
TypeScript
1,024
star
19

firebase-admin-python

Firebase Admin Python SDK
Python
1,019
star
20

quickstart-nodejs

JavaScript
895
star
21

extensions

Source code for official Firebase extensions
TypeScript
892
star
22

quickstart-unity

Firebase Quickstart Samples for Unity
C#
775
star
23

snippets-android

Android snippets for firebase.google.com
Java
762
star
24

snippets-web

Web snippets for firebase.google.com
JavaScript
749
star
25

genkit

An open source framework for building AI-powered apps with familiar code-centric patterns. Genkit makes it easy to develop, integrate, and test AI features with observability and evaluations. Genkit works with various models and platforms.
TypeScript
701
star
26

geofire-java

GeoFire for Java - Realtime location queries with Firebase
Java
671
star
27

firebase-admin-java

Firebase Admin Java SDK
Java
527
star
28

friendlyeats-web

JavaScript
467
star
29

geofire-objc

GeoFire for Objective-C - Realtime location queries with Firebase
Objective-C
440
star
30

snippets-node

Node.js snippets for firebase.google.com
JavaScript
369
star
31

firebase-admin-dotnet

Firebase Admin .NET SDK
C#
367
star
32

quickstart-testing

Samples demonstrating how to test your Firebase app
TypeScript
335
star
33

firebase-tools-ui

A local-first UI for Firebase Emulator Suite.
TypeScript
269
star
34

friendlyeats-android

Cloud Firestore Android codelab
Kotlin
261
star
35

codelab-friendlychat-android

Firebase FriendlyChat codelab
Kotlin
243
star
36

firebase-cpp-sdk

Firebase C++ SDK
C++
230
star
37

quickstart-java

Quickstart samples for Firebase Java Admin SDK
Java
224
star
38

firebase-functions-test

TypeScript
211
star
39

quickstart-cpp

Firebase Quickstart Samples for C++
C++
190
star
40

fastlane-plugin-firebase_app_distribution

fastlane plugin for Firebase App Distribution. https://firebase.google.com/docs/app-distribution
Ruby
166
star
41

friendlypix-ios

Friendly Pix iOS is a sample app demonstrating how to build an iOS app with the Firebase Platform.
Swift
166
star
42

quickstart-flutter

Dart
138
star
43

firebase-functions-python

Python
136
star
44

geofire-android

GeoFire for Android apps
Java
133
star
45

firebase-unity-sdk

The Firebase SDK for Unity
C#
128
star
46

friendlyeats-ios

Swift
127
star
47

snippets-ios

iOS snippets used in firebase.google.com
Objective-C
121
star
48

firebaseopensource.com

Source for firebase open source site
TypeScript
118
star
49

quickstart-python

Jupyter Notebook
115
star
50

FirebaseUI-Flutter

Dart
102
star
51

codelab-friendlychat-ios

Swift
68
star
52

snippets-rules

Snippets for security rules on firebase.google.com
TypeScript
45
star
53

emulators-codelab

JavaScript
44
star
54

oss-bot

Robot friend for open source repositories
TypeScript
36
star
55

firebase-bower

Firebase Web Client
JavaScript
35
star
56

snippets-flutter

Dart
30
star
57

snippets-go

Golang snippets for firebase docs
Go
24
star
58

snippets-java

Java snippets for firebase.google.com
Java
17
star
59

firebase-docs

TypeScript
16
star
60

abseil-cpp-SwiftPM

C++
13
star
61

firebase-testlab-instr-lib

Java
13
star
62

snippets-cpp

C++ snippets for firebase.google.com
C++
12
star
63

SpecsStaging

SpecsStaging
11
star
64

SpecsTesting

Ruby
11
star
65

rtdb-to-csv

JavaScript
11
star
66

appquality-codelab-ios

Firebase iOS App Quality Codelab
Objective-C
11
star
67

level-up-with-firebase

C#
9
star
68

boringSSL-SwiftPM

C++
8
star
69

firestore-bundle-builder

TypeScript
7
star
70

.github

Default configuration for Firebase repos
6
star
71

nginx

This repo is a PUBLIC FORK
C
6
star
72

SpecsDev

6
star
73

snippets-python

Python snippets for firebase.google.com
4
star
74

firebase-release-dashboard

JavaScript
4
star
75

ok

HTTPS CDN Proxy Healthy Check
4
star
76

grpc-SwiftPM

C++
3
star
77

crashlytics-testapps

Java
2
star
78

data-connect-ios-sdk

Swift
2
star
79

.allstar

1
star