feat: use firebase provider in account-verifier

Author: AdriaCarrera

apps/account-verifier/package.json

@@ -16,6 +16,7 @@
         "bignumber.js": "^9.2.1",
         "buffer": "^6.0.3",
         "elliptic": "^6.6.1",
+        "firebase": "^11.1.0",
         "history": "5.3.0",
         "jose": "^6.0.11",
         "near-api-js": "^5.1.1",

apps/account-verifier/src/auth_config.json

@@ -4,5 +4,11 @@
     "audience": "fast-auth-api-test-0.com",
     "appOrigin": "https://fast-auth-account-verifier.vercel.app",
     "mpcContractId": "v1.signer-prod.testnet",
-    "fastAuthContractId": "fast-auth-beta-001.testnet"
+    "fastAuthContractId": "fast-auth-beta-001.testnet",
+    "firebase": {
+        "apiKey": "",
+        "authDomain": "near-mobile-99e38.firebaseapp.com",
+        "projectId": "near-mobile-99e38",
+        "issuerUrl": "https://fast-auth.testnet.swe.at"
+    }
 }

apps/account-verifier/src/config.ts

@@ -17,6 +17,7 @@ export function getConfig() {
     return {
         domain: configJson.domain,
         clientId: configJson.clientId,
+        firebase: configJson.firebase,
         ...(audience ? { audience } : null),
     };
 }

apps/account-verifier/src/hooks/use-fast-auth-relayer.tsx

@@ -2,23 +2,30 @@ import { createContext, useContext, useState, useEffect, type ReactNode } from "
 import FastAuthRelayer, { type NetworkId } from "../services/fast-auth-relayer";
 import { FastAuthClient } from "@fast-auth/browser-sdk";
 import { JavascriptProvider } from "@fast-auth/javascript-provider";
+import { FirebaseProvider } from "@fast-auth/browser-sdk";
 import config from "../auth_config.json";
 import { Connection } from "near-api-js";
+import {getConfig} from "../config.ts";
+
+export type ProviderType = "auth0" | "firebase-google" | "firebase-apple";
 
 interface FastAuthContextType {
     relayer: FastAuthRelayer | null;
-    client: FastAuthClient<JavascriptProvider> | null;
+    client: FastAuthClient<JavascriptProvider | FirebaseProvider> | null;
     isRelayerInitialized: boolean;
     isClientInitialized: boolean;
     error: Error | null;
     network: NetworkId;
     setNetwork: (network: NetworkId) => Promise<void>;
+    provider: ProviderType;
+    setProvider: (provider: ProviderType) => Promise<void>;
 }
 
 const FastAuthContext = createContext<FastAuthContextType | null>(null);
 
 const APP_ORIGIN = import.meta.env.VITE_APP_ORIGIN || config.appOrigin;
 const NETWORK_STORAGE_KEY = "fast-auth-network";
+const PROVIDER_STORAGE_KEY = "fast-auth-provider";
 
 const getStoredNetwork = (): NetworkId => {
     if (typeof window === "undefined") return "testnet";
@@ -35,6 +42,21 @@ const saveNetwork = (network: NetworkId) => {
     }
 };
 
