react-query-firebase 2.0.0-rc6 → 2.0.0-rc8

package/package.json

@@ -13,19 +13,22 @@
         "@react-native-firebase/installations": "^21.0.0",
         "@react-native-firebase/remote-config": "^21.0.0",
         "@tanstack/react-query": "^5.0.0",
+        "firebase": "^11.0.0",
         "react": "^18.0.0 || ^19.0.0"
     },
     "publishConfig": {
         "access": "public"
     },
-    "description": "This module offers react hooks to work with Firebase",
+    "description": "This module offers react hooks to work with Firebase on react-native and web platforms",
     "devDependencies": {
         "@laverve/eslint-utils": "^5.1.1",
-        "@react-native-firebase/analytics": "^21.12.2",
-        "@react-native-firebase/app": "^21.12.2",
-        "@react-native-firebase/auth": "^21.12.2",
-        "@react-native-firebase/firestore": "^21.12.2",
-        "@react-native-firebase/remote-config": "^21.12.2",
+        "@react-native-firebase/analytics": "^21.0.0",
+        "@react-native-firebase/app": "^21.0.0",
+        "@react-native-firebase/auth": "^21.0.0",
+        "@react-native-firebase/crashlytics": "^21.0.0",
+        "@react-native-firebase/firestore": "^21.0.0",
+        "@react-native-firebase/installations": "^21.0.0",
+        "@react-native-firebase/remote-config": "^21.0.0",
         "@types/react": "^19.0.2",
         "husky": "^9.1.1",
         "lint-staged": "^15.1.0",
@@ -35,25 +38,25 @@
         "typedoc-plugin-markdown": "^4.4.1",
         "typedoc-vitepress-theme": "^1.1.2",
         "typescript": "^5.2.2",
-        "vitepress": "^1.5.0"
+        "vitepress": "^1.5.0",
+        "firebase": "^11.0.1"
     },
     "homepage": "https://github.com/vpishuk/react-query-firebase",
     "keywords": [
         "firebase",
         "react",
-        "hooks"
+        "hooks",
+        "react-native"
     ],
     "license": "MIT",
-    "main": "./dist/src/index.js",
-    "types": "./dist/src/index.d.ts",
     "name": "react-query-firebase",
     "repository": {
         "type": "git",
         "url": "https://github.com/vpishuk/react-query-firebase.git"
     },
     "files": [
-        "./dist/src/",
-        "./src/",
+        "./web/",
+        "./react-native/",
         "package.json",
         "package-lock.json",
         "README.md",
@@ -70,5 +73,5 @@
         "docs:build": "vitepress build docs",
         "docs:preview": "vitepress preview docs"
     },
-    "version": "2.0.0-rc6"
+    "version": "2.0.0-rc8"
 }

package/web/analytics/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./useLogEvent";
+export * from "./useAnalytics";
+export * from "./useSetAnalyticsCollectionEnabled";

package/web/analytics/index.js

@@ -0,0 +1,3 @@
+export * from "./useLogEvent";
+export * from "./useAnalytics";
+export * from "./useSetAnalyticsCollectionEnabled";

package/web/analytics/index.ts

@@ -0,0 +1,3 @@
+export * from "./useLogEvent";
+export * from "./useAnalytics";
+export * from "./useSetAnalyticsCollectionEnabled";

package/web/analytics/useAnalytics.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook to access Firebase analytics from the Firebase context.
+ * @returns {any} The analytics object from the Firebase context.
+ */
+export declare const useAnalytics: () => import("@firebase/analytics").Analytics;

package/web/analytics/useAnalytics.js

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { FirebaseContext } from "../context/FirebaseContext";
+/**
+ * Hook to access Firebase analytics from the Firebase context.
+ * @returns {any} The analytics object from the Firebase context.
+ */
+export const useAnalytics = () => {
+    const { analytics } = useContext(FirebaseContext);
+    return analytics;
+};

package/web/analytics/useAnalytics.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+
+import { FirebaseContext } from "../context/FirebaseContext";
+
+/**
+ * Hook to access Firebase analytics from the Firebase context.
+ * @returns {any} The analytics object from the Firebase context.
+ */
+export const useAnalytics = () => {
+    const { analytics } = useContext(FirebaseContext);
+    return analytics;
+};

