Auth data is not persisted on React Native

[Nantris]

[REQUIRED] Describe your environment

• Operating System version: Android 12
• Browser version: N/A
• Firebase SDK version: 9.6.7
• Firebase Product: auth
• Additional data: React Native 0.64.x with Expo SDK 43

[REQUIRED] Describe the problem

After upgrading from 7.18.0 to 9.6.7 (with compat helpers,) everything seems to work great, except authentication data is not persisted on React Native anymore. We've tried with React Native 0.64.x and 0.65.x with the same results.

Authentication data is properly persisted when debugging is enabled (ie, when the authentication is saved to desktop browser storage.)

Steps to reproduce:

Authenticate user in React Native app, using JS SDK.

Relevant Code:

auth.signInWithEmailAndPassword(email, password); // Signs in, but does not persist anymore

[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.

[sam-gc]

Hi @slapbox, thanks for reaching out. It looks like React Native persistence (which is backed by Async Storage) is not properly wired into the compatibility layer at the moment. I will take a look, but in the mean time, you can use Async Storage with the modular SDK (and use the getReactNativePersistence() function to avoid the deprecation warnings). Unfortunately that fix will require updating to the new modular syntax.

[Nantris]

Thanks for your reply! It seems like upgrading to remove compatibility fixed the issue, without any need to use getReactNativePersistence()

[sam-gc]

Cool, thanks for the update! I'm going to keep this issue open for now until we address the bug in the compat layer

[christophbrosch]

Hi, I can't import getReactNativeLocalStorage from firebase/auth.

import { initializeAuth, getReactNativePersistence } from "firebase/auth"

it says that firebase/auth does not export a member getReactNativePersistence. I installed firebase through yarn with the command: "yarn add firebase" which installed version 9.6.10.

The function is mentioned https://firebase.google.com/docs/reference/js/auth.md#getreactnativepersistence in the docs.

[allotrop3]

@rahonix These can be imported from firebase/auth/react-native:

import { initializeAuth, getReactNativePersistence } from "firebase/auth/react-native"

[Nantris]

What worked for us before no longer works and we now had to implement the getReactNativePersistence

Edit: There's a very unfortunate side-effect that it triggers auth/already-initialized during Fast Refresh though. Even though I can't find any errors in our code, this leads to our app crashing upon Fast Refresh.

[sam-gc]

Hi @allotrop3, thanks for posting that -- that's the correct way to get that import

@slapbox getReactNativePersistence is the right way to do this going forward. I'm not sure if we'll be able to avoid the fast refresh issue, but we can keep this bug open to track that.

[sam-gc]

Actually on second thought, @slapbox would you please open the Fast Refresh problem as a separate issue? I don't want folks to be confused from the title of this one. I'm going to close this issue for now, but if anyone is still seeing problems with the getReactNativePersistence functionality, please feel free to reopen/file a new issue.

[Nantris]

New issue for Fast Refresh bug: #6231

I'm not sure if we'll be able to avoid the fast refresh issue

I really hope it can be resolved because otherwise Firebase is a nightmare for mobile development. It's already making huge headaches for us on top of the substantial amount of work involved in upgrading to 9.x. This issue slows down our development by like 80% right now.

[Scooter1337]

For any future readers:

import { getAuth, initializeAuth, getReactNativePersistence} from "firebase/auth/react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";

if (getApps().length === 0) {
app = initializeApp(firebaseConfig);
auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage),
});

} else {
app = getApp();
auth = getAuth(app);
}

I had issues with the persistency, because I tried to import AsyncStorage in a destructured way ( { AsyncStorage } )