Auth not persisting in React Native

[stretch0]

Operating System

Android 14 API 34

Environment (if applicable)

React Native

Firebase SDK Version

11.3.1

Firebase SDK Product(s)

Auth

Project Tooling

React Native using Expo

Detailed Problem Description

Auth doesn't persist across app refreshes.

I login to my app using a self hosted login form that calls signInWithEmailAndPassword and can successfully log in. I can see the user details all ok.

When I refresh the app, the auth state is lost and currentUser is null.

I get the following log in my console

You are initializing Firebase Auth for React Native without providing
AsyncStorage. Auth state will default to memory persistence and will not
persist between sessions. In order to persist auth state, install the package
"@react-native-async-storage/async-storage" and provide it to
initializeAuth:

import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});

I was under the impression auth should persist by default.

Also getReactNativePersistence doesn't seem to be exported from firebase/auth package so I couldn't add this if I tried.

Steps and code to reproduce issue

Sample repo here: https://github.com/stretch0/react-native-test-app

1. Create new user or Log in via the log in page
2. Notice current user is logged to the screen
3. Refresh the app
4. User is now null but would expect it to be the user that I had previously logged in as

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[stretch0]

I've noticed the NO_PERSISTANCE_WARNING is getting logged if getAuth() is called before initializeAuth().

Whilst I don't think this is the issue in my case, would it be more appropriate to log a wanring message such as getAuth() is called before initializeAuth(). Please make sure you're initializing the app first.?

I might be missing something but logging the NO_PERSISTENCE_WARNING message seems like the wrong thing to log here?

Have raised a PR to demo the change
#8799

[dlarocque]

Hi @stretch0, thanks for submitting this issue with the reproduction app!

getReactNativePersistence is exported from the dist/rn/index.js bundle. Your app doesn't seem to be resolving that bundle, and is instead using the default web bundle. Could you configure your app to resolve firebase/auth imports to the 'react-native' paths defined at https://github.com/firebase/firebase-js-sdk/blob/main/packages/auth/package.json#L21?

[stretch0]

I have tried updating the resolver in the metro bundler

...
resolver: {
  ...
  extraNodeModules: {
    'firebase/auth': require.resolve('@firebase/auth/dist/rn/index.js'),
  },
},

and TS config

"compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": [
        "./*"
      ],
      "firebase/auth": ["./node_modules/firebase/auth/dist/rn/index.d.ts"]
    }
  },

But that doesn't seem to work.

As far as I can tell, the rn package doesn't seem to be included in the dist bundle.

[dlarocque]

@stretch0 If you follow the resolution of an import to firebase/auth in your code, you will see that everything is actually exported from a seperate @firebase/auth package. The RN bundle is at node_modules/@firebase/auth/dist/index.rn.js.

[stretch0]

Not quite sure I follow your suggestion here.

Are you saying to update the import in my firebaseConfig.ts file to be some like

import { getReactNativePersistence, initializeAuth } from '@firebase/auth/some/path';

Or are you saying to update the bundler to override the import of @firebase/auth to point somewhere else? I'm guessing this would need to update typescript resolvers too?

Do you have an example of this being done elsewhere?

I have posted on StackOverflow trying to get help too but based on no responses, this doesn't seem to be well known

[dlarocque]

@stretch0

You need to make the bundler resolve firebase/auth to the react-native bundle instead of the browser or node bundle that exists in @firebase/auth.

The resolution path should be something like node_modules/firebase/auth/dist/es/index.esm.js -> node_modules/@firebase/auth/rn/index.js.

Since our team is not very familiar with Expo/Metro, we don't have any examples on how to do this.
See #8231 (comment)

[google-oss-bot]

Hey @stretch0. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[google-oss-bot]

Since there haven't been any recent updates here, I am going to close this issue.

@stretch0 if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.