package/web/analytics/useLogEvent.d.ts

@@ -0,0 +1,17 @@
+type UseLogEventOptions = {
+    eventName: string;
+    eventParams?: {
+        [key: string]: unknown;
+    };
+};
+/**
+ * Custom hook to create a log event function that logs an analytics event with specified parameters.
+ * @param {Object}  options - The options for the log event.
+ * @param {string}  options.eventName - The name of the event to be logged.
+ * @param {Object}  options.eventParams - The parameters to be sent along with the event.
+ * @returns {Object} An object containing a `logEvent` function that, when called, logs the event.
+ */
+export declare const useLogEvent: ({ eventName, eventParams }: UseLogEventOptions) => {
+    logEvent: () => void;
+};
+export {};

package/web/analytics/useLogEvent.js

@@ -0,0 +1,21 @@
+import { logEvent } from "firebase/analytics";
+import { useAnalytics } from "./useAnalytics";
+import { useCallback, useMemo } from "react";
+/**
+ * Custom hook to create a log event function that logs an analytics event with specified parameters.
+ * @param {Object}  options - The options for the log event.
+ * @param {string}  options.eventName - The name of the event to be logged.
+ * @param {Object}  options.eventParams - The parameters to be sent along with the event.
+ * @returns {Object} An object containing a `logEvent` function that, when called, logs the event.
+ */
+export const useLogEvent = ({ eventName, eventParams }) => {
+    const analytics = useAnalytics();
+    const logEventCallback = useCallback(() => {
+        if (analytics) {
+            logEvent(analytics, eventName, eventParams);
+        }
+    }, [eventName, eventParams]);
+    return useMemo(() => ({
+        logEvent: logEventCallback
+    }), [logEventCallback]);
+};

package/web/analytics/useLogEvent.ts

@@ -0,0 +1,34 @@
+import { logEvent } from "firebase/analytics";
+import { useAnalytics } from "./useAnalytics";
+import { useCallback, useMemo } from "react";
+
+type UseLogEventOptions = {
+    eventName: string;
+    eventParams?: {
+        [key: string]: unknown;
+    };
+};
+
+/**
+ * Custom hook to create a log event function that logs an analytics event with specified parameters.
+ * @param {Object}  options - The options for the log event.
+ * @param {string}  options.eventName - The name of the event to be logged.
+ * @param {Object}  options.eventParams - The parameters to be sent along with the event.
+ * @returns {Object} An object containing a `logEvent` function that, when called, logs the event.
+ */
+export const useLogEvent = ({ eventName, eventParams }: UseLogEventOptions) => {
+    const analytics = useAnalytics();
+
+    const logEventCallback = useCallback(() => {
+        if (analytics) {
+            logEvent(analytics, eventName, eventParams);
+        }
+    }, [eventName, eventParams]);
+
+    return useMemo(
+        () => ({
+            logEvent: logEventCallback
+        }),
+        [logEventCallback]
+    );
+};

package/web/analytics/useSetAnalyticsCollectionEnabled.d.ts

@@ -0,0 +1,10 @@
+type UseSetAnalyticsCollectionEnabledOptions = {
+    enabled?: boolean;
+};
+/**
+ * Custom hook to enable or disable analytics collection
+ * @param {Object}  options - The options for hook.
+ * @param {string}  options.enabled - Flag that identifies if analytics collection is enabled.
+ */
+export declare const useSetAnalyticsCollectionEnabled: ({ enabled }: UseSetAnalyticsCollectionEnabledOptions) => void;
+export {};

package/web/analytics/useSetAnalyticsCollectionEnabled.js

@@ -0,0 +1,16 @@
+import { setAnalyticsCollectionEnabled } from "firebase/analytics";
+import { useAnalytics } from "./useAnalytics";
+import { useEffect } from "react";
+/**
+ * Custom hook to enable or disable analytics collection
+ * @param {Object}  options - The options for hook.
+ * @param {string}  options.enabled - Flag that identifies if analytics collection is enabled.
+ */
+export const useSetAnalyticsCollectionEnabled = ({ enabled = false }) => {
+    const analytics = useAnalytics();
+    useEffect(() => {
+        if (analytics) {
+            setAnalyticsCollectionEnabled(analytics, enabled);
+        }
+    }, [analytics]);
+};

