expo-auth-session y OAuth

npx expo install expo-auth-session expo-crypto expo-web-browser

// app.config.ts
export default {
  expo: {
    name: "MyApp",
    slug: "my-app",
    scheme: "myapp",
    ios: { bundleIdentifier: "com.example.myapp" },
    android: { package: "com.example.myapp" },
  },
};

import * as Crypto from "expo-crypto";
 
function base64UrlEncode(bytes: Uint8Array) {
  const base64 = btoa(String.fromCharCode(...bytes));
  return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}
 
export async function createPkcePair() {
  const verifierBytes = await Crypto.getRandomBytesAsync(32);
  const codeVerifier = base64UrlEncode(verifierBytes);
 
  const digest = await Crypto.digestStringAsync(
    Crypto.CryptoDigestAlgorithm.SHA256,
    codeVerifier,
    { encoding: Crypto.CryptoEncoding.BASE64 },
  );
 
  const codeChallenge = digest
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=+$/, "");
 
  return { codeVerifier, codeChallenge };
}

import { makeRedirectUri } from "expo-auth-session";
import * as AuthSession from "expo-auth-session";
 
const redirectUri = makeRedirectUri({
  scheme: "myapp",
  path: "oauth",
});
 
// Ejemplos por entorno:
// Cliente dev / standalone:  myapp://oauth
// Expo Go (proxy):          https://auth.expo.io/@owner/slug  (legado - evitar para producción)
 
const discovery = {
  authorizationEndpoint: "https://accounts.example.com/oauth/authorize",
  tokenEndpoint: "https://accounts.example.com/oauth/token",
};
 
const [request, response, promptAsync] = AuthSession.useAuthRequest(
  {
    clientId: process.env.EXPO_PUBLIC_OAUTH_CLIENT_ID!,
    redirectUri,
    scopes: ["openid", "profile", "email"],
    usePKCE: true,
    responseType: AuthSession.ResponseType.Code,
  },
  discovery,
);

import { useEffect } from "react";
import { Button, Text, View } from "react-native";
import * as AuthSession from "expo-auth-session";
import { makeRedirectUri } from "expo-auth-session";
import * as WebBrowser from "expo-web-browser";
import * as SecureStore from "expo-secure-store";
 
WebBrowser.maybeCompleteAuthSession();
 
const redirectUri = makeRedirectUri({ scheme: "myapp", path: "oauth" });
 
const discovery: AuthSession.DiscoveryDocument = {
  authorizationEndpoint: `${process.env.EXPO_PUBLIC_API_URL}/oauth/authorize`,
  tokenEndpoint: `${process.env.EXPO_PUBLIC_API_URL}/oauth/token`,
};
 
export function OAuthSignInButton() {
  const [request, response, promptAsync] = AuthSession.useAuthRequest(
    {
      clientId: process.env.EXPO_PUBLIC_OAUTH_CLIENT_ID!,
      redirectUri,
      scopes: ["openid", "profile", "email"],
      usePKCE: true,
    },
    discovery,
  );
 
  useEffect(() => {
    if (response?.type !== "success") return;
 
    const { code } = response.params;
    exchangeCodeOnBackend(code, request?.codeVerifier);
  }, [response]);
 
  return (
    <View>
      <Button
        title="Iniciar sesión"
        disabled={!request}
        onPress={() => promptAsync({ preferEphemeralSession: true })}
      />
    </View>
  );
}
 
async function exchangeCodeOnBackend(code: string, codeVerifier?: string) {
  const res = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/auth/oauth/callback`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ code, codeVerifier, redirectUri }),
  });
 
  if (!res.ok) throw new Error("OAuth exchange failed");
 
  const { refreshToken, accessToken, expiresAt, userId } = await res.json();
 
  await SecureStore.setItemAsync("auth.refresh_token", refreshToken, {
    keychainAccessible: SecureStore.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
  });
 
  // Hydrate AuthProvider session state with { accessToken, refreshToken, expiresAt, userId }
}

Google Cloud Console - APIs & Services - Credentials
 
┌─────────────────┬──────────────────────────────────────────────┐
│ Tipo de cliente │ Usado para                                   │
├─────────────────┼──────────────────────────────────────────────┤
│ iOS             │ Bundle ID: com.example.myapp                 │
│ Android         │ Package + huella dactilar de cert de firma   │
│ Web             │ Intercambio de código backend (secreto)      │
└─────────────────┴──────────────────────────────────────────────┘

// Usa el ID de cliente de iOS o Android en la aplicación - NO el secreto de cliente web
const GOOGLE_CLIENT_ID = Platform.select({
  ios: process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID,
  android: process.env.EXPO_PUBLIC_GOOGLE_ANDROID_CLIENT_ID,
  default: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID,
});

{
  "expo": {
    "ios": {
      "usesAppleSignIn": true,
      "bundleIdentifier": "com.example.myapp"
    },
    "plugins": ["expo-apple-authentication"]
  }
}

npx expo install expo-apple-authentication

import * as AppleAuthentication from "expo-apple-authentication";
import { Platform } from "react-native";
 
export function AppleSignInButton() {
  if (Platform.OS !== "ios") return null;
 
  return (
    <AppleAuthentication.AppleAuthenticationButton
      buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
      buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
      cornerRadius={8}
      style={{ width: "100%", height: 44 }}
      onPress={async () => {
        const credential = await AppleAuthentication.signInAsync({
          requestedScopes: [
            AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
            AppleAuthentication.AppleAuthenticationScope.EMAIL,
          ],
        });
 
        await sendAppleCredentialToBackend(credential);
      }}
    />
  );
}

import * as AuthSession from "expo-auth-session";
 
const discovery = await AuthSession.fetchDiscoveryAsync(
  "https://your-tenant.auth0.com",
);
 
const [request, response, promptAsync] = AuthSession.useAuthRequest(
  {
    clientId: process.env.EXPO_PUBLIC_AUTH0_CLIENT_ID!,
    redirectUri: makeRedirectUri({ scheme: "myapp" }),
    scopes: ["openid", "profile", "offline_access"],
    usePKCE: true,
    extraParams: { audience: "https://api.example.com" },
  },
  discovery,
);

Antes de enviar OAuth:
□ redirectUri registrado para esquema de producción (myapp://)
□ SHA-1 de Android de Google coincide con keystore de producción de EAS
□ Entitlement de Apple Sign In presente en perfil de aprovisionamiento
□ Backend valida code_verifier (PKCE)
□ Tokens de actualización almacenados en SecureStore - no AsyncStorage
□ Probado en dispositivo físico con compilación de desarrollo - no solo Expo Go
□ OAuth probado después de cierre + relanzamiento de aplicación (inicio en frío con actualización)