Installation

Add Firefuse to your project

npm install @firefuse/react

Usage in the application

Set the firebase auth configuration

import { getAuth } from 'firebase/auth';
import { initializeApp } from 'firebase/app';

/**
 * Depends on your project setup, you may want to use firebase config directly
 * or like here via environment variables.
 * Here we assume you are using Vite and have firebase config in .env file.
 */
export const firebaseConfig = {
  apiKey: import.meta.env.FIREBASE_API_KEY,
  authDomain: import.meta.env.FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.FIREBASE_APP_ID,
  measurementId: import.meta.env.FIREBASE_MEASUREMENT_ID,
};

const firebaseApp = initializeApp(firebaseConfig)

const firebaseAuth = getAuth(firebaseApp);
// here init firestore, analytics etc.

export { firebaseAuth };

Use the FirefuseProvider

import React from 'react';
import { FirefuseProvider } from '@firefuse/react';
import { firebaseAuth } from '../config/firebase';

const App = () => {
  return (
    <FirefuseProvider
      domain="my-app.firefuse.io"
      redirectUrl={window.location.origin}
      firebaseAuth={firebaseAuth}
    >
      <h1>Firefuse</h1>
    </FirefuseProvider>
  );
};

Check if user is authenticated

import React from 'react';
import { useAuth } from '@firefuse/react';

const Home = () => {
  const { isAuthenticated, user, loginWithRedirect, logout } = useAuth();

  return (
    <div>
      {isAuthenticated ? (
        <div>
          <h1>Welcome {user.displayName}</h1>
          <button onClick={() => logout()}>Logout</button>
        </div>
      ) : (
        <div>
          <h1>Welcome Guest</h1>
          <button onClick={() => loginWithRedirect({ redirectUrl: window.location.origin })}>Login</button>
        </div>
      )}
    </div>
  );
};

Protecting routes

Create a ProtectedRoutes component

import {useAuth} from "@firefuse/react";
import {Outlet} from "react-router";
import {useEffect} from "react";

export const ProtectedRoutes = () => {
  const { isAuthenticated, getAuthUrl } = useAuth();

  useEffect(() => {
    if (!isAuthenticated) {
      window.location.href = getAuthUrl({ redirectUrl: window.location.href });
    }
  }, [isAuthenticated, getAuthUrl]);

  if (!isAuthenticated) {
    return null;
  }

  return <Outlet/>;
}

Use the ProtectedRoutes component

import './App.css'
import {Route, Routes} from "react-router";
import Home from "./pages/Home.tsx";
import Dashboard from "./pages/Dashboard.tsx";
import {ProtectedRoutes} from "./components/ProtectedRoutes.tsx";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route element={<ProtectedRoutes/>}>
        <Route path="/dashboard" element={<Dashboard />} />
      </Route>
    </Routes>
  )
}

export default App;

Debugging

To get more details in the dev console you can also provide additional param debug.

<FirefuseProvider
  {...otherParams}
  debug={true}
>
  <h1>Firefuse</h1>
</FirefuseProvider>

Contributing

We are open to any contributions. Just fork the project, make your changes and open a pull request.

Credits

This project is developed and maintained by Firefuse team.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.