@blackbox-vision/react-firebase-auth

React Firebase Auth

🥳 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.