In this section, we’ll explain how to implement a “Remember Me” feature in a React Native app using Expo’s SecureStore. This feature allows users to save their email address when logging in, so they don’t have to re-enter it every time they open the app.

We’ll break down the two key parts:

1. Storing and removing the email when the user logs in based on whether the “Remember Me” checkbox is checked.
2. Fetching the email from SecureStore when the app starts to pre-fill the email field if the user opted to remember it.You can also implement an added functionality in order to pre-fill the password text-box for the user, however for this specific functionality I will teach you how to effectively implement a “Remember Me” functionality. You can them copy the code to add the pre-fill the password

Remember Me Implementation

Below you’ll see an image of the checkbox code UI and its associated styling. Ignore the container styling in styling image.

1<View style={styles.rememberMeContainer}>
2 <Checkbox
3   style={styles.checkbox}
4   value={isChecked}
5   onValueChange={setChecked}
6   color={isChecked ? "#4096C1" : undefined}
7 />
8 <Text style={styles.rememberText}>Remember me</Text>
9</View>
10
11const [securePassword, setSecurePassword] = useState(true);
12const [isChecked, setChecked] = useState(false);

We are using expo checkbox for our checkbox. Install expo-checkbox as such. We are setting the state to toggle the checkbox and have a custom color selected when the checkbox is checked. In the above image you’ll see what it looks like when the checkbox is checked and when it is un-checked it is plain white with a border.

1npx expo install expo-checkbox

1const styles = StyleSheet.create({
2 container: {
3   flex: 1,
4   marginHorizontal: globalStyle.container.marginHorizontal,
5 },
6 rememberText: {
7   color: "#282545",
8   fontWeight: "400",
9   fontSize: 14,
10 },
11 rememberMeContainer: {
12   marginVertical: 10,
13   marginBottom: 0,
14   flexDirection: "row",
15   alignItems: "center",
16 },
17 checkbox: {
18   margin: 8,
19   borderRadius: 4,
20 },
21});

Below you’ll find the login code when the user enters their email and password. We are using expo securestore in order to store the users email. We use expo securestore since it saves the users email in an encrypted format on the frontend.

Here’s the handleLogin function that handles storing or removing the email based on the user's choice:

1const handleLogin = async (email: string, password: string) => {
2 Keyboard.dismiss();
3 setLoading(true);
4 signIn(email, password);
5 
6 if (isChecked) {
7   // Save email to SecureStore
8   try {
9     await SecureStore.setItemAsync("userEmail", email);
10   } catch (error) {
11     console.log("Error saving email to SecureStore", error);
12   }
13 } else {
14   // Remove email from SecureStore
15   await SecureStore.deleteItemAsync("userEmail");
16 }
17};

Handling the “Remember Me” Logic

If the checkbox is checked (isChecked === true), the user's email is saved to SecureStore with the key "userEmail". This ensures the email persists even if the app is closed or the device is restarted.

1await SecureStore.setItemAsync("userEmail", email);

1await SecureStore.deleteItemAsync("userEmail");

Fetching the Email from SecureStore on App Start

When the app starts, we want to check if there’s an email saved in SecureStore. If so, we’ll populate the email input field and check the "Remember Me" checkbox automatically.

Here’s the useEffect that handles fetching the stored email:

1useEffect(() => {
2  const getEmailFromStore = async () => {
3    try {
4      // Fetch the email from SecureStore
5      const storedEmail = await SecureStore.getItemAsync("userEmail");
6      
7      // If the email is found, prefill the email field and check the checkbox
8      if (storedEmail) {
9        setEmail(storedEmail); // Set the email field value
10        setChecked(true);      // Check the "Remember Me" checkbox
11        console.log(storedEmail); // Optional log for debugging
12      } else {
13        console.log("Email not found in SecureStore");
14      }
15    } catch (error) {
16      console.log("Error fetching email from SecureStore", error);
17    }
18  };
19
20  getEmailFromStore();  // Call the async function to fetch the email
21}, []);  // Empty dependency array ensures this runs once when the component mounts

Breakdown

• SecureStore.getItemAsync("userEmail"): This retrieves the email from secure storage, using the same key ("userEmail") we used to store it.
• setEmail(storedEmail): If an email is found in SecureStore, this function sets the email input field to the retrieved email, allowing the user to log in more quickly without re-entering it.
• setChecked(true): This sets the "Remember Me" checkbox to checked, indicating that the email was stored from the previous session.

How the Workflow Comes Together

1. On Login:
   1. When the user clicks the login button, the handleLogin function is triggered.
   2. If the “Remember Me” checkbox is checked, the user’s email is saved to secure storage. If unchecked, any previously stored email is removed.
2. On App Start:
   1. When the app starts, the useEffect runs and checks for the stored email in SecureStore.
   2. If an email is found, it populates the email input field and automatically checks the “Remember Me” checkbox, making it convenient for the user to log in without re-entering their email.

Why Use SecureStore?

Expo’s SecureStore is ideal for storing sensitive information like login credentials. On mobile devices, SecureStore encrypts the data, ensuring that sensitive information (like emails and tokens) is protected from unauthorized access. It provides a simple API to securely store key-value pairs, making it a great fit for features like “Remember Me.”

Conclusion

By combining SecureStore with React hooks like useEffect, we’ve implemented a secure, seamless "Remember Me" feature that stores and retrieves the user’s email between sessions. This small feature significantly enhances the user experience by reducing friction during login while ensuring that sensitive information is stored securely.

Let’s connect on LinkedIn and talk about this implementation. If you have any questions, feel free to reach out to me!