package/web/analytics/useSetAnalyticsCollectionEnabled.ts

@@ -0,0 +1,22 @@
+import { setAnalyticsCollectionEnabled } from "firebase/analytics";
+import { useAnalytics } from "./useAnalytics";
+import { useEffect } from "react";
+
+type UseSetAnalyticsCollectionEnabledOptions = {
+    enabled?: boolean;
+};
+
+/**
+ * Custom hook to enable or disable analytics collection
+ * @param {Object}  options - The options for hook.
+ * @param {string}  options.enabled - Flag that identifies if analytics collection is enabled.
+ */
+export const useSetAnalyticsCollectionEnabled = ({ enabled = false }: UseSetAnalyticsCollectionEnabledOptions) => {
+    const analytics = useAnalytics();
+
+    useEffect(() => {
+        if (analytics) {
+            setAnalyticsCollectionEnabled(analytics, enabled);
+        }
+    }, [analytics]);
+};

package/web/auth/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./mutation-keys";
+export * from "./useAuth";
+export * from "./useCreateUserWitEmailAndPasswordMutation";
+export * from "./useSendEmailVerificationMutation";
+export * from "./useSignInWitEmailAndPasswordMutation";
+export * from "./useCurrentUser";
+export * from "./useAuthStateReady";
+export * from "./useSignInWitRedirectMutation";
+export * from "./useUpdateProfileMutation";
+export * from "./useSignOutMutation";
+export * from "./useIdToken";
+export * from "./useReauthenticateWitCredentialMutation";
+export * from "./useReauthenticateWitRedirectMutation";

package/web/auth/index.js

@@ -0,0 +1,13 @@
+export * from "./mutation-keys";
+export * from "./useAuth";
+export * from "./useCreateUserWitEmailAndPasswordMutation";
+export * from "./useSendEmailVerificationMutation";
+export * from "./useSignInWitEmailAndPasswordMutation";
+export * from "./useCurrentUser";
+export * from "./useAuthStateReady";
+export * from "./useSignInWitRedirectMutation";
+export * from "./useUpdateProfileMutation";
+export * from "./useSignOutMutation";
+export * from "./useIdToken";
+export * from "./useReauthenticateWitCredentialMutation";
+export * from "./useReauthenticateWitRedirectMutation";

package/web/auth/index.ts

@@ -0,0 +1,13 @@
+export * from "./mutation-keys";
+export * from "./useAuth";
+export * from "./useCreateUserWitEmailAndPasswordMutation";
+export * from "./useSendEmailVerificationMutation";
+export * from "./useSignInWitEmailAndPasswordMutation";
+export * from "./useCurrentUser";
+export * from "./useAuthStateReady";
+export * from "./useSignInWitRedirectMutation";
+export * from "./useUpdateProfileMutation";
+export * from "./useSignOutMutation";
+export * from "./useIdToken";
+export * from "./useReauthenticateWitCredentialMutation";
+export * from "./useReauthenticateWitRedirectMutation";

package/web/auth/mutation-keys.d.ts

@@ -0,0 +1,7 @@
+export declare const CREATE_USER_WITH_EMAIL_AND_PASSWORD_MUTATION_KEY: readonly ["FIREBASE", "AUTH", "CREATE_USER_WITH_EMAIL_AND_PASSWORD_MUTATION"];
+export declare const SEND_EMAIL_VERIFICATION_MUTATION_KEY: readonly ["FIREBASE", "AUTH", "SEND_EMAIL_VERIFICATION_MUTATION"];
+export declare const SIGN_IN_WITH_EMAIL_AND_PASSWORD_MUTATION_KEY: readonly ["FIREBASE", "AUTH", "SIGN_IN_WITH_EMAIL_AND_PASSWORD_MUTATION"];
+export declare const SIGN_IN_WITH_REDIRECT_MUTATION_KEY: readonly ["FIREBASE", "AUTH", "SIGN_IN_WITH_REDIRECT_MUTATION"];
+export declare const SIGN_OUT_MUTATION_KEY: readonly ["FIREBASE", "AUTH", "SIGN_OUT"];
+export declare const REAUTHENTICATE_WITH_REDIRECT_MUTATION_KEY: readonly ["FIREBASE", "AUTH", "REAUTHENTICATE_WITH_REDIRECT"];
+export declare const REAUTHENTICATE_WITH_CREDENTIAL_MUTATION_KEY: readonly ["FIREBASE", "AUTH", "REAUTHENTICATE_WITH_CREDENTIAL"];

