Home > Enterprise >  Do we need Async Storage for firebase auth to store user data in react native
Do we need Async Storage for firebase auth to store user data in react native

Time:11-19

I have a question about firebase auth. After the user login, I can do anything. But when I close my app and reopen it again, I need to log in to my app again. To avoid this happening again and aging I used Async Storage to store the token, and login: true attribute. But I have doubts about this. I used rnfirebase.io to set up my firebse in my app. Is there a way to do this without Async Storage?.. Can anyone explain a little bit about this? Thanks❤️. (I used react native with redux-saga)

CodePudding user response:

If you use react-redux middleware in react-native, you should use AsyncStorage as the middle-ware of saving persist state to reduce the calls to firebase.

It allow you to save the login state of users & other stuffs without have to request & auth again from firebase ( excerpt you can set timeout for it).

This is an example of store.js which can use AsyncStorage as middleware of redux to save state locally:

import { applyMiddleware, createStore, compose } from "redux";
import { persistStore, persistReducer } from "redux-persist";

import AsyncStorage from "@react-native-async-storage/async-storage";

import thunkMiddleware from "redux-thunk";
import { createLogger } from "redux-logger";

import reducer from "./reducers/"; // lets get the reducers
// create logger in DEV
const enhancers = [
    applyMiddleware(
        thunkMiddleware,
        createLogger({
            collapsed: true,            
            predicate: () => __DEV__,
        })
    ),
];

const composeEnhancers =
    (__DEV__ &&
        typeof window !== "undefined" &&
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
    compose;


const enhancer = composeEnhancers(...enhancers);

const persistConfig = {
    key: "blabla", // key of storage
    storage: AsyncStorage,
    blacklist: [],
};

const persistedReducer = persistReducer(persistConfig, reducer);
export const store = createStore(persistedReducer, {}, enhancer);
export const persistor = persistStore(store);
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related