AsyncStorage to hide login screen in react native

Question

When I open and close the application after login, I want the same page to be opened again, so the user does not log in again. Do not open the login page when the application is opened unless the user logs out. I want him to open the login page when I log out. When I do not check out / Home I want to open.

index.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent('ReactNativeAuth', () => App);

AppRegistry.registerComponent(appName, () => App);

App.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NativeRouter, Switch, Route } from "react-router-native";

import Login from "./src/Login";
import Home from "./src/components/usrFirst";

export default class App extends React.Component {
  render() {
    return (
      <NativeRouter>

            <Route exact path="/" component={Login} />
            <Route exact path="/Home" component={Home} />

      </NativeRouter>
    );
  }
}

score 0 · Accepted Answer · answered Oct 25 '19 at 06:17

Here is how im doing the same thing for my app ,

this is how im storing the token in my app via async storage after successfull login. export const setData = (key, value) => AsyncStorage.setItem(key, value);

this is called after succesfull login ,which sets the token in async storage. await setData('token', result.payload.token);

And in the app.js or the first component whihc is called , i check if the token does exists, and if it's there, then i redirect to homescreen or onboarding screen.

const token = await isSignedIn();
      this.props.navigation.navigate(token ? 'HomeScreen' : 'LoginScreen');

And my is signedIn func is as below :

export const isSignedIn = () => {
  return new Promise((resolve, reject) => {
    AsyncStorage.getItem(JWT_KEY)
      .then(res => {
        if (res !== null) {
          resolve(true);
        } else {
          resolve(false);
        }
      })
      .catch(err => reject(err));
  });
};

SO thats how i achieved it, feel free to ask any doubts.

score 0 · Answer 2 · answered Oct 25 '19 at 06:23

0

In your component which is often open firstly when application open, do as the following code

 componentDidMount(){
 AsyncStorage.getItem("UserInfo",error,result){
 if(error){ //do something}
 if(result){
 Object.assign("you object save the user info in memory",JSON.parse(result))
 }     
 }

}

At the same time, you should save the info when you log in,

logSuccess(response){
 //firstly, save the data into a memory object
 Session.user = JSON.parse(response)
 // then save it into AsyncStorage
  AsyncStorage.setItem('UserInfo', JSON.stringify(Session), (error) => {
 }

}

answered Oct 25 '19 at 06:23

Lenoarod

3,441
14
25

It worked, but I get a firebase fatal error. if (! firebase.apps.length) { firebase.initializeapp ({config}); Although I use. – SH Yazılım Geliştirme Oct 25 '19 at 06:45
as for the firebase fatal error, you can see this question (https://stackoverflow.com/questions/37652328/how-to-check-if-a-firebase-app-is-already-initialized-on-android) – Lenoarod Oct 25 '19 at 07:44

score 0 · Answer 3 · answered Oct 25 '19 at 07:23

Create a different class to manage token and check user LoggedIn.

export AUTH_TOKEN = "authToken";

export class AuthService {

    static async saveToken(token) {
      await AsyncStorage.setItem(AUTH_TOKEN, token);
    }

    static async isLoggedIn() {
      const token = await AsyncStorage.getItem(AUTH_TOKEN);
      return token !== null;
    }

}

Create an AuthLoadingScreen class and set it at the root level of navigator.

class AuthLoadingScreen {

  componentDidMount() {

    const isLoggedIn = await AuthService.isLoggedIn();

    const {navigate} = this.props.navigation;

    navigate(isLoggedIn ? 'HomeScreen' : 'LoginScreen');
  }

  render() {
    <View>
    </View>
  }

}

AsyncStorage to hide login screen in react native

3 Answers3