Fundamentos de autenticación móvil

npx create-expo-app@latest AuthBasics --template blank-typescript
cd AuthBasics
npx expo install expo-secure-store expo-auth-session expo-crypto

{
  "dependencies": {
    "expo": "~57.0.4",
    "react": "19.2.3",
    "react-native": "0.86.0"
  }
}

┌─────────────────────────────────────────────────────────────────┐
│ Modelo             │ Token de acceso │ Actualización│ Sesión servidor│
├────────────────────┼─────────────────┼──────────────┼────────────────┤
│ JWT + actualización│ JWT corto       │ Rotando      │ sid opcional   │
│ Bearer opaco       │ Token opaco     │ Rotando      │ Requerido      │
│ Cookie (rara RN)   │ HttpOnly*       │ HttpOnly     │ Requerido      │
└─────────────────────────────────────────────────────────────────┘
* Las cookies HttpOnly son incómodas en RN - prefiere encabezado Authorization + secure store.

// src/features/auth/model/session.ts
export type Session = {
  accessToken: string;
  refreshToken: string;
  expiresAt: number; // epoch ms - pista del cliente solamente; servidor valida
  userId: string;
};

// src/shared/api/createApiClient.ts
type ApiClientOptions = {
  getAccessToken: () => Promise<string | null>;
};
 
export function createApiClient({ getAccessToken }: ApiClientOptions) {
  return async function apiFetch(path: string, init: RequestInit = {}) {
    const token = await getAccessToken();
    const headers = new Headers(init.headers);
 
    if (token) {
      headers.set("Authorization", `Bearer ${token}`);
    }
 
    return fetch(`${process.env.EXPO_PUBLIC_API_URL}${path}`, {
      ...init,
      headers,
    });
  };
}

┌──────────────────┬────────────────────────────────────────────────┐
│ Almacenar        │ Apropiado para                                 │
├──────────────────┼────────────────────────────────────────────────┤
│ Estado React     │ Acceso en memoria token de acceso durante sesión activa   │
│ expo-secure-store│ Tokens de actualización, secretos de larga duración             │
│ AsyncStorage     │ Tema, banderas de incorporación, preferencias no sensibles   │
│ MMKV (cifrado)   │ Cachés grandes - no es sustituto de Keychain   │
│ expo-file-system │ Archivos, medios - nunca tokens sin procesar                │
└──────────────────┴────────────────────────────────────────────────┘

import * as SecureStore from "expo-secure-store";
 
const REFRESH_KEY = "auth.refresh_token";
 
export async function saveRefreshToken(token: string) {
  await SecureStore.setItemAsync(REFRESH_KEY, token, {
    keychainAccessible: SecureStore.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
  });
}
 
export async function loadRefreshToken() {
  return SecureStore.getItemAsync(REFRESH_KEY);
}

// src/features/auth/AuthProvider.tsx
import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
import * as SecureStore from "expo-secure-store";
import type { Session } from "./model/session";
 
type AuthContextValue = {
  session: Session | null;
  bootstrapping: boolean;
};
 
const AuthContext = createContext<AuthContextValue>({ session: null, bootstrapping: true });
 
async function refreshFromStoredToken(): Promise<Session | null> {
  const refreshToken = await SecureStore.getItemAsync("auth.refresh_token");
  if (!refreshToken) return null;
 
  const res = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/auth/refresh`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ refreshToken }),
  });
 
  if (!res.ok) return null;
  return res.json() as Promise<Session>;
}
 
export function AuthProvider({ children }: { children: ReactNode }) {
  const [session, setSession] = useState<Session | null>(null);
  const [bootstrapping, setBootstrapping] = useState(true);
 
  useEffect(() => {
    refreshFromStoredToken()
      .then(setSession)
      .finally(() => setBootstrapping(false));
  }, []);
 
  return (
    <AuthContext.Provider value={{ session, bootstrapping }}>
      {children}
    </AuthContext.Provider>
  );
}
 
export function useAuth() {
  return useContext(AuthContext);
}

// src/features/auth/api/signInWithPassword.ts
import * as SecureStore from "expo-secure-store";
import type { Session } from "../model/session";
 
export async function signInWithPassword(email: string, password: string): Promise<Session> {
  const res = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/auth/login`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  });
 
  if (!res.ok) {
    throw new Error("Credenciales inválidas");
  }
 
  const session = (await res.json()) as Session;
 
  await SecureStore.setItemAsync("auth.refresh_token", session.refreshToken, {
    keychainAccessible: SecureStore.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
  });
 
  return session;
}

