I am using React Native / Expo to build an app with auth. I can log in fine but when I refresh the app, the auth is lost and I need to log in again.
My firebase config looks like this:
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
apiKey: "<key>",
authDomain: "<name>.firebaseapp.com",
projectId: "<id>",
storageBucket: "<id>.appspot.com",
messagingSenderId: "<sender_id>",
appId: "<app_id>",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export { auth };
I have a self hosted log in form in my app that is as so
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
const LoginScreen = () => {
const auth = getAuth();
const handleLogin = useCallback(async (email: string, password: string) => {
const user = await signInWithEmailAndPassword(auth, email, password);
}, [auth]);
return (
<LoginForm onLogin={handleLogin} />
)
}
The log in works fine and I can retrieve the users details and even see auth state change in this useEffect
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
console.log("Auth state changed:", user);
});
return unsubscribe;
}, [auth]);
But when I refresh the app, auth is === null and I need to log in again.
Apparently as of firebase >v9 it should auto persist the auth so I shouldn’t need to configure anything else?
How can I make my RN app have persisted log in using Firebase?
Package versions:
"firebase": "^11.3.1",
"react": "18.3.1",
"expo": "~52.0.31"