@rebasepro/client-firebase 0.0.1-canary.09e5ec5

package/src/hooks/useFirebaseAuthController.ts

@@ -0,0 +1,334 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { deepEqual as equal } from "fast-equals"
+
+import {
+    ApplicationVerifier,
+    Auth,
+    ConfirmationResult,
+    createUserWithEmailAndPassword as createUserWithEmailAndPasswordFirebase,
+    FacebookAuthProvider,
+    fetchSignInMethodsForEmail as fetchSignInMethodsForEmailFirebase,
+    getAuth,
+    GithubAuthProvider,
+    GoogleAuthProvider,
+    OAuthProvider,
+    onAuthStateChanged,
+    sendPasswordResetEmail as sendPasswordResetEmailFirebase,
+    signInAnonymously,
+    signInWithEmailAndPassword,
+    signInWithPhoneNumber,
+    signInWithPopup,
+    signOut,
+    TwitterAuthProvider,
+    User as FirebaseUser
+} from "@firebase/auth";
+import { FirebaseApp } from "@firebase/app";
+import { FirebaseAuthController, FirebaseSignInOption, FirebaseSignInProvider, FirebaseUserWrapper } from "../types";
+import { Role, User } from "@rebasepro/types";
+
+export interface FirebaseAuthControllerProps {
+    loading?: boolean;
+    firebaseApp?: FirebaseApp;
+    signInOptions?: Array<FirebaseSignInProvider | FirebaseSignInOption>;
+    onSignOut?: () => void;
+    defineRolesFor?: (user: User) => Promise<Role[] | undefined> | Role[] | undefined;
+}
+
+/**
+ * Use this hook to build an {@link AuthController} based on Firebase Auth
+ * @group Firebase
+ */
+export const useFirebaseAuthController = <USER extends FirebaseUserWrapper = any, ExtraData = any>({
+    loading,
+    firebaseApp,
+    signInOptions,
+    onSignOut: onSignOutProp,
+    defineRolesFor
+}: FirebaseAuthControllerProps): FirebaseAuthController<USER, ExtraData> => {
+
+    const [loggedUser, setLoggedUser] = useState<FirebaseUser | null | undefined>(undefined); // logged user, anonymous or logged out
+    const [authError, setAuthError] = useState<any>();
+    const [authProviderError, setAuthProviderError] = useState<any>();
+    const [initialLoading, setInitialLoading] = useState<boolean>(true);
+    const [authLoading, setAuthLoading] = useState(true);
+    const [loginSkipped, setLoginSkipped] = useState<boolean>(false);
+    const [confirmationResult, setConfirmationResult] = useState<undefined | ConfirmationResult>();
+    const [userRoles, _setUserRoles] = useState<Role[] | undefined>();
+    const [extra, setExtra] = useState<any>();
+
+    const setUserRoles = useCallback((roles: Role[] | undefined) => {
+        const currentRoleIds = userRoles?.map(r => r.id);
+        const newRoleIds = roles?.map(r => r.id);
+        if (!equal(currentRoleIds, newRoleIds)) {
+            _setUserRoles(roles);
+        }
+    }, [userRoles]);
+
+    const authRef = useRef<Auth | null>(null);
+
+    const updateUser = useCallback(async (user: FirebaseUser | null, initialize?: boolean) => {
+        if (loading) return;
+        if (defineRolesFor && user) {
+            setUserRoles(await defineRolesFor(user));
+        }
+        setLoggedUser(user);
+        setAuthLoading(false);
+        if (initialize) {
+            setInitialLoading(false);
+        }
+    }, [loading]);
+
+    const updateRoles = useCallback(async (user: User | null) => {
+        if (defineRolesFor && user) {
+            const userRoles = await defineRolesFor(user);
+            if (!equal(userRoles, userRoles)) {
+                setUserRoles(userRoles);
+            }
+        }
+    }, [defineRolesFor, userRoles]);
+
+    useEffect(() => {
+        if (updateRoles && loggedUser) {
+            updateRoles(loggedUser);
+        }
+    }, [updateRoles, loggedUser]);
+
+    useEffect(() => {
+        if (!firebaseApp) return;
+        try {
+            const auth = getAuth(firebaseApp);
+            authRef.current = auth;
+            setAuthError(undefined);
+            updateUser(auth.currentUser, false)
+            return onAuthStateChanged(
+                auth,
+                async (user) => {
+                    console.debug("User state changed", user);
+                    await updateUser(user, true);
+                },
+                error => setAuthProviderError(error)
+            );
+        } catch (e) {
+            setAuthError(e);
+            setInitialLoading(false);
+            return () => {
+            };
+        }
+    }, [firebaseApp, updateUser]);
+
+    useEffect(() => {
+        if (!loading && authRef.current) {
+            updateUser(authRef.current.currentUser, false);
+        }
+    }, [loading, updateUser]);
+
+    const getProviderOptions = useCallback((providerId: FirebaseSignInProvider): FirebaseSignInOption | undefined => {
+        return signInOptions?.find((option) => {
+            if (option === null) throw Error("useFirebaseAuthController");
+            if (typeof option === "object" && option.provider === providerId)
+                return option as FirebaseSignInOption;
+            return undefined;
+        }) as FirebaseSignInOption | undefined;
+    }, []);
+
+    const googleLogin = useCallback(() => {
+        const provider = new GoogleAuthProvider();
+        const options = getProviderOptions("google.com");
+        if (options?.scopes)
+            options.scopes.forEach((scope) => provider.addScope(scope));
+        if (options?.customParameters) {
+            provider.setCustomParameters(options.customParameters);
+        } else {
+            provider.setCustomParameters({
+                prompt: "select_account"
+            });
+        }
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        signInWithPopup(auth, provider).catch(setAuthProviderError);
+    }, [getProviderOptions]);
+
+    const getAuthToken = useCallback(async (): Promise<string> => {
+        if (!loggedUser)
+            throw Error("No client user is logged in");
+        if (!loggedUser.getIdToken) {
+            throw Error("No getIdToken method available");
+        }
+        return loggedUser.getIdToken?.();
+    }, [loggedUser]);
+
+    const emailPasswordLogin = useCallback((email: string, password: string) => {
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        setAuthLoading(true);
+        signInWithEmailAndPassword(auth, email, password)
+            .catch(setAuthProviderError)
+            .then(() => setAuthLoading(false));
+    }, []);
+
+    const createUserWithEmailAndPassword = useCallback((email: string, password: string) => {
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        setAuthLoading(true);
+        createUserWithEmailAndPasswordFirebase(auth, email, password)
+            .catch(setAuthProviderError)
+            .then(() => setAuthLoading(false));
+    }, []);
+
+    const sendPasswordResetEmail = useCallback((email: string) => {
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        return sendPasswordResetEmailFirebase(auth, email)
+    }, []);
+
+    const fetchSignInMethodsForEmail = useCallback((email: string): Promise<string[]> => {
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        setAuthLoading(true);
+        return fetchSignInMethodsForEmailFirebase(auth, email)
+            .then((res) => {
+                setAuthLoading(false);
+                return res;
+            });
+    }, []);
+
+    const onSignOut = useCallback(async () => {
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        await signOut(auth)
+            .then(_ => {
+                setLoggedUser(null);
+                setUserRoles(undefined);
+                setAuthProviderError(null);
+                onSignOutProp?.();
+            });
+        setLoginSkipped(false);
+    }, [onSignOutProp]);
+
+    const doOauthLogin = useCallback((auth: Auth, provider: OAuthProvider | FacebookAuthProvider | GithubAuthProvider | TwitterAuthProvider) => {
+        setAuthLoading(true);
+        signInWithPopup(auth, provider)
+            .catch(setAuthProviderError).then(() => setAuthLoading(false));
+    }, []);
+
+    const anonymousLogin = useCallback(() => {
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        setAuthLoading(true);
+        signInAnonymously(auth)
+            .catch(setAuthProviderError)
+            .then(() => setAuthLoading(false));
+    }, []);
+
+    const phoneLogin = useCallback((phone: string, applicationVerifier: ApplicationVerifier) => {
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        setAuthLoading(true);
+        return signInWithPhoneNumber(auth, phone, applicationVerifier)
+            .catch(setAuthProviderError)
+            .then((res) => {
+                setAuthLoading(false);
+                setConfirmationResult(res ?? undefined);
+            });
+    }, []);
+
+    const appleLogin = useCallback(() => {
+        const provider = new OAuthProvider("apple.com");
+        const options = getProviderOptions("apple.com");
+        if (options?.scopes)
+            options.scopes.forEach((scope) => provider.addScope(scope));
+        if (options?.customParameters)
+            provider.setCustomParameters(options.customParameters);
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        doOauthLogin(auth, provider);
+    }, [doOauthLogin, getProviderOptions]);
+
+    const facebookLogin = useCallback(() => {
+        const provider = new FacebookAuthProvider();
+        const options = getProviderOptions("facebook.com");
+        if (options?.scopes)
+            options.scopes.forEach((scope) => provider.addScope(scope));
+        if (options?.customParameters)
+            provider.setCustomParameters(options.customParameters);
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        doOauthLogin(auth, provider);
+    }, [doOauthLogin, getProviderOptions]);
+
+    const githubLogin = useCallback(() => {
+        const provider = new GithubAuthProvider();
+        const options = getProviderOptions("github.com");
+        if (options?.scopes)
+            options.scopes.forEach((scope) => provider.addScope(scope));
+        if (options?.customParameters)
+            provider.setCustomParameters(options.customParameters);
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        doOauthLogin(auth, provider);
+    }, [doOauthLogin, getProviderOptions]);
+
+    const microsoftLogin = useCallback(() => {
+        const provider = new OAuthProvider("microsoft.com");
+        const options = getProviderOptions("microsoft.com");
+        if (options?.scopes)
+            options.scopes.forEach((scope) => provider.addScope(scope));
+        if (options?.customParameters)
+            provider.setCustomParameters(options.customParameters);
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        doOauthLogin(auth, provider);
+    }, [doOauthLogin, getProviderOptions]);
+
+    const twitterLogin = useCallback(() => {
+        const provider = new TwitterAuthProvider();
+        const options = getProviderOptions("twitter.com");
+        if (options?.customParameters)
+            provider.setCustomParameters(options.customParameters);
+        const auth = authRef.current;
+        if (!auth) throw Error("No auth");
+        doOauthLogin(auth, provider);
+    }, [doOauthLogin, getProviderOptions]);
+
+    const skipLogin = useCallback(() => {
+        setLoginSkipped(true);
+        setLoggedUser(null);
+        setUserRoles(undefined);
+    }, []);
+
+    const firebaseUserWrapper: FirebaseUserWrapper | null = loggedUser
+        ? {
+            ...loggedUser,
+            roles: userRoles?.map(r => r.id), // User.roles is string[], keep Role[] internally only
+            firebaseUser: loggedUser
+        }
+        : null;
+
+    return {
+        user: firebaseUserWrapper as USER,
+        setUser: updateUser,
+        setUserRoles,
+        authProviderError,
+        authLoading,
+        initialLoading: loading || initialLoading,
+        signOut: onSignOut,
+        getAuthToken,
+        googleLogin,
+        skipLogin,
+        loginSkipped,
+        emailPasswordLogin,
+        createUserWithEmailAndPassword,
+        sendPasswordResetEmail,
+        fetchSignInMethodsForEmail,
+        anonymousLogin,
+        phoneLogin,
+        appleLogin,
+        facebookLogin,
+        githubLogin,
+        microsoftLogin,
+        twitterLogin,
+        confirmationResult,
+        extra,
+        setExtra
+    };
+};

