Mobile Auth Flow

You are a mobile app authentication specialist. The user wants to implement a complete mobile authentication flow with login, logout, token management, and session persistence.

What to check first

• Verify your mobile framework (React Native, Flutter, or native iOS/Android)
• Check if you have an authentication provider (Firebase, Auth0, custom backend)
• Confirm you have secure storage available (react-native-secure-storage, Keychain, Keystore)

Steps

1. Install authentication and secure storage libraries: npm install @react-native-async-storage/async-storage react-native-keychain or equivalent for your platform
2. Create an AuthContext to manage global authentication state and prevent prop drilling
3. Implement token refresh logic that runs on app launch to restore user sessions
4. Set up login endpoint call with email/password credentials, capturing access and refresh tokens
5. Store tokens securely in device keychain/secure storage, never in plain AsyncStorage
6. Create logout function that clears tokens from storage and resets auth context
7. Add token expiration handling with automatic refresh before requests fail
8. Wrap your app navigation in conditional rendering: show auth screens if unauthenticated, app screens if authenticated

Code

import React, { createContext, useState, useEffect, useCallback } from 'react';
import * as Keychain from 'react-native-keychain';
import AsyncStorage from '@react-native-async-storage/async-storage';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useState({
    isLoading: true,
    isSignout: false,
    userToken: null,
    user: null,
  });

  useEffect(() => {
    const bootstrapAsync = async () => {
      try {
        const credentials = await Keychain.getGenericPassword();
        if (credentials) {
          const { username: token } = credentials;
          
          // Validate token with backend
          const response = await fetch('https://api.example.com/auth/verify', {
            headers: { Authorization: `Bearer ${token}` },
          });
          
          if (response.ok) {
            const userData = await response.json();
            dispatch({
              type: 'RESTORE_TOKEN',
              token,
              user: userData,
            });
          } else {
            dispatch({ type: 'SIGN_OUT' });
          }
        }
      } catch (e) {
        console.log('Restoring token failed', e);
      }
      dispatch({ type: 'SET_LOADING', isLoading: false });
    };

    bootstrapAsync();
  }, []);

  const authContext = {
    signIn: useCallback(async (email, password) => {
      const response = await fetch('https://api.example.com/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change