Password Reset and Email Verification Workflows in React Native

Course: React Native Training

Topic: Password Reset and Email Verification Workflows

Course Link: React Native Training at JustAcademy

Demo Link: Register for a Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to Password Reset and Email Verification

Password reset and email verification are important account-management features in React Native applications. Password reset allows users to regain access to an account when they forget their password. Email verification helps confirm that a user can receive messages at the email address associated with the account.

These features improve account security, user experience, and the reliability of account-related communication. They are commonly used in e-commerce applications, educational platforms, booking systems, social networking apps, and business applications.

In a typical React Native application, the user interacts with mobile screens while an authentication provider or backend handles identity verification, secure links, one-time action codes, and password updates.

1.1 Password Reset

Password reset is a process that lets a user create a new password after demonstrating control over an approved recovery channel, such as the email address associated with the account.

A typical password reset process includes:

• The user selects the Forgot Password option.
• The application requests the user's email address.
• The authentication service sends a password-reset email when appropriate.
• The user opens the reset link or enters the provided recovery code.
• The user chooses a new password.
• The authentication service validates the reset request and updates the password.
• The application displays confirmation and allows the user to sign in as appropriate.

1.2 Email Verification

Email verification confirms that a user can access the email address associated with an account. The authentication service sends a verification link or code. When the user completes the verification action, the service updates the account's verification status.

Email verification is particularly useful when an application needs to send receipts, course updates, booking confirmations, password recovery links, or other important account messages.

2. Learning Objectives

After completing this topic, learners should be able to:

• Understand password recovery and email verification workflows.
• Create a Forgot Password screen in React Native.
• Connect a password reset form to Firebase Authentication or a custom backend.
• Create a screen that allows users to request a verification email.
• Check whether the authenticated user's email is verified.
• Refresh user information after verification.
• Handle expired, invalid, or already-used action links.
• Display appropriate loading indicators, success messages, and errors.
• Protect application features that require a verified email address.
• Apply security, accessibility, and testing best practices.

3. Understanding the Password Reset Workflow

A password reset workflow must verify that the recovery request is valid before allowing a password to be changed. The application should not allow a user to reset an account password simply by entering an email address.

3.1 Password Reset Flow

User Opens Login Screen
          |
          v
Selects "Forgot Password"
          |
          v
Enters Email Address
          |
          v
Application Validates Input
          |
          v
Authentication Provider
          |
          v
Reset Email Sent When Applicable
          |
          v
User Opens Reset Link
          |
          v
Valid Reset Code or Action Link?
          |
       Yes / No
        /     \
       v       v
Choose New   Show Error or
Password     Request New Link
       |
       v
Provider Updates Password
       |
       v
Show Confirmation
       |
       v
Sign In Again If Required

3.2 Responsibilities of the Application and Provider

4. Understanding Email Verification

Email verification is an account confirmation process. It is different from login because the user may already be authenticated before verifying the email address.

4.1 Email Verification Flow

User Registers
      |
      v
Account Created
      |
      v
Verification Email Requested
      |
      v
User Opens Email
      |
      v
Clicks Verification Link
      |
      v
Authentication Provider Validates Action
      |
      v
Email Marked as Verified
      |
      v
Application Refreshes User Status
      |
      v
Verified Features Become Available

4.2 Why Email Verification Matters

• Confirms access to the registered email address.
• Reduces the number of accounts registered with mistyped email addresses.
• Helps users receive password-reset links and account notifications.
• Can be used as a requirement before allowing selected features.
• Improves account recovery reliability.
• Supports account-management and compliance requirements when appropriate.

Email verification does not prove a person's legal identity, and it should not be treated as a substitute for stronger identity checks where those are required.

5. Choosing an Authentication Solution

Password reset and email verification can be implemented with a managed authentication provider or a custom backend. The choice determines how links are generated, how action codes are validated, and how account status is stored.

5.1 Firebase Authentication

Firebase Authentication provides built-in methods for sending password-reset emails, sending verification emails, and refreshing user information. It also supports configurable email templates and action-link settings.

Official documentation: Firebase Authentication Documentation.

5.2 Custom Backend

A custom backend can provide endpoints for requesting password resets, validating one-time reset tokens, updating passwords, and confirming email addresses. This approach gives developers more control but requires secure token generation, email delivery, token expiration, single-use enforcement, and account-update logic.

