Async storage react native

#1

I am new to react native development about a month ago i start learning and implementing app in react native now i am stuck in async storage thing. Actually i use php web service to login user in my app mysql is database i m using. Now i want to stay user signed in into my app like if user signed in successfully then if user close app the app store his username and password and next time when user open app he’s no need to sign in again. app directly show him home screen i read async storage is responsible for this kind of work need help to implement this kind of functionality I follow this tutorial for login : https://reactnativecode.com/react-native-user-login-using-php-mysql/
my code :slight_smile:

import React, { Component } from 'react';
 
import { StyleSheet, TextInput, View, Alert, Button, Text , AsyncStorage} from 'react-native';

// Importing Stack Navigator library to add multiple activities.
import { createStackNavigator , createAppContainer } from 'react-navigation';
 
// Creating Login Activity.
class LoginActivity extends Component {

  // Setting up Login Activity title.
  static navigationOptions =
   {
      title: 'LoginActivity',
   };
 
constructor(props) {
 
    super(props)
 
    this.state = {
 
      UserEmail: '',
      UserPassword: ''
 
    }
 
  }

UserLoginFunction = () =>{
 const { UserEmail }  = this.state ;
 const { UserPassword }  = this.state ;
 
 
fetch('http://192.168.0.107/loginrn/User_Login.php', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
 
    email: UserEmail,
 
    password: UserPassword
    //console.log('UserEmail')
  })
 
}).then((response) => response.json())
      .then((responseJson) => {

        // If server response message same as Data Matched
       if(responseJson === 'Data Matched')
        {

            //Then open Profile activity and send user email to profile activity.
            this.props.navigation.navigate('Second', { Email: UserEmail });

        }
        else{

          Alert.alert(responseJson);
        }

      }).catch((error) => {
        console.error(error);
      });
          
      
 
  }
 
  render() {
    return (
 
<View style={styles.MainContainer}>
 
        <Text style= {styles.TextComponentStyle}>User Login Form</Text>
  
        <TextInput
          
          // Adding hint in Text Input using Place holder.
          placeholder="Enter User Email"
 
          onChangeText={UserEmail => this.setState({UserEmail})}
 
          // Making the Under line Transparent.
          underlineColorAndroid='transparent'
 
          style={styles.TextInputStyleClass}
        />
 
        <TextInput
          
          // Adding hint in Text Input using Place holder.
          placeholder="Enter User Password"
 
          onChangeText={UserPassword => this.setState({UserPassword})}
 
          // Making the Under line Transparent.
          underlineColorAndroid='transparent'
 
          style={styles.TextInputStyleClass}
 
          secureTextEntry={true}
        />
 
        <Button title="Click Here To Login" onPress={this.UserLoginFunction} color="#2196F3" />
      
  
 
</View>
            
    );
  }
}
// Creating Profile activity.
class ProfileActivity extends Component
{

  // Setting up profile activity title.
   static navigationOptions =
   {
      title: 'ProfileActivity',
    
   };
    

   render()
   {

     const {goBack} = this.props.navigation;

      return(
         <View style = { styles.MainContainer }>
 
            <Text style = {styles.TextComponentStyle}> { this.props.navigation.state.params.Email } </Text>

            <Button title="Click here to Logout" onPress={ () => goBack(null) } />
 
         </View>
      );
   }
}

const AppNavigator= createStackNavigator(
{
   First: { screen: LoginActivity },
   
   Second: { screen: ProfileActivity }

});
export default createAppContainer(AppNavigator);
#2

Yes, AS can do that. It is just a way to store information on the device.

There are different ways to do this. For example, if you store the username and password on the users phone, when the app starts, you check if they are in AS, then perform your login action. If not, send them to the login screen. You could do something similar like if you want to use a token or a JWT for auth, just store the token in AS.

#3

Ideally don’t use AsyncStorage for anything like that, use one of the secure storage adapters that will use KeyChain on iOS and KeyStore on Android (if you’re using Expo, you can just use SecureStore). Even better is not store it on the device, eg use a token as @kevinSmith says

#4