How to use AsyncStorage with React Native to manage a login

Question

I am a begineer and I have made a login screen in my app (actually working with React Native), I tried to use AsyncStorage to manage a login to enter to the rest of the app. But I just could make a login with user/pass already defined using const.

The idea of the question is to have AsynStorage working as a backend for my app. You know, like my database, to avoid use Firebase or another DBS. Is this possible?

And I did this to check the user and password, just to test the login, but in fact the app does not have a "backend until here"

I want to create a DB using Async, have users information and stuff like that. Again, I am still a begineer, not sure if this is possible.

class LoginScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = { email: "", password: "" };
  }

  static navigationOptions = {
    header: null
  };

  render() {
    return (
      <View style={styles.container}>
        ...
        <TouchableOpacity style={styles.loginButton} onPress={this._signin}>
          <Text style={styles.loginButtonText}> Login </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._signup}>
          <Text style={styles.createAccount}> Or create an account </Text>
        </TouchableOpacity>
      </View>
    );
  }

  _signin = async () => {
    if (
      userInfo.email === this.state.email &&
      userInfo.password === this.state.password
    ) {
      await AsyncStorage.setItem("logged", "1");
      this.props.navigation.navigate("App");
    } else {
      alert("Try again");
    }
  };

  _signup = async () => {
    this.props.navigation.navigate("Authentication");
  };
}

Then I made a signup screen in the following way, in here I want to add a user to an unexisting DB, still thinking how to do it.

export default class SignUpScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nombre: "",
      username: "",
      email: "",
      cellphone: "",
      password: "",
      email: "",
      cellphone: "",
      password: ""
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.logo} source={require("../images/user.png")} />

        <Text style={styles.welcome}> ¡Creemos tu cuenta! </Text>

        <TextInput
          style={styles.input}
          placeholder="Full name"
          autoComplete="nombre"
          onChangeText={nombre => this.setState({ nombre })}
          value={this.state.nombre}
        />

        <TextInput
          style={styles.input}
          placeholder="Username"
          onChangeText={username => this.setState({ username })}
          value={this.state.username}
        />

        <TextInput
          style={styles.input}
          placeholder="email"
          autoComplete="email"
          autoCapitalize="none"
          keyboardType="email-address"
          onChangeText={email => this.setState({ email })}
          value={this.state.email}
        />

        <TextInput
          style={styles.input}
          placeholder="Cellphone"
          autoComplete="tel"
          keyboardType="phone-pad"
          maxLength={10}
          onChangeText={cellphone => this.setState({ cellphone })}
          value={this.state.cellphone}
        />

        <TextInput
          style={styles.input}
          placeholder="Pass"
          onChangeText={password => this.setState({ password })}
          secureTextEntry={true}
          autoCapitalize="none"
          value={this.state.password}
        />

        <TouchableOpacity
          style={styles.loginButton}
          onPress={this._createAccount}
        >
          <Text style={styles.loginButtonText}> Create account </Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={this._goback}>
          <Text style={styles.createAccount}> Or singin </Text>
        </TouchableOpacity>
      </View>
    );
  }

  _goback = async () => {
    this.props.navigation.navigate("Auth");
  };

  _createAccount = async () => {
    const arrayData = [];

    if (
      this.state.nombre &&
      this.state.username &&
      this.state.email &&
      this.state.cellphone &&
      this.state.password !== null
    ) {
      const data = {
        nombre: this.state.nombre,
        username: this.state.username,
        email: this.state.email,
        cellphone: this.state.cellphone,
        password: this.state.password
      };
      arrayData.push(data);
      try {
        AsyncStorage.getItem("database_form").then(value => {
          if (value !== null) {
            const d = JSON.parse(value);
            d.push(data);
            AsyncStorage.setItem("database_form", JSON.stringify(d)).then(
              () => {
                this.props.navigation.navigate("Auth");
              }
            );
          } else {
            AsyncStorage.setItem(
              "database_form",
              JSON.stringify(arrayData)
            ).then(() => {
              this.props.navigation.navigate("Auth");
            });
          }
        });
      } catch (err) {
        console.log(err);
      }
    } else {
      alert("Todos los campos son obligatorios");
    }
  };
}

And I do not know how to ask in the if of the login screen to check any new user that matches with the users that I have entered in signup screen. Not sure if I am implementing this wrongly.

I just want to check in AsyncStorage if there is a match with the info the user writes in login.

Also ask, when trying to create a new account, if there is an existing user with the same info, to avoid duplicity.

Thanks in advance.

Answer 1

You need to take user entered value in state and on button click event you need to validate it.

<Input placeholder='LogIn Id' onChangeText={(username) => this.setState({ username: username })} />
<TouchableOpacity  onPress={() => this.onclick()}>
<Text>LogIn</Text>
</TouchableOpacity>

and in onclick event you need to check for state value.

Answer 2

How to use Async Storage for login:

Step 0: const AuthContext = React.createContext(); Step 1: Create AuthContex const authContext = React.useMemo() Step 2: <AuthContext.Provider value={authContext}>.....</AuthContext.Provider>