package/web/auth/mutation-keys.js

@@ -0,0 +1,19 @@
+export const CREATE_USER_WITH_EMAIL_AND_PASSWORD_MUTATION_KEY = [
+    "FIREBASE",
+    "AUTH",
+    "CREATE_USER_WITH_EMAIL_AND_PASSWORD_MUTATION"
+];
+export const SEND_EMAIL_VERIFICATION_MUTATION_KEY = ["FIREBASE", "AUTH", "SEND_EMAIL_VERIFICATION_MUTATION"];
+export const SIGN_IN_WITH_EMAIL_AND_PASSWORD_MUTATION_KEY = [
+    "FIREBASE",
+    "AUTH",
+    "SIGN_IN_WITH_EMAIL_AND_PASSWORD_MUTATION"
+];
+export const SIGN_IN_WITH_REDIRECT_MUTATION_KEY = ["FIREBASE", "AUTH", "SIGN_IN_WITH_REDIRECT_MUTATION"];
+export const SIGN_OUT_MUTATION_KEY = ["FIREBASE", "AUTH", "SIGN_OUT"];
+export const REAUTHENTICATE_WITH_REDIRECT_MUTATION_KEY = ["FIREBASE", "AUTH", "REAUTHENTICATE_WITH_REDIRECT"];
+export const REAUTHENTICATE_WITH_CREDENTIAL_MUTATION_KEY = [
+    "FIREBASE",
+    "AUTH",
+    "REAUTHENTICATE_WITH_CREDENTIAL"
+];

package/web/auth/mutation-keys.ts

@@ -0,0 +1,19 @@
+export const CREATE_USER_WITH_EMAIL_AND_PASSWORD_MUTATION_KEY = [
+    "FIREBASE",
+    "AUTH",
+    "CREATE_USER_WITH_EMAIL_AND_PASSWORD_MUTATION"
+] as const;
+export const SEND_EMAIL_VERIFICATION_MUTATION_KEY = ["FIREBASE", "AUTH", "SEND_EMAIL_VERIFICATION_MUTATION"] as const;
+export const SIGN_IN_WITH_EMAIL_AND_PASSWORD_MUTATION_KEY = [
+    "FIREBASE",
+    "AUTH",
+    "SIGN_IN_WITH_EMAIL_AND_PASSWORD_MUTATION"
+] as const;
+export const SIGN_IN_WITH_REDIRECT_MUTATION_KEY = ["FIREBASE", "AUTH", "SIGN_IN_WITH_REDIRECT_MUTATION"] as const;
+export const SIGN_OUT_MUTATION_KEY = ["FIREBASE", "AUTH", "SIGN_OUT"] as const;
+export const REAUTHENTICATE_WITH_REDIRECT_MUTATION_KEY = ["FIREBASE", "AUTH", "REAUTHENTICATE_WITH_REDIRECT"] as const;
+export const REAUTHENTICATE_WITH_CREDENTIAL_MUTATION_KEY = [
+    "FIREBASE",
+    "AUTH",
+    "REAUTHENTICATE_WITH_CREDENTIAL"
+] as const;

package/web/auth/useAuth.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Custom hook to retrieve the authentication object from the Firebase context.
+ * @returns {Auth} The authentication object from the Firebase context.
+ */
+export declare const useAuth: () => import("@firebase/auth").Auth;

