expo-auth-session & 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",
});
 
// Examples by environment:
// Dev client / standalone:  myapp://oauth
// Expo Go (proxy):          https://auth.expo.io/@owner/slug  (legacy - avoid for production)
 
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="Sign in"
        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
 
┌─────────────────┬──────────────────────────────────────────────┐
│ Client type     │ Used for                                     │
├─────────────────┼──────────────────────────────────────────────┤
│ iOS             │ Bundle ID: com.example.myapp                 │
│ Android         │ Package + SHA-1 signing cert fingerprint     │
│ Web             │ Backend code exchange (client secret)        │
└─────────────────┴──────────────────────────────────────────────┘

// Use the iOS or Android client ID in the app - NOT the web client secret
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,
);

Before shipping OAuth:
□ redirectUri logged and registered for prod scheme (myapp://)
□ Google Android SHA-1 matches EAS production keystore
□ Apple Sign In entitlement present in provisioning profile
□ Backend validates code_verifier (PKCE)
□ Refresh tokens stored in SecureStore - not AsyncStorage
□ Tested on physical device with development build - not only Expo Go
□ OAuth tested after app kill + relaunch (cold start refresh)