@blackbox-vision/react-firebase-auth v1.0.1

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:

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.