package/web/auth/useAuth.js

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { FirebaseContext } from "../context/FirebaseContext";
+/**
+ * Custom hook to retrieve the authentication object from the Firebase context.
+ * @returns {Auth} The authentication object from the Firebase context.
+ */
+export const useAuth = () => {
+    const { auth } = useContext(FirebaseContext);
+    return auth;
+};

package/web/auth/useAuth.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+
+import { FirebaseContext } from "../context/FirebaseContext";
+
+/**
+ * Custom hook to retrieve the authentication object from the Firebase context.
+ * @returns {Auth} The authentication object from the Firebase context.
+ */
+export const useAuth = () => {
+    const { auth } = useContext(FirebaseContext);
+    return auth;
+};

package/web/auth/useAuthStateReady.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A custom hook that determines if the Firebase authentication state is ready.
+ * It uses Firebase authentication to check if the auth state is ready and updates the state accordingly.
+ * @returns {boolean} Indicates whether the authentication state is ready.
+ */
+export declare const useAuthStateReady: () => boolean;

package/web/auth/useAuthStateReady.js

@@ -0,0 +1,19 @@
+import { useAuth } from "./useAuth";
+import { useCallback, useEffect, useState } from "react";
+/**
+ * A custom hook that determines if the Firebase authentication state is ready.
+ * It uses Firebase authentication to check if the auth state is ready and updates the state accordingly.
+ * @returns {boolean} Indicates whether the authentication state is ready.
+ */
+export const useAuthStateReady = () => {
+    const firebaseAuth = useAuth();
+    const [isAuthStateReady, setIsAuthStateReady] = useState(false);
+    const callback = useCallback(async () => {
+        await firebaseAuth.authStateReady();
+        setIsAuthStateReady(true);
+    }, [isAuthStateReady]);
+    useEffect(() => {
+        callback();
+    }, [callback]);
+    return isAuthStateReady;
+};

package/web/auth/useAuthStateReady.ts

@@ -0,0 +1,24 @@
+import { useAuth } from "./useAuth";
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * A custom hook that determines if the Firebase authentication state is ready.
+ * It uses Firebase authentication to check if the auth state is ready and updates the state accordingly.
+ * @returns {boolean} Indicates whether the authentication state is ready.
+ */
+export const useAuthStateReady = () => {
+    const firebaseAuth = useAuth();
+
+    const [isAuthStateReady, setIsAuthStateReady] = useState(false);
+
+    const callback = useCallback(async () => {
+        await firebaseAuth.authStateReady();
+        setIsAuthStateReady(true);
+    }, [isAuthStateReady]);
+
+    useEffect(() => {
+        callback();
+    }, [callback]);
+
+    return isAuthStateReady;
+};

package/web/auth/useCreateUserWitEmailAndPasswordMutation.d.ts

@@ -0,0 +1,15 @@
+import { UseMutationOptions } from "@tanstack/react-query";
+import { UserCredential } from "firebase/auth";
+import { FirebaseError } from "firebase/app";
+export type UseCreateUserWitEmailAndPasswordMutationVariables = {
+    email: string;
+    password: string;
+};
+/**
+ * Custom hook to initiate a user creation process using email and password with Firebase authentication.
+ * This hook utilizes the `useMutation` functionality to support creating new user credentials asynchronously.
+ *
+ * @param {Omit<UseMutationOptions<UserCredential, FirebaseError, UseCreateUserWitEmailAndPasswordMutationVariables, TContext>, "mutationKey" | "mutationFn">} options - Optional settings to customize the mutation behavior, excluding `mutationKey` and `mutationFn`.
+ * @returns {UseMutationResult<UserCredential, FirebaseError, UseCreateUserWitEmailAndPasswordMutationVariables, TContext>} The result of the mutation which includes status, user credentials, and error information if any.
+ */
+export declare const useCreateUserWitEmailAndPasswordMutation: <TContext = unknown>(options?: Omit<UseMutationOptions<UserCredential, FirebaseError, UseCreateUserWitEmailAndPasswordMutationVariables, TContext>, "mutationKey" | "mutationFn">) => import("@tanstack/react-query").UseMutationResult<UserCredential, FirebaseError, UseCreateUserWitEmailAndPasswordMutationVariables, TContext>;

package/web/auth/useCreateUserWitEmailAndPasswordMutation.js