// src/features/auth/api/signOutLocal.ts
import * as SecureStore from "expo-secure-store";
 
const AUTH_KEYS = ["auth.refresh_token", "auth.device_binding_id"] as const;
 
export async function signOutLocal() {
  await Promise.all(AUTH_KEYS.map((key) => SecureStore.deleteItemAsync(key)));
}

// En tu pantalla de configuración
import { useAuth } from "../AuthProvider";
import { signOutLocal } from "../api/signOutLocal";
 
async function handleSignOut() {
  await signOutLocal();
  setSession(null); // del setter de estado del proveedor de autenticación expuesto via contexto
  router.replace("/sign-in");
}

// src/features/auth/api/signOutEverywhere.ts
import * as SecureStore from "expo-secure-store";
 
export async function signOutEverywhere(accessToken: string) {
  await fetch(`${process.env.EXPO_PUBLIC_API_URL}/auth/revoke-all`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Content-Type": "application/json",
    },
  });
 
  await SecureStore.deleteItemAsync("auth.refresh_token");
}

// src/features/auth/model/authState.ts
export type AuthState =
  | { status: "bootstrapping" }
  | { status: "unauthenticated" }
  | { status: "authenticated"; session: Session }
  | { status: "session_expired" };

// app/_layout.tsx (Expo Router)
import { Redirect, Stack } from "expo-router";
import { useAuth } from "@/features/auth/AuthProvider";
 
export default function RootLayout() {
  const { authState } = useAuth();
 
  if (authState.status === "bootstrapping") {
    return null; // o <SplashScreen />
  }
 
  if (authState.status === "unauthenticated" || authState.status === "session_expired") {
    return <Redirect href="/sign-in" />;
  }
 
  return <Stack screenOptions={{ headerShown: false }} />;
}

// src/features/auth/model/mapOAuthToSession.ts
import type { Session } from "./session";
 
type OAuthTokenResponse = {
  access_token: string;
  refresh_token: string;
  expires_in: number;
  user: { id: string };
};
 
export function mapOAuthToSession(payload: OAuthTokenResponse): Session {
  return {
    accessToken: payload.access_token,
    refreshToken: payload.refresh_token,
    expiresAt: Date.now() + payload.expires_in * 1000,
    userId: payload.user.id,
  };
}

// src/shared/api/authenticatedFetch.ts
let refreshPromise: Promise<Session | null> | null = null;
 
export function createAuthenticatedFetch(
  getSession: () => Session | null,
  setSession: (s: Session | null) => void,
  refreshSession: () => Promise<Session | null>,
) {
  return async function authenticatedFetch(path: string, init?: RequestInit) {
    const session = getSession();
    const headers = new Headers(init?.headers);
 
    if (session?.accessToken) {
      headers.set("Authorization", `Bearer ${session.accessToken}`);
    }
 
    let response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}${path}`, {
      ...init,
      headers,
    });
 
    if (response.status !== 401) return response;
 
    refreshPromise ??= refreshSession().finally(() => {
      refreshPromise = null;
    });
 
    const refreshed = await refreshPromise;
    if (!refreshed) return response;
 
    setSession(refreshed);
    headers.set("Authorization", `Bearer ${refreshed.accessToken}`);
 
    return fetch(`${process.env.EXPO_PUBLIC_API_URL}${path}`, { ...init, headers });
  };
}