5.3 Provider Comparison

6. Setting Up Firebase Authentication

For the examples in this lesson, Firebase Authentication is used as a managed provider. The same overall workflows can be adapted to other providers.

6.1 Configure Firebase

1. Create or open a project in the Firebase console.
2. Register the relevant application with the project.
3. Enable the Email/Password sign-in provider in Authentication settings.
4. Configure the email templates for password reset and email verification.
5. Set up approved action-link domains and app-link handling if custom redirects are required.
6. Install and initialize the appropriate Firebase SDK for your React Native environment.

Firebase documentation: Get Started with Firebase Authentication.

6.2 Install the Firebase JavaScript SDK

npm install firebase

This command applies to projects using the Firebase JavaScript SDK. Projects using React Native Firebase should follow its native setup instructions and use its corresponding APIs.

React Native Firebase guide: React Native Firebase Authentication Usage.

6.3 Configure the Authentication Instance

// firebase.js
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'YOUR_FIREBASE_API_KEY',
  authDomain: 'YOUR_PROJECT.firebaseapp.com',
  projectId: 'YOUR_PROJECT_ID',
  appId: 'YOUR_APP_ID'
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Replace the placeholders with the configuration for your Firebase project. In React Native, configure authentication persistence according to the SDK version and environment. Do not initialize duplicate Firebase apps or Auth instances. The Firebase client configuration is not a replacement for backend authorization or database security rules.

7. Creating a Forgot Password Screen

The Forgot Password screen allows users to request a password-reset email. It should contain a clearly labelled email input, a submit button, and a way to return to the login screen.

7.1 Recommended Interface Elements

• Screen title: Forgot Password.
• Instructions: Explain that the user can request a password-reset link.
• Email field: Collect the email address associated with the account.
• Submit button: Sends the recovery request.
• Loading state: Indicates that the request is being processed.
• Confirmation message: Explains that the user should check their email.
• Back-to-login link: Returns to the login screen.

7.2 Forgot Password Screen Example

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  Pressable,
  ActivityIndicator
} from 'react-native';

import { requestPasswordReset } from '../services/authService';

export default function ForgotPasswordScreen({ navigation }) {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');

  const handleResetRequest = async () => {
    const normalizedEmail = email.trim();

    if (!normalizedEmail) {
      setError('Enter your email address.');
      return;
    }

    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!emailPattern.test(normalizedEmail)) {
      setError('Enter a valid email address.');
      return;
    }

    setLoading(true);
    setError('');
    setMessage('');

    try {
      await requestPasswordReset(normalizedEmail);

      setMessage(
        'If an account matches this address, password reset instructions will be sent.'
      );
    } catch (err) {
      setError(
        'Unable to process the request. Please try again later.'
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <View>
      <Text>Forgot Password</Text>
      <Text>Enter your email to request password reset instructions.</Text>

      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="Email address"
        keyboardType="email-address"
        autoCapitalize="none"
        autoCorrect={false}
      />

      {!!error && (
        <Text accessibilityRole="alert">{error}</Text>
      )}

      {!!message && (
        <Text accessibilityRole="text">{message}</Text>
      )}

      <Pressable
        onPress={handleResetRequest}
        disabled={loading}
        accessibilityRole="button"
      >
        {loading
          ? <ActivityIndicator />
          : <Text>Send Reset Instructions</Text>}
      </Pressable>

      <Pressable onPress={() => navigation.navigate('Login')}>
        <Text>Back to Login</Text>
      </Pressable>
    </View>
  );
}

This component expects a service function named requestPasswordReset. The next section implements that function using Firebase Authentication.

8. Implementing Password Reset with Firebase

Firebase provides the sendPasswordResetEmail method for sending a password-reset email. Firebase manages the reset action link and validates it when the user completes the workflow through the configured action handler.

8.1 Create the Password Reset Service

// services/authService.js
import {
  sendPasswordResetEmail
} from 'firebase/auth';

import { auth } from '../firebase';

export async function requestPasswordReset(email) {
  await sendPasswordResetEmail(auth, email.trim());
}

The function resolves when Firebase accepts the request. It does not mean that the user has already changed the password; the user must still complete the action through the email link or configured handler.

Official reference: Firebase sendPasswordResetEmail API.

8.2 Connect the Login Screen

Add a Forgot Password link to the login screen so users can access the recovery workflow.

<Pressable
  onPress={() => navigation.navigate('ForgotPassword')}
>
  <Text>Forgot Password?</Text>
</Pressable>

Make sure the root navigator registers the ForgotPassword route and that the screen is available to unauthenticated users.

8.3 What Happens After the Email Is Sent?

1. Firebase creates a password-reset action link according to the project's configuration.
2. The user receives the message in their email inbox, if delivery succeeds.
3. The user opens the link.
4. Firebase or the configured action handler validates the action code.
5. The user enters a new password if the reset flow requires it.
6. The authentication service applies the password update.
7. The application can display confirmation and guide the user back to login.

When email-enumeration protection is enabled, Firebase can return successfully even when no account matches the supplied address. This helps avoid exposing whether an email is registered. Therefore, the app should not claim that an account definitely exists or that the password has already been changed.

9. Completing a Password Reset with a Custom Action Handler

Some applications use Firebase's default reset page, while others configure a custom action handler or mobile deep link. The exact workflow depends on the action-link configuration and the way the application receives the reset code.

9.1 Reset Code Workflow

When a custom handler receives a valid password-reset code, it should verify the code, collect the new password, and ask the authentication provider to complete the reset.

The Firebase JavaScript SDK exposes functions such as verifyPasswordResetCode and confirmPasswordReset. These should be used only with the code obtained from a legitimate reset action link.

import {
  verifyPasswordResetCode,
  confirmPasswordReset
} from 'firebase/auth';

import { auth } from '../firebase';

export async function validateResetCode(code) {
  return verifyPasswordResetCode(auth, code);
}

export async function completePasswordReset(code, newPassword) {
  await confirmPasswordReset(
    auth,
    code,
    newPassword
  );
}

The code must come from the actual reset action link. Do not hardcode action codes or assume that a reset code remains valid indefinitely. Follow the current provider documentation for custom action handlers and mobile deep links.

Official reference: Firebase Authentication API Reference.

9.2 New Password Screen Example

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  Pressable,
  ActivityIndicator
} from 'react-native';