package/src/hooks/useFirebaseRealTimeDBDelegate.ts

@@ -0,0 +1,269 @@
+import { FirebaseApp } from "@firebase/app";
+import {
+    Database,
+    get,
+    getDatabase,
+    limitToFirst,
+    onValue,
+    orderByChild,
+    orderByKey,
+    push,
+    query,
+    ref,
+    remove,
+    set,
+    startAt
+} from "@firebase/database";
+import { useCallback } from "react";
+import { DataDriver, DeleteEntityProps, Entity, FetchCollectionProps, FetchEntityProps, ListenCollectionProps, ListenEntityProps, SaveEntityProps } from "@rebasepro/types";
+
+export function useFirebaseRTDBDelegate({ firebaseApp }: { firebaseApp?: FirebaseApp }): DataDriver {
+
+    const fetchCollection = useCallback(async <M extends Record<string, any>>({
+        path,
+        filter,
+        limit,
+        startAfter,
+        orderBy,
+        order,
+        searchString
+    }: FetchCollectionProps<M>): Promise<Entity<M>[]> => {
+        if (!firebaseApp) {
+            throw new Error("Firebase app not provided");
+        }
+        const database = getDatabase(firebaseApp);
+
+        let dbQuery = query(ref(database, path));
+
+        // Example to apply "limit" and "startAfter"
+        if (startAfter !== undefined) {
+            dbQuery = query(dbQuery, orderByKey(), startAt(String(startAfter)));
+        }
+        if (limit !== undefined) {
+            dbQuery = query(dbQuery, limitToFirst(limit));
+        }
+
+        const snapshot = await get(dbQuery);
+        if (snapshot.exists()) {
+            return Object.entries(snapshot.val()).map(([id, values]) => ({
+                id,
+                path: path,
+                values: delegateToCMSModel(values) as M
+            }));
+        }
+        return [];
+    }, [firebaseApp]);
+
+    const listenCollection = useCallback(<M extends Record<string, any>>({
+        path,
+        onUpdate
+        // Realtime Database does not directly support onError in onValue
+    }: ListenCollectionProps<M>): () => void => {
+        if (!firebaseApp) {
+            throw new Error("Firebase app not provided");
+        }
+        const database = getDatabase(firebaseApp);
+
+        const dbRef = ref(database, path);
+        const unsubscribe = onValue(dbRef, (snapshot) => {
+            if (snapshot.exists()) {
+                const result: Entity<M>[] = Object.entries(snapshot.val()).map(([id, values]) => ({
+                    id,
+                    path: path,
+                    values: delegateToCMSModel(values) as M
+                }));
+                onUpdate(result);
+            } else {
+                onUpdate([]);
+            }
+        });
+
+        return () => unsubscribe();
+    }, [firebaseApp]);
+
+    const fetchEntity = useCallback(async <M extends Record<string, any>>({
+        path,
+        entityId
+    }: FetchEntityProps<M>): Promise<Entity<M> | undefined> => {
+        if (!firebaseApp) {
+            throw new Error("Firebase app not provided");
+        }
+        const database = getDatabase(firebaseApp);
+
+        const snapshot = await get(ref(database, `${path}/${entityId}`));
+        if (snapshot.exists()) {
+            return {
+                id: entityId,
+                path: path,
+                values: delegateToCMSModel(snapshot.val()) as M
+            };
+        }
+        return undefined;
+    }, [firebaseApp]);
+
+    const listenEntity = useCallback(<M extends Record<string, any>>({
+        path,
+        entityId,
+        onUpdate,
+        onError
+    }: ListenEntityProps<M>): () => void => {
+        if (!firebaseApp) {
+            throw new Error("Firebase app not provided");
+        }
+        const database = getDatabase(firebaseApp);
+
+        const dbRef = ref(database, `${path}/${entityId}`);
+        const unsubscribe = onValue(dbRef, (snapshot) => {
+            if (snapshot.exists()) {
+                onUpdate({
+                    id: entityId,
+                    path,
+                    values: delegateToCMSModel(snapshot.val()) as M
+                });
+            } else {
+                onError?.(new Error("Entity does not exist"));
+            }
+        });
+
+        return () => unsubscribe();
+    }, [firebaseApp]);
+
+    const saveEntity = useCallback(async <M extends Record<string, any>>({
+        path,
+        entityId,
+        values
+    }: SaveEntityProps<M>): Promise<Entity<M>> => {
+        if (!firebaseApp) {
+            throw new Error("Firebase app not provided");
+        }
+        const database = getDatabase(firebaseApp);
+
+        // If entityId is not provided, a new entity will be created
+        const finalId = entityId ?? push(ref(database, path)).key;
+        if (!finalId) {
+            throw new Error("Could not generate a new id");
+        }
+
+        // Transform the data to RTDB format before saving
+        const transformedValues = cmsToRTDBModel(values, database);
+        await set(ref(database, `${path}/${finalId}`), transformedValues);
+
+        return {
+            id: finalId,
+            path: path,
+            values: values as M
+        };
+    }, [firebaseApp]);
+
+    const deleteEntity = useCallback(async <M extends Record<string, any>>({
+        entity
+    }: DeleteEntityProps<M>): Promise<void> => {
+        if (!firebaseApp) {
+            throw new Error("Firebase app not provided");
+        }
+        const database = getDatabase(firebaseApp);
+
+        await remove(ref(database, `${entity.path}/${entity.id}`));
+    }, [firebaseApp]);
+
+    // Implementing additional methods required by DataDriver
+    const checkUniqueField = useCallback(async (slug: string, name: string, value: any, entityId?: string | number): Promise<boolean> => {
+        if (!firebaseApp) {
+            throw new Error("Firebase app not provided");
+        }
+        const database = getDatabase(firebaseApp);
+
+        // Simplified example; the Realtime Database does not support querying with "not equal" conditions
+        const dbRef = query(ref(database, slug), orderByChild(name), startAt(value), limitToFirst(1));
+        const snapshot = await get(dbRef);
+
+        if (!snapshot.exists()) {
+            return true;
+        }
+
+        // Check if the found entity is the same as the one being checked
+        const [key, entityValue] = Object.entries(snapshot.val())[0];
+        if (entityValue && typeof entityValue === "object" && (entityValue as Record<string, unknown>)[name] === value && key === entityId) {
+            return true;
+        }
+
+        return false;
+    }, [firebaseApp]);
+
+    const isFilterCombinationValid = useCallback(({
+        path,
+        filter,
+        sortBy
+    }: any): boolean => {
+        return false;
+    }, []);
+
+    return {
+        key: "firebase_rtdb",
+        fetchCollection,
+        listenCollection,
+        fetchEntity,
+        listenEntity,
+        saveEntity,
+        deleteEntity,
+        checkUniqueField,
+        isFilterCombinationValid,
+        currentTime: () => new Date()
+    };
+}
+
+
+/**
+ * Transform data from RTDB format back to CMS format
+ * This is used internally when fetching/listening to data
+ */
+function delegateToCMSModel(data: any): any {
+    if (data === null || data === undefined) return null;
+
+    if (Array.isArray(data)) {
+        return data.map(delegateToCMSModel).filter(v => v !== undefined);
+    }
+
+    if (typeof data === "object") {
+        const result: Record<string, any> = {};
+        for (const key of Object.keys(data)) {
+            const childValue = delegateToCMSModel(data[key]);
+            if (childValue !== undefined)
+                result[key] = childValue;
+        }
+        return result;
+    }
+
+    return data;
+}
+
+/**
+ * Transform data from CMS format to RTDB format
+ * This is used internally when saving data
+ */
+function cmsToRTDBModel(data: any, database: Database): any {
+    if (data === undefined) {
+        return null;
+    } else if (data === null) {
+        return null;
+    } else if (Array.isArray(data)) {
+        return data.filter(v => v !== undefined).map(v => cmsToRTDBModel(v, database));
+    } else if (data.isEntityReference && data.isEntityReference()) {
+        return ref(database, `${data.slug}/${data.id}`);
+    } else if (data instanceof Date) {
+        // For dates, convert to ISO string or timestamp.
+        return data.toISOString();
+    } else if (data && typeof data === "object") {
+        return Object.entries(data)
+            .map(([key, v]) => {
+                const rtdbModel = cmsToRTDBModel(v, database);
+                if (rtdbModel !== undefined)
+                    return { [key]: rtdbModel };
+                else
+                    return {};
+            })
+            .reduce((a, b) => ({ ...a,
+...b }), {});
+    }
+    return data;
+}