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.

1import { initializeApp } from "firebase/app";
2import { getAuth, GoogleAuthProvider } from "firebase/auth";
3
4const firebaseConfig = {
5  apiKey: "API-KEY",
6  authDomain: "EXAMPLE-DOMAIN.firebaseapp.com",
7  projectId: "PROJECT-ID",
8  storageBucket: "DOMAIN.appspot.com",
9  messagingSenderId: "ID",
10  appId: "ID",
11  measurementId: "ID",
12};
13
14// Initialize Firebase
15const app = initializeApp(firebaseConfig);
16
17// init auth
18export const auth = getAuth(app);
19
20// init google provider
21export const gProvider = new GoogleAuthProvider();
22gProvider.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).

1import { auth, gProvider } from "./firebase_client";
2import { browserLocalPersistence } from "firebase/auth";
3
4ReactDOM.createRoot(document.getElementById("root")!).render(
5  <FBAuthProvider
6    fb_auth={auth}
7    g_provider={gProvider}
8    persistence_type={browserLocalPersistence}
9  >
10    <React.StrictMode>
11      <App />
12    </React.StrictMode>
13  </FBAuthProvider>
14);

Use anywhere

Basic App.tsx example:

1import { useFBAuth } from "@matterhorn-studios/react-fb-auth";
2
3function App() {
4  const { user, loading, error, googleSignIn, logOut } = useFBAuth();
5
6  if (loading) return <h1>LOADING</h1>;
7  if (error) return <h1>Error: {error.message}</h1>;
8  return (
9    <div>
10      {user ? (
11        <>
12          <div>{user.displayName}</div>
13          <button onClick={logOut}>log out</button>
14        </>
15      ) : (
16        <>
17          <div>no user found</div>
18          <button onClick={googleSignIn}>google sign in</button>
19        </>
20      )}
21    </div>
22  );
23}
24
25export 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)