Skip to content
🎉React Firebase Auth module, with support for I18N
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
.storybook
src
stories
.babelrc
.eslintrc.js
.gitignore
.prettierrc.js
CONTRIBUTING.md
LANGUAGES.md
LICENSE
README.md
commitlint.config.js
package.json

README.md

React Firebase Auth npm version License: MIT Known Vulnerabilities

🥳 Firebase Auth Module with support for Translations. Check out the demo.

Install

You can install this library via NPM or YARN.

NPM

npm i @blackbox-vision/react-firebase-auth

YARN

yarn add @blackbox-vision/react-firebase-auth

Peer dependencies

This package relies on react and firebase as peer-dependecies:

// or major versions of them
npm i react@16.4.0 firebase@4.0.0

Use case

Need to render Firebase Auth, but also need to load an specific translated version.

Usage

The usage is really simple:

// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { FirebaseAuth } from '@blackbox-vision/react-firebase-auth';

class AuthModule extends React.Component {
  state = {
    uiConfig: null,
    firebase: null,
  };

  componentDidMount() {
    const firebase = require('firebase/app');
    require('firebase/auth');

    if (firebase.apps.length === 0) {
      firebase.initializeApp({
        apiKey: process.env.FIREBASE_API_KEY,
        projectId: process.env.FIREBASE_PROJECT_ID,
        authDomain: process.env.FIREBASE_AUTH_DOMAIN,
        databaseURL: process.env.FIREBASE_DATABASE_URL,
        storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
        messagingSenderId: process.env.FIREBASE_MESSAGE_SENDER_ID,
      });
    }

    window.firebase = firebase;

    this.setState({
      firebase,
      uiConfig: {
        signInFlow: 'popup',
        // Redirect to 'url' after sign in is successful.
        signInSuccessUrl: `${window.location.href}`,
        signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          {
            provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
            scopes: ['public_profile', 'email', 'user_likes', 'user_friends'],
          },
        ],
        callbacks: {
          signInSuccessWithAuthResult: (...args) => {
            return false;
          },
        },
      },
    });
  }

  render() {
    const { uiConfig, firebase } = this.state;

    return (
      <Fragment>
        {uiConfig && firebase && (
          <FirebaseAuth
            lng="es_419"
            version="3.4.1"
            uiConfig={uiConfig}
            firebaseAuth={firebase.auth()}
          />
        )}
      </Fragment>
    );
  }
}

ReactDOM.render(<AuthModule />, document.getElementById('root'));

Props

FirebaseAuth use the following props:

Properties Types Default Value Description
id string firebaseui_container Determines wheter to render Firebase UI.
lng string es_419 Determines the specific lang to load. See supported Languages.
version string 3.4.1 Determines the specific version to load.
uiConfig object none Determines the config for Firebase UI.
firebaseAuth object none Determines the firebase auth instance.
className string none Determines className to apply to the container.
uiCallback function none Determines the callback to run when Firebase UI is available

Issues

Please, open an issue following one of the issues templates. We will do our best to fix them.

Contributing

If you want to contribute to this project see contributing for more information.

License

Distributed under the MIT license. See LICENSE for more information.

You can’t perform that action at this time.