firebase/auth/react-native no longer exported in SDK 10

[jacobhq]

Operating System

Windows 11

Browser Version

React Native (Expo Go)

Firebase SDK Version

10.0.0

Firebase SDK Product:

Auth

Describe your project's tooling

Expo (SDK 49) with react-native (0.72.1) and typescript

Describe the problem

I was trying to use expo persistence as per this post and was unable to. I searched the internet and found this blog post from firebase, which seemed accurate to SDK 9, however did not work in SDK 10.

Specifically, this happened because:

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

  Is no longer exported from SDK 10, and no replacement is documented (or at least that I could find)
• reactNativeLocalPersistence is not exported from anywhere else in the SDK

WORKAROUND: I am currently staying on SDK 9.

Steps and code to reproduce issue

// Code from https://github.com/expo/fyi/blob/main/firebase-js-auth-setup.md#switching-to-the-react-native-persistence-manager that worked with SDK 9
import { initializeApp } from "firebase/app";
import { initializeAuth, reactNativeLocalPersistence } from "firebase/auth/react-native"

// Initialize Firebase
const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);

// add this to init auth with persistence
initializeAuth(app,
    {
        persistence: reactNativeLocalPersistence
    }
)

I'm happy to provide more code as required, and appreciate that this is not enough for a full repro.

[hsubox76]

Yes, this explicit path was removed, see the release notes: https://firebase.google.com/support/release-notes/js#version_1000_-_july_6_2023 This version also implicitly includes persistence and no longer needs reactNativeLocalPersistence.

You should be able to import from firebase/auth directly and have it pick up the React Native bundle as long as you have a standard React Native tooling config.

Sorry about the blog post, will try to get it updated.

Edit: Can you make a PR for the Expo doc page?

[jacobhq]

Edit: Can you make a PR for the Expo doc page?

Yep, happy to do so.

[eduardinni]

Ran into the same issue after updating, I had to change from initializeAuth to getAuth, because it wasn't picking up async storage after app reloads.

import {getAuth} from 'firebase/auth';
const auth = getAuth(app);

[hernanif1]

In my case migrating to firebase 10.0.0 also introduces a weird bug showing me a white screen without any error

import {
  getAuth,
  signInWithEmailAndPassword,
  onAuthStateChanged,
  // initializeAuth,
} from 'firebase/auth';
import { TFunction } from 'i18next';
// import { MMKV } from '~/services/storage';
import { Auth } from 'firebase/auth';

const firebaseOptions = {
  apiKey: FIREBASE_API_KEY,
  authDomain: FIREBASE_AUTH_DOMAIN,
};

// const authOptions = {
//   persistence: reactNativeLocalPersistence,
// };

class AuthService {
  private auth: Auth;

  constructor() {
    if (!getApps()?.length) {
      const app = initializeApp(firebaseOptions);
      this.auth = getAuth(app);
    }
    const app = getApp();
    this.auth = getAuth(app);
  }

using initializeAuth also does not work

  constructor() {
  if (!getApps()?.length) {
    const app = initializeApp(firebaseOptions);
    this.auth = initializeAuth(app, authOptions);
  }
  const app = getApp();
  this.auth = getAuth(app);
}

[jacobhq]

Ran into the same issue after updating, I had to change from initializeAuth to getAuth, because it wasn't picking up async storage after app reloads.

import {getAuth} from 'firebase/auth';

const auth = getAuth(app);

That’s what I’ve done. It’s best to just remove all persistence/react native references and just follow the web docs. I think the library handles it all now.

[dwyfrequency]

@hernanif1 this seems to be a separate issue. Could you please file another issue request and include details about your apps setup? A minimum reproducible repo would be best

[eduardinni]

That’s what I’ve done. It’s best to just remove all persistence/react native references and just follow the web docs. I think the library handles it all now.

I had to add "@react-native-async-storage/async-storage": "1.17.12", to my package.json when using Expo, it turns out Expo doesn't include Async Storage pod if it isn't in your dependencies, my app was crashing in production builds.

I matched the exact version from firebase package.

[matheusxreis]

In my case migrating to firebase 10.0.0 also introduces a weird bug showing me a white screen without any error

@hernanif1 same occurs here.

[hsubox76]

Closing this issue regarding v10 import and usage changes. New issue has been opened above regarding the crashing/white screen: #7448

[pingrishabh]

Ran into the same issue after updating, I had to change from initializeAuth to getAuth, because it wasn't picking up async storage after app reloads.

import {getAuth} from 'firebase/auth';
const auth = getAuth(app);

Life saver! Couldn't figure out why persistence wasn't working for the life of me 😕

[robutler]

I'm running into the same issue as the original poster when trying to upgrade from 9.23.0 to 10.1.0 with getReactNativePersistence not working. I have a mono-repo setup with an internal package that imports the "firebase" dependency in package.json. In my Expo app I'm then using "getReactNativePersistence", and tried changing the import path as suggested from "firebase/auth/react-ative" to "firebase/auth".

I've been searching the firebase code I'm importing, but I'm no longer finding any mention of "getReactNativePersistence" in the firebase library's code, at all.
Has anyone actually been able to get this do work, or am I missing something? From what I can see "getReactNativePersistence" no longer exists in the firebase package's code.

[hsubox76]

It's definitely still there: https://github.com/firebase/firebase-js-sdk/blob/master/packages/auth/index.rn.ts#L52

I suspect what might be happening is that you're not getting the RN auth bundle, possibly because of how your module resolution is configured. In a standard React Native project, the bundler (usually Metro) should look at the package.json for auth, here: https://github.com/firebase/firebase-js-sdk/blob/master/packages/auth/package.json#L7 and, see either the react-native top level field or, if it's using ESM module resolution, see the exports['.']['react-native'] field, which points to a special auth bundle for react native users. This should all be automatic in a standard react native project.

It's possible there's something about your configuration where it's grabbing the browser bundle instead (esm2017), which wouldn't have getReactNativePersistence. It wouldn't previously have been an issue because we had users explicitly specify they wanted the react-native bundle before using the "firebase/auth/react-native" import path. Now that it's using automatic resolution, it may be hitting an issue with your bundler configuration. I suggest opening a separate issue if you're not able to get any further with this, so we can focus on that specific problem.