@@ -0,0 +1,19 @@
+import { useMutation } from "@tanstack/react-query";
+import { createUserWithEmailAndPassword } from "firebase/auth";
+import { useAuth } from "./useAuth";
+import { CREATE_USER_WITH_EMAIL_AND_PASSWORD_MUTATION_KEY } from "./mutation-keys";
+/**
+ * Custom hook to initiate a user creation process using email and password with Firebase authentication.
+ * This hook utilizes the `useMutation` functionality to support creating new user credentials asynchronously.
+ *
+ * @param {Omit<UseMutationOptions<UserCredential, FirebaseError, UseCreateUserWitEmailAndPasswordMutationVariables, TContext>, "mutationKey" | "mutationFn">} options - Optional settings to customize the mutation behavior, excluding `mutationKey` and `mutationFn`.
+ * @returns {UseMutationResult<UserCredential, FirebaseError, UseCreateUserWitEmailAndPasswordMutationVariables, TContext>} The result of the mutation which includes status, user credentials, and error information if any.
+ */
+export const useCreateUserWitEmailAndPasswordMutation = (options = {}) => {
+    const firebaseAuth = useAuth();
+    return useMutation({
+        ...options,
+        mutationFn: async ({ email, password }) => await createUserWithEmailAndPassword(firebaseAuth, email, password),
+        mutationKey: CREATE_USER_WITH_EMAIL_AND_PASSWORD_MUTATION_KEY
+    });
+};

package/web/auth/useCreateUserWitEmailAndPasswordMutation.ts

@@ -0,0 +1,33 @@
+import { useMutation, UseMutationOptions } from "@tanstack/react-query";
+import { createUserWithEmailAndPassword, UserCredential } from "firebase/auth";
+import { useAuth } from "./useAuth";
+import { FirebaseError } from "firebase/app";
+import { CREATE_USER_WITH_EMAIL_AND_PASSWORD_MUTATION_KEY } from "./mutation-keys";
+
+export type UseCreateUserWitEmailAndPasswordMutationVariables = {
+    email: string;
+    password: string;
+};
+
+/**
+ * Custom hook to initiate a user creation process using email and password with Firebase authentication.
+ * This hook utilizes the `useMutation` functionality to support creating new user credentials asynchronously.
+ *
+ * @param {Omit<UseMutationOptions<UserCredential, FirebaseError, UseCreateUserWitEmailAndPasswordMutationVariables, TContext>, "mutationKey" | "mutationFn">} options - Optional settings to customize the mutation behavior, excluding `mutationKey` and `mutationFn`.
+ * @returns {UseMutationResult<UserCredential, FirebaseError, UseCreateUserWitEmailAndPasswordMutationVariables, TContext>} The result of the mutation which includes status, user credentials, and error information if any.
+ */
+export const useCreateUserWitEmailAndPasswordMutation = <TContext = unknown>(
+    options: Omit<
+        UseMutationOptions<UserCredential, FirebaseError, UseCreateUserWitEmailAndPasswordMutationVariables, TContext>,
+        "mutationKey" | "mutationFn"
+    > = {}
+) => {
+    const firebaseAuth = useAuth();
+
+    return useMutation({
+        ...options,
+        mutationFn: async ({ email, password }: UseCreateUserWitEmailAndPasswordMutationVariables) =>
+            await createUserWithEmailAndPassword(firebaseAuth, email, password),
+        mutationKey: CREATE_USER_WITH_EMAIL_AND_PASSWORD_MUTATION_KEY
+    });
+};

package/web/auth/useCurrentUser.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook that provides the current authenticated user from Firebase Auth.
+ * It listens for changes in the authentication state and updates the user accordingly.
+ * @returns {Object|null} The current authenticated user object or null if no user is authenticated.
+ */
+export declare const useCurrentUser: () => import("@firebase/auth").User | null;

package/web/auth/useCurrentUser.js

