How to keep user logged in after logging in to his account forever using firebase

Question

hey i tried so many ways and research about it too much but still i am facing this error so can someone pls tell me how to keep user logged in after logging in to his account forever using firebase

import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  Button,
  StyleSheet,
  Pressable,
  TouchableOpacity,
  Alert,
} from "react-native";
import { firebase } from "../../firebase";

import { Formik } from "formik";
import * as Yup from "yup";
import Validator from "email-validator";

const LoginForm = ({ navigation }) => {
  const LoginFormSchema = Yup.object().shape({
    email: Yup.string().email().required("An email is required"),
    password: Yup.string()
      .required()
      .min(6, "Your password has to have at least 6 characters"),
  });

  const onLogin = async (email, password) => {
    try {
      await firebase.auth().signInWithEmailAndPassword(email, password);
      console.log("Firebase Login Successfully" + email, password);
    } catch (error) {
      Alert.alert(error.message);
    }
  };

  return (
    <View style={styles.wrapper}>
      <Formik
        initialValues={{ email: "", password: "" }}
        onSubmit={(values) => {
          onLogin(values.email, values.password);
        }}
        validationSchema={LoginFormSchema}
        validateOnMount={true}
      >
        {({ handleChange, handleBlur, handleSubmit, values, isValid }) => (
          <>
            <View
              style={[
                styles.inputField,
                {
                  borderColor:
                    values.email.length < 1 || Validator.validate(values.email)
                      ? "#ccc"
                      : "red",
                },
              ]}
            >
              <TextInput
                placeholder="Phone Number, username or email"
                autoCapitalize="none"
                keyboardType="email-address"
                textContentType="emailAddress"
                autoFocus={true}
                onChangeText={handleChange("email")}
                onBlur={handleBlur("email")}
                value={values.email}
              />
            </View>
            <View
              style={[
                styles.inputField,
                {
                  borderColor:
                    1 > values.password.length || values.password.length >= 6
                      ? "#ccc"
                      : "red",
                },
              ]}
            >
              <TextInput
                placeholder="Password"
                autoCapitalize="none"
                autoCorrect={false}
                secureTextEntry={true}
                textContentType="password"
                onChangeText={handleChange("password")}
                onBlur={handleBlur("password")}
                value={values.password}
              />
            </View>
            <View style={{ alignItems: "flex-end", marginBottom: 30 }}>
              {/* <Text style={{ color: "#68B0F5" }}>Forgot Password?</Text> */}
            </View>
            <View style={{ justifyContent: "center", alignItems: "center" }}>
              <Pressable
                titleSize={20}
                style={styles.button(isValid)}
                disabled={!isValid}
                onPress={handleSubmit}
              >
                <Text style={styles.buttonText}>Log In</Text>
              </Pressable>
            </View>

            <View style={styles.signupContainer}>
              <Text>Don't have an account?</Text>
              <TouchableOpacity onPress={() => navigation.push("SignupScreen")}>
                <Text style={{ color: "#68B0F5" }}>Sign Up</Text>
              </TouchableOpacity>
            </View>
          </>
        )}
      </Formik>
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    marginTop: 80,
  },
  inputField: {
    borderRadius: 4,
    padding: 12,
    backgroundColor: "#FAFAFA",
    marginBottom: 10,
    borderWidth: 1,
  },
  button: (isValid) => ({
    backgroundColor: isValid ? "#DC143C" : "#f56991",
    alignItems: "center",
    justifyContent: "center",
    minHeight: 42,
    borderRadius: 50,
    width: "60%",
  }),
  buttonText: {
    color: "white",
    fontWeight: "600",
    fontSize: 20,
  },
  signupContainer: {
    flexDirection: "row",
    width: "100%",
    justifyContent: "center",
    marginTop: 50,
  },
});

export default LoginForm;

and i am creating a Instagram clone with the help of this tutorial : https://www.youtube.com/watch?v=UbixZZDjrdU&t=390s

Answer 1

You should ask your user again for the password and re-authendicate him with:

  const credential = EmailAuthProvider.credential(email, password);
  const user = firebase.auth.currentUser;
  if (user) reauthenticateWithCredential(user, credential);

If the above doesn't work, use your login function.

It is not suggested though to save user's password in AsyncStorage and re-use it to re-log him in an every refresh.