react-auth-firebase

React HOC for easier firebase authentication

Usage no npm install needed!

<script type="module">
  import reactAuthFirebase from 'https://cdn.skypack.dev/react-auth-firebase';
</script>

README

react-auth-firebase

A React package to simplify firebase authentication. All it has is a single HOC.

This does not work with React Native.

Supported Authorization methods

  • Email
  • Google
  • Facebook
  • Github
  • Twitter

Demo

See this codesandbox for demo.

Usage

Install

gt; npm install firebase react-auth-firebase

 (or)

gt; yarn add firebase react-auth-firebase

Create a project at Firebase console

  • Firebase Setup
  • Enable required authentication methods (email/google/facebook/github/twitter) in firebase console.
  • You might need to set up applications at these providers' and keep API keys ready. A short note on setting up applications is written at their related authConfig options.

Setup firebase config in your project

//firebaseConfig.js
//

import firebase from "firebase";

// https://firebase.google.com/docs/web/setup?authuser=0

// See firebase setup in above google firebase documentation url
export const config = {
  apiKey: "----",
  authDomain: "----",
  databaseURL: "----",
  projectId: "----",
  storageBucket: "----",
  messagingSenderId: "----"
};

firebase.initializeApp(config);

export default firebase;

Final

//App.js
import React, { Component } from "react";
import firebase from "./firebaseConfig"; // Careful to not import from "firebase"
import withFirebaseAuth from "react-auth-firebase";

class App extends Component {
  render() {
    // user object will have signed in user details if auth state changed
    // user will be null if not logged in

    // Use only the required methods.
    // If a property called 'google' not given in authConfig, signInWithGoogle and googleAccessToken will not be available for use.
    // Similar for others.

    const {
      signInWithEmail,
      signUpWithEmail,
      signInWithGoogle,
      signInWithFacebook,
      signInWithGithub,
      signInWithTwitter,
      googleAccessToken,
      facebookAccessToken,
      githubAccessToken,
      twitterAccessToken,
      twitterSecret,
      signOut,
      user,
      error
    } = this.props;

    const { email, password } = this.state;

    return (
      <div>
        // For Sign In
        <form onSubmit={e => e.preventDefault()}>
          ...form input to take email and password for sign in
          <button
            type="submit"
            onClick={() => signInWithEmail(email, password)}
          >
            SignIn
          </button>
        </form>
        // For Sign Up
        <form onSubmit={e => e.preventDefault()}>
          ...form input to take email and password for sign up
          <button
            type="submit"
            onClick={() => signUpWithEmail(email, password)}
          >
            SignUp
          </button>
        </form>
        <button onClick={signInWithGoogle}>Signin with Google</button>
        <button onClick={signInWithFacebook}>Signin with Facebook</button>
        <button onClick={signInWithGithub}>Signin with Github</button>
        <button onClick={signInWithTwitter}>Signin with Twitter</button>
      </div>
    );
  }
}

// Important

// See authConfig api for all available options
// Add only the required auth types.
// Only their related props will be added
// For ex: signInWithGoogle will be added only when there is google object in authConfig
// At least an empty object required to enable that method

const authConfig = {
  email: {
    verifyOnSignup: false, // Sends verification email to user upon sign up
    saveUserInDatabase: true // Saves user in database at /users ref
  },
  google: {
    // redirect: true, // Opens a pop up by default
    returnAccessToken: true, // Returns an access token as googleAccessToken prop
    saveUserInDatabase: true // Saves user in database at /users ref
  },
  facebook: {
    // redirect: true, // Opens a pop up by default
    returnAccessToken: true, // Returns an access token as googleAccessToken prop
    saveUserInDatabase: true // Saves user in database at /users ref
  },
  github: {
    // redirect: true,
    returnAccessToken: true,
    saveUserInDatabase: true
  },
  twitter: {
    // redirect: true,
    returnAccessToken: true,
    returnSecret: true,
    saveUserInDatabase: true
  }
};

export default withFirebaseAuth(App, firebase, authConfig);

API

withFirebaseAuth(Component, firebase, authConfig)

  • returns

    • A component with methods for authentication

  • arguments

    • component - A react component
    • firebase - A firebase instance which is already initialized
    • authConfig - A config object with options for authentication. See authConfig for available options

