Open
Description
Operating System
Mac Sonoma 14.4.1
Browser Version
Chrome/ Version 124.0.6367.119 (Official Build) (arm64)
Firebase SDK Version
10.11.1
Firebase SDK Product:
Auth, Firestore
Describe your project's tooling
React Native Expo, Web with metro.config.js
Describe the problem
Im trying to add a context provider so I can handle the status of the user. In the native app everything works fine. When I try to open the app on web it warns me like:
WARN Require cycle: ../../node_modules/@grpc/grpc-js/build/src/channel.js -> ../../node_modules/@grpc/grpc-js/build/src/internal-channel.js -> ../../node_modules/@grpc/grpc-js/build/src/subchannel-pool.js -> ../../node_modules/@grpc/grpc-js/build/src/subchannel.js -> ../../node_modules/@grpc/grpc-js/build/src/channelz.js -> ../../node_modules/@grpc/grpc-js/build/src/make-client.js -> ../../node_modules/@grpc/grpc-js/build/src/client.js -> ../../node_modules/@grpc/grpc-js/build/src/channel.js
Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
factory (../../node_modules/@grpc/grpc-js/build/src/client.js:21:19)
factory (../../node_modules/@grpc/grpc-js/build/src/make-client.js:20:18)
factory (../../node_modules/@grpc/grpc-js/build/src/channelz.js:25:23)
factory (../../node_modules/@grpc/grpc-js/build/src/subchannel.js:26:20)
Steps and code to reproduce issue
I have the firebase config:
import { initializeApp } from "firebase/app";
import {
initializeAuth,
connectAuthEmulator,
getReactNativePersistence,
browserSessionPersistence,
} from "firebase/auth";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
import { getStorage, connectStorageEmulator } from "firebase/storage";
import { connectFunctionsEmulator, getFunctions } from "firebase/functions";
import AsyncStorage from "@react-native-async-storage/async-storage";
import device from "../device";
const firebaseConfig = {
apiKey: process.env.EXPO_PUBLIC_API_KEY ?? "",
authDomain: process.env.EXPO_PUBLIC_AUTH_DOMAIN ?? "",
projectId: process.env.EXPO_PUBLIC_PROJECT_ID ?? "",
storageBucket: process.env.EXPO_PUBLIC_STORAGE_BUCKET ?? "",
messagingSenderId: process.env.EXPO_PUBLIC_MESSAGING_SENDER_ID ?? "",
appId: process.env.EXPO_PUBLIC_APP_ID ?? "",
measurementId: process.env.EXPO_PUBLIC_MEASUREMENT_ID ?? "",
};
const app = initializeApp(firebaseConfig);
const auth = initializeAuth(app, {
persistence: device.isWeb ? browserSessionPersistence : getReactNativePersistence(AsyncStorage),
});
const firestore = getFirestore(app);
const storage = getStorage(app);
const functions = getFunctions(app);
if (__DEV__) {
connectFirestoreEmulator(firestore, process.env.EXPO_PUBLIC_IP ?? "", 8080);
connectStorageEmulator(storage, process.env.EXPO_PUBLIC_IP ?? "", 9199);
connectAuthEmulator(auth, `http://${process.env.EXPO_PUBLIC_IP}:9099`, { disableWarnings: true });
connectFunctionsEmulator(functions, process.env.EXPO_PUBLIC_IP ?? "", 5001);
}
export { app, auth, firestore, storage, functions };
Then I call this in a context provider:
import React, {
createContext,
useContext,
useMemo,
PropsWithChildren,
useState,
useEffect,
} from "react";
import { auth } from "@/src/resources/config/firebase";
import { User, onAuthStateChanged } from "firebase/auth";
type tContext = {
user: User | undefined | null;
setUser: React.Dispatch<React.SetStateAction<User | null | undefined>>;
};
const MainContext = createContext<Partial<tContext>>({
user: undefined,
setUser: () => Function,
});
export type tMainProviderProps = {};
export const MainProvider = ({ children }: PropsWithChildren<tMainProviderProps>) => {
const [user, setUser] = useState<User | null | undefined>(undefined);
const authStateChanged = (authUser: User | null | undefined) => {
setUser(authUser);
};
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, authStateChanged);
return () => {
unsubscribe();
};
}, []);
const memoValue = useMemo(() => ({ user, setUser }), [user]);
return <MainContext.Provider value={memoValue}>{children}</MainContext.Provider>;
};
export default function useMainProvider() {
const context = useContext(MainContext);
if (!context) throw new Error("useMainProvider should be within MainProvider");
return context;
}
There is no other configuration or setup, this project is quite new.