Firebase Authentication with Role-Based Access in Docusaurus

This documentation provides steps to set up Firebase authentication and role-based access in a Docusaurus project.

1. Firebase Project Setup

Steps:

1. Go to the Firebase Console.
2. Create a new project following the instructions.
3. Enable Email/Password Authentication:
   • Go to Authentication > Sign-in method and enable Email/Password.
4. Set up Firestore for user roles:
   • Go to Firestore Database.
   • Click Start Collection, name it roles.
   • For each user, create a document using their uid as the Document ID and include a field called role (e.g., admin, user).

2. Installing Firebase in Docusaurus

Install Firebase SDK:

npm install firebase

3. Firebase Configuration with Environment Variables

To secure sensitive data, use environment variables:

Steps:

1. Create a .env file:

touch .env

2. Add Firebase configuration details:

REACT_APP_FIREBASE_API_KEY=YOUR_API_KEY
REACT_APP_FIREBASE_AUTH_DOMAIN=YOUR_PROJECT_ID.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
REACT_APP_FIREBASE_STORAGE_BUCKET=YOUR_PROJECT_ID.appspot.com
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID
REACT_APP_FIREBASE_APP_ID=YOUR_APP_ID

3. Update firebaseConfig.js:

firebaseConfig.js

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };

When deploying your site, set these environment variables in your hosting platform.

4. Role-Based Access with Firebase in Root.js

Manage role-based access by protecting routes (like /docs) for admin users:

Root.js

import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import '../css/login.css';
import { auth, getRoles } from './firebase';
import Loading from './Loading';
import Login from '../components/Login';
import NotAllow from '../components/NotAllow';

function Root({ children }) {
    const [userAuth, setUserAuth] = useState(null);
    const [authLoading, setAuthLoading] = useState(true);

    const location = useLocation();

    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged((user) => {
            setUserAuth(user); // Update the user
            setAuthLoading(false); // Update the loading state
        });

        return () => unsubscribe(); // Detach the listener
    }, []);

    const isAllow = () => {
        const whiteList = ['aldo@aldored.com'];
        const email = userAuth?.email;
        // Allow if email contains @uai.cl or @alumnos.uai.cl
        if (
            email &&
            (email.includes('@uai.cl') ||
                email.includes('@alumnos.uai.cl') ||
                whiteList.includes(email))
        ) {
            return true;
        }
        console.log('User not allowed:', email);
        return false;
    };

    if (authLoading) {
        return (
            <>
                <Loading />
                <div style={{ display: 'none' }}>{children}</div>
            </>
        );
    }

    // Check if the current route is a documentation page and the user is not logged in
    if (location.pathname.includes('/docs/') && !isAllow()) {
        if (!isAllow()) {
            return (
                <>
                    <NotAllow />
                    <Login />
                </>
            );
        }
        return <Login />;
    }

    return <>{children}</>;
}

export default Root;

How It Works

• The user's role is fetched from Firestore.
• Non-admin users are redirected away from restricted routes.
• If the user's email is included in the whitelist, or ends with @uai.cl or @alumnos.uai.cl.

5. Firestore Security Rules

Use Firestore security rules to control access:

firestore.rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /roles/{userId} {
      allow read: if request.auth.uid == userId;
      allow write: if request.auth.uid == userId && request.resource.data.role == 'admin';
    }
  }
}

Conclusion

Following these steps, your Docusaurus site will securely support Firebase authentication and role-based access.