ReactFBAuth

A simple react package ment to make React/NextJS firebase authentication easy.

Built with Firebase web V9

currently supports email/password and Google authentication, more will be added soon

Setup and Usage

Create a Firebase config file

This file will house your Firebase config as well as auth object and its providers. Config object comes from Firebase console.

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "API-KEY",
  authDomain: "EXAMPLE-DOMAIN.firebaseapp.com",
  projectId: "PROJECT-ID",
  storageBucket: "DOMAIN.appspot.com",
  messagingSenderId: "ID",
  appId: "ID",
  measurementId: "ID",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// init auth
export const auth = getAuth(app);

// init google provider
export const gProvider = new GoogleAuthProvider();
gProvider.setCustomParameters({ prompt: "select_account" });

Add the provider to main

The provider takes in the auth object, the google provider, and the persistence type (https://firebase.google.com/docs/auth/web/auth-state-persistence).

import { auth, gProvider } from "./firebase_client";
import { browserLocalPersistence } from "firebase/auth";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <FBAuthProvider
    fb_auth={fb_auth}
    g_provider={g_provider}
    persistence_type={browserLocalPersistence}
  >
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </FBAuthProvider>
);

Use anywhere

Basic App.tsx example:

import { useFBAuth } from "@matterhorn-studios/react-fb-auth";

function App() {
  const { user, loading, error, googleSignIn, logOut } = useFBAuth();

  if (loading) return <h1>LOADING</h1>;
  if (error) return <h1>Error: {error.message}</h1>;
  return (
    <div>
      {user ? (
        <>
          <div>{user.displayName}</div>
          <button onClick={logOut}>log out</button>
        </>
      ) : (
        <>
          <div>no user found</div>
          <button onClick={googleSignIn}>google sign in</button>
        </>
      )}
    </div>
  );
}

export default App;

Methods on useFBAuth()

  • googleSignIn Prompts the user to sign in with google, populates the user, loading, and error object
  • emailSignIn(email: string, password: string) Signs the user in with the provided email and password, populates the user, loading, and error object
  • emailSignUp(email: string, password: string) Signs the user up with the provided email and password, populates the user, loading, and error object
  • logOut Logs the user out
  • clearError Clears the error object (resets it to null)

GitHub

View Github