Firebase Auth

import { createContext, useContext, useEffect, useState } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, getIdToken } from 'firebase/auth';
import "@mcp-b/embedded-agent/web-component";

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

// Auth Context
const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(null);

  useEffect(() => {
    return onAuthStateChanged(auth, async (user) => {
      setUser(user);
      if (user) {
        const idToken = await getIdToken(user);
        setToken(idToken);
      } else {
        setToken(null);
      }
    });
  }, []);

  return (
    <AuthContext.Provider value={{ user, token }}>
      {children}
    </AuthContext.Provider>
  );
}

// Widget Component
function ChatWidget() {
  const { user, token } = useContext(AuthContext);

  useEffect(() => {
    if (user && token) {
      const agent = document.querySelector("webmcp-agent");
      if (agent) {
        agent.setAttribute("auth-token", token);
      }
    }
  }, [user, token]);

  return <webmcp-agent />;
}

// pages/api/token.js - Verify and refresh token server-side
import { getAuth } from 'firebase-admin/auth';
import { initializeApp, getApps, cert } from 'firebase-admin/app';

if (!getApps().length) {
  initializeApp({
    credential: cert(JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT)),
  });
}

export default async function handler(req, res) {
  const token = req.headers.authorization?.split('Bearer ')[1];

  if (!token) {
    return res.status(401).json({ error: 'No token provided' });
  }

  try {
    const decodedToken = await getAuth().verifyIdToken(token);
    // Token is valid, return it or generate a new one
    res.json({ valid: true, uid: decodedToken.uid });
  } catch (error) {
    res.status(401).json({ error: 'Invalid token' });
  }
}

// Client-side component
'use client';
import { useEffect } from 'react';
import { auth } from '../lib/firebase';
import "@mcp-b/embedded-agent/web-component";

export default function Widget() {
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(async (user) => {
      if (user) {
        const token = await user.getIdToken();
        const agent = document.querySelector("webmcp-agent");
        if (agent) {
          agent.setAttribute("auth-token", token);
        }
      }
    });

    return () => unsubscribe();
  }, []);

  return <webmcp-agent />;
}

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import "@mcp-b/embedded-agent/web-component";

firebase.initializeApp(firebaseConfig);

firebase.auth().onAuthStateChanged(async (user) => {
  if (user) {
    const idToken = await user.getIdToken();

    const agent =
      document.querySelector("webmcp-agent") ?? document.createElement("webmcp-agent");

    if (!agent.isConnected) {
      document.body.appendChild(agent);
    }

    agent.setAttribute("auth-token", idToken);
  }
});