React native firebase AsyncStorage warning?

Question

I am developing a react native expo project with firebase. I installed firebase with: "yarn add firebase" and when I import firebase/auth with OnAuthChanged I get the following error:

AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage

I understand that firebase is storing my credentials locally with async and it is outdated and thats why I get this error. Now when I try to get rid of this error by installing: "yarn add @react-native-async-storage/async-storage" and changing the dependencies in the index.js to the correct async-storage package (https://mcmap.net/q/345829/-how-to-remove-39-warning-async-storage-has-been-extracted-from-react-native-core-39) then my Warning dissapears.

The problem now is that my credentials are not saved, and onAuthChanges never triggers. I have to login each time I open my app.The correct version of async-storage is not saving my creds.

Any ideas on this one? :S

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
...
  };  

const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp);

onAuthStateChanged(auth, user => {userHandler(user)});

Nippy

You can read this article: #55311728 – Trollop

Thats what I linked in the description. I tried that and it succesfully removed the warning, however it also removed onAuthStateChanged functionality as well. After that I think AsyncStorage is not working... @Trollop – Nippy

Answer 1

This code removed the AsyncStorage warning for me

import AsyncStorage from '@react-native-async-storage/async-storage';
import {initializeApp, getApps, getApp} from 'firebase/app';

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

const firebaseConfig = {
  // Configuration
};


const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();


const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage),
});

export {auth};

Justinejustinian

Answer 2

Warning: @firebase/auth: Auth (10.7.1): You are initializing Firebase Auth for React Native without providing AsyncStorage.

I encountered the same warning and I resolved it using below method:

Before:

import {initializeApp} from 'firebase/app';
import {initializeAuth} from 'firebase/auth';

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
};

const app = initializeApp(firebaseConfig); 
const auth = getAuth(app);

export {auth};

After:

import {initializeApp} from 'firebase/app';
import {initializeAuth, getReactNativePersistence} from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';

const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
};

const app = initializeApp(firebaseConfig);
const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(ReactNativeAsyncStorage),
});

export {auth};

I hope it helps. Thank you.

Capitalist