authConfig

  • email

    • verifyOnSignup: Boolean

      • Should send verification email upon sign up ?
      • default: false

    • saveUserInDatabase: Boolean

      • Should user object be saved in firebase database at /user ref ?
      • Only uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous will be saved
      • default: false

  • google

    NOTE: Make sure your domain is authorized for oAuth at Firebase console -> Authentication -> Sign-in method -> Authorized Domains

    • scopes: Array
      • Optional scopes to add to google provider
      • See google scopes for reference.
      • Pass only the scope name and not entire scope url.
        • Example: ["adsense", "analytics"]

    • customParams: Object

      • Optional custom oAuth parameters to send with oAuth request
      • See google custom params for reference

    • redirect: Boolean

      • Should use redirect instead of pop-up to sign in ?
      • Will replace popup with redirect if true
      • default: false

    • returnAccessToken: Boolean

      • Should return a google access token as googleAccessToken prop ?
      • default: false

    • saveUserInDatabase: Boolean

      • Should user object be saved in firebase database at /user ref ?
      • Only uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous will be saved
      • default: false

  • facebook

    NOTE: Set up facebook application at Facebook Developers with Facebook Login product enabled. Add App ID and App Secret from Facebook App in Firebase console. Copy the Redirect URI shown in Firebase console to Facebook App -> Products -> Facebook Login -> Valid OAuth redirect URIs

    • scopes: Array
      • Optional scopes to add to facebook provider
      • See facebook permissions for reference.
      • Pass only the scope name and not entire scope url.
        • Example: ["email", "public_profile"]

    • customParams: Object

    • redirect: Boolean

      • Should use redirect instead of pop-up to sign in ?
      • Will replace popup with redirect if true
      • default: false

    • returnAccessToken: Boolean

      • Should return a facebook access token as facebookAccessToken prop ?
      • default: false

    • saveUserInDatabase: Boolean

      • Should user object be saved in firebase database at /user ref ?
      • Only uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous will be saved
      • default: false

  • github

    NOTE: Set up github application at Github Applications with callback URL shown at Firebase Console. Add the generated Client ID and Client Secret to Firebase Console.

    • scopes: Array
      • Optional scopes to add to github provider
      • See github authorization options for reference.
      • Pass only the scope name and not entire scope url.
        • Example: ["repo", "user"]

    • customParams: Object

      • Optional custom oAuth parameters to send with oAuth request
      • See github custom params for reference

    • redirect: Boolean

      • Should use redirect instead of pop-up to sign in ?
      • Will replace popup with redirect if true
      • default: false

    • returnAccessToken: Boolean

      • Should return a github access token as githubAccessToken prop ?
      • default: false

    • saveUserInDatabase: Boolean

      • Should user object be saved in firebase database at /user ref ?
      • Only uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous will be saved
      • default: false

  • twitter

    NOTE: Set up twitter application at Twiiter Applications with callback URL shown at Firebase Console. Add the generated API Key and API Secret to Firebase Console.

    • customParams: Object

    • redirect: Boolean

      • Should use redirect instead of pop-up to sign in ?
      • Will replace popup with redirect if true
      • default: false

    • returnAccessToken: Boolean

      • Should return a github access token as githubAccessToken prop ?
      • default: false

  • returnSecret: Boolean

    • Should return a twitter secret token as twitterSecret prop ?

    • default: false

    • saveUserInDatabase: Boolean

      NOTE: Twitter by default doesn't give back any email, so it will be saved as null. Check this Stackoverflow Question for further information on getting email.

      • Should user object be saved in firebase database at /user ref ?
      • Only uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous will be saved
      • default: false

props

  • signInWithEmail: Function

    • description: method to sign in using existing credentials
    • arguments
      • email: string
      • password: string

  • signUpWithEmail: Function

    • description: method to sign up new user
    • arguments
      • email: string
      • password: string

  • signInWithGoogle: Function

    • description: method to sign in using Google oAuth
    • arguments: none

  • signInWithFacebook: Function

    • description: method to sign in using Facebook oAuth
    • arguments: none

  • signInWithGithub: Function

    • description: method to sign in using Github oAuth
    • arguments: none

  • signInWithTwitter: Function

    • description: method to sign in using Twitter oAuth
    • arguments: none

  • googleAccessToken: String

    • description: Gives a google access token to access Google APIs
    • will be null if returnAccessToken is false in authConfig

  • facebookAccessToken: String

    • description: Gives a facebook access token to access Facebook APIs
    • will be null if returnAccessToken is false in authConfig

  • githubAccessToken: String

    • description: Gives a github access token to access Github APIs
    • will be null if returnAccessToken is false in authConfig

  • twitterAccessToken: String

    • description: Gives a twitter access token to access Twitter APIs
    • will be null if returnAccessToken is false in authConfig

  • twitterSecret: String

    • description: Gives a twitter secret to access Twitter APIs
    • will be null if returnSecret is false in authConfig

  • signOut: Function

    • description: method to sign out user. user object will become null
    • arguments: none

  • user: Object

    • Object with User details after sign in.
    • Check documentation for available properties.

  • error: Object

    • description: Error object from firebase will be returned as is
    • Note: some custom errors will be given in console as well
    • Will have better control in next versions

Roadmap

  • FirebaseAuth render prop
  • Similar package for React Native

License