import {
  completePasswordReset
} from '../services/authService';

export default function NewPasswordScreen({ route, navigation }) {
  const code = route.params?.oobCode;

  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  const handleUpdatePassword = async () => {
    if (!code) {
      setError('The reset link is missing or invalid.');
      return;
    }

    if (password.length < 8) {
      setError('Use a password that meets the configured requirements.');
      return;
    }

    if (password !== confirmPassword) {
      setError('Passwords do not match.');
      return;
    }

    setLoading(true);
    setError('');

    try {
      await completePasswordReset(code, password);
      setSuccess(true);
      setPassword('');
      setConfirmPassword('');
    } catch (err) {
      setError(
        'Unable to reset the password. The link may be invalid or expired.'
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <View>
      <Text>Create a New Password</Text>

      <TextInput
        value={password}
        onChangeText={setPassword}
        placeholder="New password"
        secureTextEntry
      />

      <TextInput
        value={confirmPassword}
        onChangeText={setConfirmPassword}
        placeholder="Confirm new password"
        secureTextEntry
      />

      {!!error && (
        <Text accessibilityRole="alert">{error}</Text>
      )}

      {success ? (
        <>
          <Text>Your password has been updated successfully.</Text>
          <Pressable onPress={() => navigation.navigate('Login')}>
            <Text>Return to Login</Text>
          </Pressable>
        </>
      ) : (
        <Pressable
          onPress={handleUpdatePassword}
          disabled={loading}
          accessibilityRole="button"
        >
          {loading
            ? <ActivityIndicator />
            : <Text>Update Password</Text>}
        </Pressable>
      )}
    </View>
  );
}

This screen assumes the application has already received the reset code from a configured action link and passed it as route.params.oobCode. It does not implement deep-link parsing or code extraction. Password requirements must match the actual Firebase project policy, and the reset code must be validated by the provider.

10. Password Reset Validation and Security

Password reset is a sensitive operation because it can change who has access to an account. Both client-side usability checks and provider-side validation are necessary.

10.1 Email Validation

Check that the email field is not empty and has a plausible format. A regular expression can catch common typing errors, but it cannot prove that an address exists or belongs to the user.

10.2 Password Validation

• Enforce the password policy configured by the authentication provider.
• Require confirmation of the new password when the interface uses a confirmation field.
• Display useful guidance about password requirements.
• Do not trim or silently modify passwords unless the authentication system explicitly defines that behavior.
• Never log or store the password in plaintext.

10.3 Reset Link Validation

• Use the provider's action-code verification method.
• Reject expired, invalid, or already-used action codes.
• Do not accept arbitrary redirect destinations from untrusted input.
• Use approved domains and correctly configured mobile app links.
• Do not mark a password reset as complete until the provider confirms success.

11. Creating an Email Verification Screen

The email verification screen informs users that a verification email has been sent and provides an option to resend it. It may also allow users to refresh their account status after opening the email link.

11.1 Recommended UI Elements

• A clear message explaining that email verification is required.
• The email address associated with the account, where appropriate.
• A Resend Verification Email button.
• A Check Verification Status button.
• A loading indicator while requests are running.
• A sign-out or change-account option when appropriate.
• A message explaining how to check spam or junk folders.

11.2 Email Verification Screen Example

import React, { useState } from 'react';
import {
  View,
  Text,
  Pressable,
  ActivityIndicator
} from 'react-native';

import {
  sendVerificationEmail,
  refreshEmailVerificationStatus
} from '../services/authService';

export default function VerifyEmailScreen() {
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');

  const handleResend = async () => {
    setLoading(true);
    setMessage('');
    setError('');

    try {
      await sendVerificationEmail();
      setMessage('Verification instructions have been requested.');
    } catch (err) {
      setError('Unable to send the email. Please try again later.');
    } finally {
      setLoading(false);
    }
  };

  const handleCheckStatus = async () => {
    setLoading(true);
    setMessage('');
    setError('');

    try {
      const verified = await refreshEmailVerificationStatus();

      setMessage(
        verified
          ? 'Your email is verified.'
          : 'Your email is not verified yet. Open the verification link and try again.'
      );
    } catch (err) {
      setError('Unable to check verification status.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <View>
      <Text>Verify Your Email</Text>
      <Text>
        Check your inbox for a verification email. Follow the link to verify your address.
      </Text>

      {!!message && <Text>{message}</Text>}
      {!!error && <Text accessibilityRole="alert">{error}</Text>}

      <Pressable
        onPress={handleResend}
        disabled={loading}
        accessibilityRole="button"
      >
        {loading
          ? <ActivityIndicator />
          : <Text>Resend Verification Email</Text>}
      </Pressable>

      <Pressable
        onPress={handleCheckStatus}
        disabled={loading}
        accessibilityRole="button"
      >
        <Text>Check Verification Status</Text>
      </Pressable>
    </View>
  );
}

This screen expects the two service functions to be implemented and the user to be signed in. The verification status should be obtained from the authentication provider, not inferred from whether the user clicked a button.

12. Sending an Email Verification Message with Firebase

Firebase Authentication provides the sendEmailVerification method for sending a verification email to the current user.

12.1 Create the Verification Service

// services/authService.js
import {
  sendEmailVerification,
  reload
} from 'firebase/auth';

import { auth } from '../firebase';

export async function sendVerificationEmail() {
  const user = auth.currentUser;

  if (!user) {
    throw new Error('User must be signed in.');
  }

  if (user.emailVerified) {
    return;
  }

  await sendEmailVerification(user);
}

export async function refreshEmailVerificationStatus() {
  const user = auth.currentUser;

  if (!user) {
    throw new Error('User must be signed in.');
  }

  await reload(user);

  return auth.currentUser?.emailVerified === true;
}

The emailVerified property indicates whether Firebase currently reports the user's email as verified. Calling reload(user) refreshes the user data from the authentication service so that the app can check an updated status after the user completes verification.

Official reference: Manage Users in Firebase Authentication.

12.2 When to Send the Verification Email

A verification email is often sent after account registration or when a user requests another message from a verification screen.

import {
  createUserWithEmailAndPassword,
  sendEmailVerification
} from 'firebase/auth';

import { auth } from '../firebase';

export async function registerAndSendVerification(email, password) {
  const credential = await createUserWithEmailAndPassword(
    auth,
    email.trim(),
    password
  );

  await sendEmailVerification(credential.user);

  return credential.user;
}

This function creates the account and then requests the verification email. If sending the email fails, the account may already have been created. Handle that partial-success case by allowing the user to sign in and request another verification email rather than assuming the account creation was rolled back.

13. Checking Email Verification Status

After a user opens the verification email, the application needs to refresh the user's authentication data to determine whether the email has been verified.

13.1 Why Refreshing the User Is Important

The user object already held in memory may contain an earlier verification state. Opening a verification link outside the app does not guarantee that every screen will automatically receive refreshed profile information immediately. Reloading the user allows the application to retrieve current account details.

13.2 Example Verification Check

import { auth } from '../firebase';
import { reload } from 'firebase/auth';

export async function checkEmailVerified() {
  const user = auth.currentUser;

  if (!user) {
    return false;
  }

  await reload(user);

  return auth.currentUser?.emailVerified === true;
}

Call this function when the user returns to the verification screen or selects Check Verification Status. The result should determine whether the application continues to show the verification prompt or makes verified-only features available.

14. Protecting Features Until Email Verification

Some applications require users to verify their email before accessing selected features. For example, an educational application might allow a new user to complete onboarding but require verification before enrolling in a course or receiving account-sensitive notifications.

14.1 Conditional Screen Flow

Application Starts
        |
        v
Check Authentication State
        |
        v
Is User Signed In?
      /   \
     No    Yes
     |      |
     v      v
 Login    Is Email Verified?
           /       \
          No        Yes
          |          |
          v          v
   Verification   Main App
      Screen

14.2 Conditional Rendering Example

function AccountGate({ user, children }) {
  if (!user) {
    return <LoginScreen />;
  }

  if (!user.emailVerified) {
    return <VerifyEmailScreen />;
  }

  return children;
}

This is a simplified interface example. In a real application, ensure that the verification status is current, handle initialization and loading states, and use navigation components appropriate to the project. Also enforce email-verification requirements on the backend for sensitive operations; client-side rendering alone does not secure an API.

15. Resending Verification Emails

Users may not receive the first verification email because of spam filtering, a typing mistake, email delivery delays, or temporary delivery issues. A resend option helps users recover without creating a second account.

15.1 Resend Workflow

1. Check whether a user is signed in.
2. Refresh the current user's information if necessary.
3. If the email is already verified, do not send an unnecessary message.
4. Otherwise, request a new verification email.
5. Show a neutral confirmation message.
6. Apply suitable cooldowns or rate limits to prevent repeated requests.

15.2 Resend Best Practices

• Disable the resend button while a request is pending.
• Use a cooldown period if repeated requests are possible.
• Do not generate multiple accounts to solve email delivery problems.
• Provide guidance to check spam and junk folders.
• Keep confirmation messages neutral and helpful.
• Handle provider rate limits and network failures.

16. Handling Verification and Reset Deep Links

Mobile applications may use deep links or universal/app links to open the correct screen when a user taps a password-reset or email-verification link. Correct configuration depends on the authentication provider, app platform, link format, and whether the action is completed in a browser or inside the application.

16.1 Deep-Link Workflow

1. The authentication service generates an action link.
2. The user opens the link from their email application.
3. The link opens the configured web handler or mobile application.
4. The handler identifies the action type, such as password reset or email verification.
5. The application validates the action code using the provider's supported API.
6. The user completes any required action.
7. The app refreshes authentication state and displays the appropriate result.

16.2 Important Configuration Considerations

• Use domains approved by the authentication provider.
• Configure Android app links and iOS universal links when needed.
• Use the correct package name, bundle identifier, and redirect configuration.
• Handle links that are expired, malformed, or intended for a different action.
• Avoid trusting arbitrary redirect URLs from untrusted input.
• Do not treat a link opening as proof that the action succeeded.

Firebase supports action-link settings that can configure continuation URLs and app handling. Follow the current Firebase documentation for the exact configuration supported by your SDK and project.

Reference: Passing State in Firebase Email Actions.

17. Understanding Common Errors

Password reset and email verification may fail because of incorrect input, expired action links, network problems, provider configuration, or rate limits. The application should help the user recover without exposing sensitive account information.

18. Error Handling in React Native

Asynchronous authentication operations should use try/catch/finally so that errors can be handled and loading states are reset reliably.

const [loading, setLoading] = useState(false);
const [error, setError] = useState('');

async function handleAction() {
  setLoading(true);
  setError('');

  try {
    await performAccountAction();
  } catch (err) {
    setError(
      'The request could not be completed. Please try again.'
    );
  } finally {
    setLoading(false);
  }
}

performAccountAction represents the relevant service function. In production, map known provider error codes to useful messages where appropriate, but avoid displaying raw stack traces, internal server details, or sensitive account information.

19. Security Best Practices

19.1 Password Reset Security

• Use the authentication provider's reset workflow rather than creating a client-only password change.
• Require a valid reset action code or recovery token before updating the password.
• Use short-lived, single-use recovery tokens in custom implementations.
• Apply rate limiting to password-reset requests.
• Use neutral confirmation messages to reduce account enumeration risks.
• Never send passwords in email messages.
• Never log reset codes, recovery tokens, or passwords.
• Enforce the password policy on the trusted provider or backend.

19.2 Email Verification Security

• Verify the email address through a provider-controlled link or code.
• Do not mark an email as verified based only on a user pressing a button.
• Refresh the user's account status after the verification action.
• Require verification on the backend when a protected operation depends on it.
• Use approved action-link domains and safe redirect handling.
• Limit repeated verification-email requests.
• Handle account changes and email updates according to the provider's verification process.

19.3 General Application Security

• Use HTTPS for all production API traffic.
• Do not store passwords in local storage or application logs.
• Protect private API endpoints with server-side authorization.
• Use appropriate secure storage for sensitive client-side credentials.
• Keep authentication dependencies updated.
• Use clear error messages without exposing internal implementation details.
• Protect account recovery flows from automated abuse.

20. Custom Backend Implementation Overview

If an application does not use Firebase Authentication, a custom backend can implement password reset and email verification. These flows require careful security design because the backend becomes responsible for generating, delivering, validating, and invalidating action tokens.

20.1 Example Password Reset API

POST /auth/password-reset/request
Content-Type: application/json

{
  "email": "[email protected]"
}

The backend should return a neutral response that does not reveal whether the account exists. If appropriate, it sends a reset link to the registered address.

20.2 Example Password Reset Completion API

POST /auth/password-reset/complete
Content-Type: application/json

{
  "token": "ONE_TIME_RESET_TOKEN",
  "newPassword": "USER_CHOSEN_PASSWORD"
}

The backend must validate the token, check expiration and single-use status, enforce password policy, securely update the password hash, and invalidate the recovery token. The token shown is a placeholder, not a real credential.

20.3 Example Email Verification API

POST /auth/email-verification/complete
Content-Type: application/json

{
  "token": "ONE_TIME_VERIFICATION_TOKEN"
}

The backend should verify that the token is valid and intended for email verification, mark the corresponding email address as verified, and invalidate the token after successful use.

20.4 Custom Backend Requirements

• Generate high-entropy, unpredictable action tokens.
• Store token hashes where appropriate instead of storing reusable raw tokens.
• Apply expiration and single-use rules.
• Rate-limit reset and verification requests.
• Use a reliable email-delivery provider.
• Prevent open redirects in email action links.
• Never store passwords in plaintext; use a suitable password-hashing algorithm on the backend.
• Record necessary security events without logging secrets.
• Revoke or invalidate sessions when required by the account-security policy after a password change.

21. Testing Password Reset Workflows

Testing should cover the complete user journey, not only whether an email request returns successfully.

21.1 Test Cases

• Submit a valid email address.
• Submit an empty email field.
• Submit a malformed email address.
• Request a reset for an address without a matching account and confirm that the UI remains neutral where enumeration protection is required.
• Open a valid reset link.
• Open an expired or invalid reset link.
• Submit a weak password.
• Submit mismatched password confirmation values.
• Complete a reset and confirm that the new password works.
• Confirm that the old password no longer works where the provider's behavior guarantees this.
• Simulate a network error or rate limit.
• Verify that loading indicators stop after success or failure.

22. Testing Email Verification Workflows

22.1 Test Cases

• Register a new account and request a verification email.
• Verify that an appropriate confirmation message is displayed.
• Open the verification link and complete the action.
• Return to the app and refresh the user's verification status.
• Confirm that verified-only features become available when expected.
• Try to access a verified-only backend endpoint without verification.
• Test a malformed or expired verification link.
• Test resending a verification email.
• Confirm that a verified user is not unnecessarily prompted to verify again.
• Test the flow when the user has been signed out or the session has expired.
• Test the workflow on supported iOS and Android devices.

23. Mini Project: Account Recovery and Verification App

Build a React Native application that supports account registration, login, password recovery, email verification, and protected account features.

23.1 Project Requirements

1. Create a registration screen with email and password fields.
2. Send a verification email after registration.
3. Create a verification screen with resend and status-check actions.
4. Create a Forgot Password screen.
5. Connect password-reset requests to Firebase Authentication or a custom backend.
6. Support a secure password-reset completion flow through the configured action handler.
7. Display loading indicators and user-friendly error messages.
8. Refresh account data after the user completes email verification.
9. Require verification before selected sensitive features.
10. Protect backend endpoints independently of client-side navigation.
11. Test valid, invalid, expired, and repeated-action scenarios.
12. Document the setup and testing steps for the application.

23.2 Expected Outcome

The finished application should allow users to recover forgotten passwords and confirm their email addresses through a trusted authentication process. It should handle action-link failures gracefully, display current verification status, and protect any operations that require a verified account.

24. Interview Questions and Answers

Q1. What is password reset?

Answer: Password reset is an account-recovery process that lets a user set a new password after successfully completing an approved recovery action.

Q2. What is email verification?

Answer: Email verification confirms that a user can access the email address associated with an account by completing a provider-controlled verification action.

Q3. What is the purpose of the Forgot Password screen?

Answer: It collects the user's email address and requests a password-reset message from the authentication provider or backend.

Q4. What does Firebase's sendPasswordResetEmail method do?

Answer: It requests that Firebase send a password-reset email. The user must still complete the reset action before the password changes.

Q5. What does sendEmailVerification do?

Answer: It requests a verification email for the currently authenticated Firebase user.

Q6. Why should the user data be refreshed after verification?

Answer: The in-memory user object may contain an earlier verification status. Refreshing retrieves current account information from the authentication service.

Q7. Why should password-reset messages be neutral?

Answer: Neutral messages help reduce account enumeration by avoiding unnecessary disclosure of whether a specific email address has an account.

Q8. What happens when a reset link expires?

Answer: The authentication provider rejects the expired action code. The user should be guided to request a new reset link.

Q9. Can the app mark an email as verified when the user presses a button?

Answer: No. Verification must be confirmed by the authentication provider or trusted backend after the user completes the required action.

Q10. How can React Native restrict unverified users?

Answer: The app can conditionally display screens based on the refreshed verification status. The backend must also enforce verification requirements for protected operations.

Q11. What is a one-time action token?

Answer: It is an unpredictable token intended for a specific action, such as resetting a password or verifying an email, that should expire and become invalid after use.

Q12. Why should raw authentication errors not always be shown to users?

Answer: Raw errors may expose implementation details or sensitive account information. The app should display helpful messages while logging only safe diagnostic information.

25. Quick Revision Checklist

• Understand password reset and email verification workflows.
• Configure the authentication provider and email templates.
• Create a Forgot Password screen with validation.
• Send reset requests through the authentication service.
• Validate reset action codes before changing passwords.
• Apply the provider's password policy.
• Send verification emails after registration or when requested.
• Refresh user data before checking verification status.
• Offer a resend option with suitable rate limits.
• Handle expired, invalid, or already-used links.
• Protect verified-only operations on the backend.
• Use neutral account-recovery messages when appropriate.
• Test complete workflows on supported devices.

26. Conclusion

Password reset and email verification are essential account-management features for many React Native applications. Password reset provides a secure path for users who forget their credentials, while email verification helps confirm access to the registered email address.

A reliable implementation combines clear mobile interfaces, provider-managed action links, secure password policies, refreshed account status, appropriate error handling, and backend authorization. Using Firebase Authentication can simplify many of these operations, while custom backend implementations require careful handling of tokens, expiration, rate limits, and account updates.

Course Resource: Explore React Native Training at JustAcademy

Demo Registration: Register for a Course Demo

Firebase Authentication: Official Firebase Authentication Documentation

Firebase User Management: Manage Users, Password Reset, and Verification

React Native Firebase: Authentication Usage Guide

JustAcademy Website: Visit JustAcademy