+const getStoredProvider = (): ProviderType => {
+    if (typeof window === "undefined") return "auth0";
+    const stored = localStorage.getItem(PROVIDER_STORAGE_KEY);
+    if (stored === "auth0" || stored === "firebase-google" || stored === "firebase-apple") {
+        return stored;
+    }
+    return "auth0";
+};
+
+const saveProvider = (provider: ProviderType) => {
+    if (typeof window !== "undefined") {
+        localStorage.setItem(PROVIDER_STORAGE_KEY, provider);
+    }
+};
+
 const getContractsFromNetwork = (network: NetworkId) => {
     switch (network) {
         case "mainnet":
@@ -53,38 +75,57 @@ const getContractsFromNetwork = (network: NetworkId) => {
 export function FastAuthProvider({ children, initialNetwork }: { children: ReactNode; initialNetwork?: NetworkId }) {
     // Load network from localStorage or use initialNetwork/default
     const storedNetwork = getStoredNetwork();
+    const storedProvider = getStoredProvider();
     const defaultNetwork = initialNetwork || storedNetwork;
-    
+    const firebaseConfig = getConfig().firebase;
+
     const [relayer, setRelayer] = useState<FastAuthRelayer | null>(null);
-    const [client, setClient] = useState<FastAuthClient<JavascriptProvider> | null>(null);
+    const [client, setClient] = useState<FastAuthClient<JavascriptProvider | FirebaseProvider> | null>(null);
     const [isRelayerInitialized, setIsRelayerInitialized] = useState(false);
     const [isClientInitialized, setIsClientInitialized] = useState(false);
     const [error, setError] = useState<Error | null>(null);
     const [network, setNetworkState] = useState<NetworkId>(defaultNetwork);
+    const [provider, setProviderState] = useState<ProviderType>(storedProvider);
+
+    const initializeClient = async (connection: Connection, networkId: NetworkId, providerType: ProviderType) => {
+        let authProvider: JavascriptProvider | FirebaseProvider;
+
+        if (providerType === "firebase-google" || providerType === "firebase-apple") {
+            authProvider = new FirebaseProvider({
+                apiKey: firebaseConfig.apiKey,
+                authDomain: firebaseConfig.authDomain,
+                projectId: firebaseConfig.projectId,
+                storageBucket: firebaseConfig.storageBucket,
+                messagingSenderId: firebaseConfig.messagingSenderId,
+                appId: firebaseConfig.appId,
+                redirectUri: APP_ORIGIN,
+                issuerUrl: firebaseConfig.issuerUrl,
+            });
+        } else {
+            authProvider = new JavascriptProvider({
+                domain: config.domain,
+                clientId: config.clientId,
+                redirectUri: APP_ORIGIN,
+                audience: config.audience,
+            });
+        }
 
-    const initializeClient = async (connection: Connection, networkId: NetworkId) => {
-        const provider = new JavascriptProvider({
-            domain: config.domain,
-            clientId: config.clientId,
-            redirectUri: APP_ORIGIN,
-            audience: config.audience,
-        });
         const contracts = getContractsFromNetwork(networkId);
-        const client = new FastAuthClient(provider, connection, {
+        const client = new FastAuthClient(authProvider, connection, {
             mpcContractId: contracts.mpcContractId,
             fastAuthContractId: contracts.fastAuthContractId,
         });
         setClient(client);
         setIsClientInitialized(true);
     };
 
-    const initializeRelayer = async (networkId: NetworkId) => {
+    const initializeRelayer = async (networkId: NetworkId, providerType: ProviderType) => {
         try {
             const fastAuthRelayer = new FastAuthRelayer(networkId);
             await fastAuthRelayer.init();
             setRelayer(fastAuthRelayer);
             setIsRelayerInitialized(true);
-            await initializeClient(fastAuthRelayer.getConnection().connection, networkId);
+            await initializeClient(fastAuthRelayer.getConnection().connection, networkId, providerType);
             setError(null);
         } catch (err) {
             console.error("Failed to initialize FastAuthRelayer:", err);
@@ -93,40 +134,71 @@ export function FastAuthProvider({ children, initialNetwork }: { children: React
     };
 
     useEffect(() => {
-        // Save the initial network to localStorage if not already saved
+        // Save the initial network and provider to localStorage if not already saved
         saveNetwork(network);
-        initializeRelayer(network);
+        saveProvider(provider);
+        initializeRelayer(network, provider);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const setNetwork = async (newNetwork: NetworkId) => {
         if (newNetwork === network) return;
-        
+
         // Save to localStorage
         saveNetwork(newNetwork);
-        
+
         setNetworkState(newNetwork);
         setIsRelayerInitialized(false);
         setIsClientInitialized(false);
         setClient(null);
-        
+
         try {
             if (relayer) {
                 await relayer.switchNetwork(newNetwork);
                 setRelayer(relayer);
                 setIsRelayerInitialized(true);
-                await initializeClient(relayer.getConnection().connection, newNetwork);
+                await initializeClient(relayer.getConnection().connection, newNetwork, provider);
             } else {
-                await initializeRelayer(newNetwork);
+                await initializeRelayer(newNetwork, provider);
             }
         } catch (err) {
             console.error("Failed to switch network:", err);
             setError(err instanceof Error ? err : new Error(String(err)));
         }
     };
 
+    const setProvider = async (newProvider: ProviderType) => {
+        if (newProvider === provider) return;
+
+        // Save to localStorage
+        saveProvider(newProvider);
+
+        setProviderState(newProvider);
+        setIsClientInitialized(false);
+        setClient(null);
+
+        try {
+            if (relayer) {
+                await initializeClient(relayer.getConnection().connection, network, newProvider);
+            }
+        } catch (err) {
+            console.error("Failed to switch provider:", err);
+            setError(err instanceof Error ? err : new Error(String(err)));
+        }
+    };
+
     return (
-        <FastAuthContext.Provider value={{ relayer, client, isRelayerInitialized, isClientInitialized, error, network, setNetwork }}>
+        <FastAuthContext.Provider value={{
+            relayer,
+            client,
+            isRelayerInitialized,
+            isClientInitialized,
+            error,
+            network,
+            setNetwork,
+            provider,
+            setProvider,
+        }}>
             {children}
         </FastAuthContext.Provider>
     );

apps/account-verifier/src/hooks/use-fast-auth-workflow.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { useFastAuth } from "./use-fast-auth-relayer";
-import { FastAuthSigner, FastAuthSignature, SignatureRequest } from "@fast-auth/browser-sdk";
+import { FastAuthSigner, FastAuthSignature, SignatureRequest, FirebaseProvider } from "@fast-auth/browser-sdk";
 import { JavascriptProvider } from "@fast-auth/javascript-provider";
 import { PublicKey } from "near-api-js/lib/utils";
 import { Transaction } from "near-api-js/lib/transaction";
@@ -9,7 +9,7 @@ import { parseNearAmount } from "near-api-js/lib/utils/format";
 export interface WorkflowState {
     loggedIn: boolean;
     publicKey: string | null;
-    signer: FastAuthSigner<JavascriptProvider> | null;
+    signer: FastAuthSigner<JavascriptProvider | FirebaseProvider> | null;
     signatureRequest: SignatureRequest | null;
     result: any;
     accountCreated: boolean;
@@ -28,14 +28,15 @@ export interface WorkflowActions {
     requestTransactionSignature: (accountId: string, receiverId: string, amount: string) => Promise<void>;
     handleSignTransaction: () => Promise<void>;
     handleSendTransaction: () => Promise<void>;
+    fetchPublicKey: () => Promise<void>;
 }
 
 export const useFastAuthWorkflow = (): WorkflowState & WorkflowActions => {
-    const { isClientInitialized, client, relayer, network } = useFastAuth();
+    const { isClientInitialized, client, relayer, network, provider } = useFastAuth();
 
     const [loggedIn, setLoggedIn] = useState(false);
     const [publicKey, setPublicKey] = useState<string | null>(null);
-    const [signer, setSigner] = useState<FastAuthSigner<JavascriptProvider> | null>(null);
+    const [signer, setSigner] = useState<FastAuthSigner<JavascriptProvider | FirebaseProvider> | null>(null);
     const [signatureRequest, setSignatureRequest] = useState<SignatureRequest | null>(null);
     const [result, setResult] = useState(null);
     const [accountCreated, setAccountCreated] = useState(false);
@@ -61,7 +62,7 @@ export const useFastAuthWorkflow = (): WorkflowState & WorkflowActions => {
                 const publicKeyValue = await signerInstance.getPublicKey();
                 setPublicKey(publicKeyValue.toString());
                 setLoggedIn(true);
-                
+
                 signerInstance
                     ?.getSignatureRequest()
                     .then((signatureRequest) => {
@@ -80,7 +81,7 @@ export const useFastAuthWorkflow = (): WorkflowState & WorkflowActions => {
             setSigner(null);
             console.error(error);
         }
-    }, [isClientInitialized, client, relayer, network]);
+    }, [isClientInitialized, client, relayer, network, provider]);
 
     useEffect(() => {
         fetchPublicKey();
@@ -171,5 +172,6 @@ export const useFastAuthWorkflow = (): WorkflowState & WorkflowActions => {
         requestTransactionSignature,
         handleSignTransaction,
         handleSendTransaction,
+        fetchPublicKey,
     };
 };

apps/account-verifier/src/pages/Home.tsx

@@ -5,11 +5,12 @@ import { useFastAuthWorkflow } from "../hooks/use-fast-auth-workflow";
 import { useAccessKeys } from "../hooks/use-access-keys";
 
 const Home: React.FC = () => {
-    const { error: fastAuthError, client, isClientInitialized, network, setNetwork } = useFastAuth();
-    const { loggedIn, publicKey } = useFastAuthWorkflow();
+    const { error: fastAuthError, client, isClientInitialized, network, setNetwork, provider, setProvider } = useFastAuth();
+    const { loggedIn, publicKey, fetchPublicKey } = useFastAuthWorkflow();
     const { accessKeys, accountIds, loading, error: accessKeysError, hasFetched, fetchAccessKeys } = useAccessKeys();
     const [isLoggingIn, setIsLoggingIn] = useState(false);
     const [isSwitchingNetwork, setIsSwitchingNetwork] = useState(false);
+    const [isSwitchingProvider, setIsSwitchingProvider] = useState(false);
 
     const handleFetchAccessKeys = async () => {
         if (publicKey) {
@@ -23,7 +24,8 @@ const Home: React.FC = () => {
         }
         setIsLoggingIn(true);
         try {
-            await client.login();
+            await client.login(provider === "firebase-google" ? "google" : "apple");
+            await fetchPublicKey();
         } catch (error) {
             console.error("Login error:", error);
         } finally {
@@ -45,6 +47,20 @@ const Home: React.FC = () => {
         }
     };
 
+    const handleProviderChange = async (newProvider: "auth0" | "firebase-google" | "firebase-apple") => {
+        if (newProvider === provider || isSwitchingProvider) {
+            return;
+        }
+        setIsSwitchingProvider(true);
+        try {
+            await setProvider(newProvider);
+        } catch (error) {
+            console.error("Provider switch error:", error);
+        } finally {
+            setIsSwitchingProvider(false);
+        }
+    };
+
     return (
         <div className="home-page">
             <h1>FastAuth Access Keys Viewer</h1>
@@ -53,10 +69,42 @@ const Home: React.FC = () => {
             </p>
 
             <section>
-                <h2>Network</h2>
+                <h2>Configuration</h2>
+                <div style={{ marginBottom: "1rem" }}>
+                    <label className="info-label">
+                        Auth Provider:
+                        <select
+                            value={provider}
+                            onChange={(e) => handleProviderChange(e.target.value as "auth0" | "firebase-google" | "firebase-apple")}
+                            disabled={isSwitchingProvider}
+                            style={{
+                                marginTop: "0.5rem",
+                                padding: "0.5rem",
+                                backgroundColor: "#181a20",
+                                color: "#e0e0e0",
+                                border: "1px solid #222",
+                                borderRadius: "4px",
+                                fontSize: "1rem",
+                                cursor: isSwitchingProvider ? "not-allowed" : "pointer",
+                                opacity: isSwitchingProvider ? 0.6 : 1,
+                            }}
+                        >
+                            <option value="auth0">Auth0</option>
+                            <option value="firebase-google">
+                                Firebase (Google)
+                            </option>
+                            <option value="firebase-apple">
+                                Firebase (Apple)
+                            </option>
+                        </select>
+                    </label>
+                    {isSwitchingProvider && (
+                        <div style={{ color: "#4ade80", marginTop: "0.5rem" }}>Switching provider...</div>
+                    )}
+                </div>
                 <div style={{ marginBottom: "1rem" }}>
                     <label className="info-label">
-                        Select Network:
+                        Network:
                         <select
                             value={network}
                             onChange={(e) => handleNetworkChange(e.target.value as "testnet" | "mainnet")}
@@ -118,7 +166,7 @@ const Home: React.FC = () => {
                                 fontWeight: "500",
                             }}
                         >
-                            {isLoggingIn ? "Logging in..." : isClientInitialized ? "Log in with FastAuth" : "Initializing..."}
+                            {isLoggingIn ? "Logging in..." : isClientInitialized ? `Log in with ${provider === "auth0" ? "Auth0" : "Firebase"}` : "Initializing..."}
                         </button>
                     </div>
                 )}