@@ -0,0 +1,20 @@
+import { useAuth } from "./useAuth";
+import { useEffect, useState } from "react";
+/**
+ * Hook that provides the current authenticated user from Firebase Auth.
+ * It listens for changes in the authentication state and updates the user accordingly.
+ * @returns {Object|null} The current authenticated user object or null if no user is authenticated.
+ */
+export const useCurrentUser = () => {
+    const firebaseAuth = useAuth();
+    const [currentUser, setCurrentUser] = useState(firebaseAuth.currentUser);
+    useEffect(() => {
+        const unsubscribe = firebaseAuth.onAuthStateChanged((user) => {
+            setCurrentUser(user);
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [currentUser?.uid ?? ""]);
+    return currentUser;
+};

package/web/auth/useCurrentUser.ts

@@ -0,0 +1,24 @@
+import { useAuth } from "./useAuth";
+import { useEffect, useState } from "react";
+
+/**
+ * Hook that provides the current authenticated user from Firebase Auth.
+ * It listens for changes in the authentication state and updates the user accordingly.
+ * @returns {Object|null} The current authenticated user object or null if no user is authenticated.
+ */
+export const useCurrentUser = () => {
+    const firebaseAuth = useAuth();
+
+    const [currentUser, setCurrentUser] = useState(firebaseAuth.currentUser);
+
+    useEffect(() => {
+        const unsubscribe = firebaseAuth.onAuthStateChanged((user) => {
+            setCurrentUser(user);
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [currentUser?.uid ?? ""]);
+
+    return currentUser;
+};

package/web/auth/useIdToken.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @inline
+ */
+export type UseIdTokenResult = {
+    idToken: string;
+    refresh: () => Promise<string | undefined>;
+};
+/**
+ * A hook to manage the ID token.
+ * It monitors changes to the ID token and provides the token itself along with a refresh method to update the token when needed.
+ *
+ * @group Hook
+ *
+ * @returns {UseIdTokenResult}
+ *
+ * @example
+ * ```jsx
+ * export const MyComponent = () => {
+ *  const result = useIdToken();
+ *  useEffect(() => {
+ *      const timeout = setTimeout(() => {
+ *          result.refresh();
+ *      }, 5000);
+ *      return () => clearTimeout();
+ *  }, [])
+ *  console.log(resilt.idToken);
+ * };
+ * ```
+ */
+export declare const useIdToken: () => UseIdTokenResult;

package/web/auth/useIdToken.js

@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useState } from "react";
+import { useCurrentUser } from "./useCurrentUser";
+import { onIdTokenChanged } from "firebase/auth";
+import { useAuth } from "./useAuth";
+/**
+ * A hook to manage the ID token.
+ * It monitors changes to the ID token and provides the token itself along with a refresh method to update the token when needed.
+ *
+ * @group Hook
+ *
+ * @returns {UseIdTokenResult}
+ *
+ * @example
+ * ```jsx
+ * export const MyComponent = () => {
+ *  const result = useIdToken();
+ *  useEffect(() => {
+ *      const timeout = setTimeout(() => {
+ *          result.refresh();
+ *      }, 5000);
+ *      return () => clearTimeout();
+ *  }, [])
+ *  console.log(resilt.idToken);
+ * };
+ * ```
+ */
+export const useIdToken = () => {
+    const auth = useAuth();
+    const currentUser = useCurrentUser();
+    const [idToken, setIdToken] = useState("");
+    const callback = useCallback(async () => {
+        if (!currentUser) {
+            setIdToken("");
+            return;
+        }
+        const idToken = await currentUser.getIdToken();
+        setIdToken(idToken);
+    }, [currentUser, idToken]);
+    const refresh = useCallback(async () => {
+        if (!currentUser) {
+            return;
+        }
+        const idToken = await currentUser.getIdToken(true);
+        return idToken;
+    }, [currentUser, idToken]);
+    useEffect(() => {
+        callback();
+    }, [currentUser?.uid ?? ""]);
+    useEffect(() => {
+        const unsubscribe = onIdTokenChanged(auth, (user) => {
+            if (user) {
+                user.getIdToken().then((idToken) => {
+                    setIdToken(idToken);
+                });
+            }
+            else {
+                setIdToken("");
+            }
+        });
+        return () => unsubscribe();
+    }, [idToken]);
+    return {
+        idToken,
+        refresh
+    };
+};