- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 | - - -1x - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - | import { View, Text, StyleSheet } from 'react-native';
-
-export default function AboutScreen() {
- return (
- <View style={styles.container}>
- <Text style={styles.title}>About</Text>
- <Text style={styles.text}>
- Built with Expo + Expo Router.
- </Text>
- <Text style={styles.text}>
- CI/CD powered by GitHub Actions + EAS Build.
- </Text>
- </View>
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- padding: 24,
- backgroundColor: '#fff',
- },
- title: {
- fontSize: 28,
- fontWeight: 'bold',
- color: '#4630EB',
- marginBottom: 16,
- },
- text: {
- fontSize: 16,
- color: '#666',
- textAlign: 'center',
- marginBottom: 8,
- },
-});
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| about.js | -
-
- |
- 100% | -2/2 | -100% | -0/0 | -100% | -1/1 | -100% | -2/2 | -
| index.js | -
-
- |
- 100% | -3/3 | -50% | -1/2 | -100% | -1/1 | -100% | -3/3 | -
| profile.js | -
-
- |
- 100% | -3/3 | -50% | -3/6 | -100% | -1/1 | -100% | -3/3 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 | - - - - -1x - -1x - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { View, Text, StyleSheet, Pressable } from 'react-native';
-import { Link } from 'expo-router';
-import { useAuth } from '../../lib/auth-context';
-
-export default function HomeScreen() {
- const { user } = useAuth();
-
- return (
- <View style={styles.container}>
- <Text style={styles.title}>My App</Text>
- <Text style={styles.subtitle}>
- {user?.name ? `Hi, ${user.name}` : 'Get Started'}
- </Text>
- <Text style={styles.description}>
- Edit <Text style={styles.code}>app/(app)/index.js</Text> to start building.
- </Text>
- <View style={styles.row}>
- <Link href="/about" asChild>
- <Pressable style={styles.button}>
- <Text style={styles.buttonText}>About</Text>
- </Pressable>
- </Link>
- <Link href="/profile" asChild>
- <Pressable style={[styles.button, styles.buttonSecondary]}>
- <Text style={styles.buttonText}>Profile</Text>
- </Pressable>
- </Link>
- </View>
- </View>
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- padding: 24,
- backgroundColor: '#fff',
- },
- title: {
- fontSize: 32,
- fontWeight: 'bold',
- color: '#4630EB',
- marginBottom: 8,
- },
- subtitle: {
- fontSize: 20,
- color: '#666',
- marginBottom: 16,
- },
- description: {
- fontSize: 16,
- color: '#999',
- textAlign: 'center',
- marginBottom: 32,
- },
- code: {
- fontFamily: 'monospace',
- backgroundColor: '#f0f0f0',
- color: '#333',
- },
- row: {
- flexDirection: 'row',
- gap: 12,
- },
- button: {
- backgroundColor: '#4630EB',
- paddingHorizontal: 24,
- paddingVertical: 12,
- borderRadius: 8,
- },
- buttonSecondary: {
- backgroundColor: '#6B5BE6',
- },
- buttonText: {
- color: '#fff',
- fontSize: 16,
- fontWeight: '600',
- },
-});
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 | - - - -1x - -1x - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { View, Text, StyleSheet, Pressable, Image } from 'react-native';
-import { useAuth } from '../../lib/auth-context';
-
-export default function ProfileScreen() {
- const { user, signOut } = useAuth();
-
- return (
- <View style={styles.container}>
- {user?.picture ? (
- <Image source={{ uri: user.picture }} style={styles.avatar} />
- ) : (
- <View style={[styles.avatar, styles.avatarFallback]} />
- )}
- <Text style={styles.name}>{user?.name ?? 'Signed in'}</Text>
- {user?.email ? <Text style={styles.email}>{user.email}</Text> : null}
- <Pressable style={styles.button} onPress={signOut}>
- <Text style={styles.buttonText}>Sign out</Text>
- </Pressable>
- </View>
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- padding: 24,
- backgroundColor: '#fff',
- },
- avatar: {
- width: 96,
- height: 96,
- borderRadius: 48,
- marginBottom: 16,
- },
- avatarFallback: {
- backgroundColor: '#e0e0e0',
- },
- name: {
- fontSize: 22,
- fontWeight: '700',
- color: '#222',
- marginBottom: 4,
- },
- email: {
- fontSize: 15,
- color: '#666',
- marginBottom: 32,
- },
- button: {
- backgroundColor: '#d1372b',
- paddingHorizontal: 24,
- paddingVertical: 12,
- borderRadius: 8,
- },
- buttonText: {
- color: '#fff',
- fontSize: 16,
- fontWeight: '600',
- },
-});
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 | - - - - - - - - - - - - - - -1x - -1x - -1x - - - - - - - - - - - - - - -8x -7x -7x -6x - -6x -6x - - -6x - - -5x - -1x - - - - -2x -2x - - - - - - - - - -1x - - - - - - - - - - - -2x -2x -2x -2x -2x -2x -2x - - - - - - - - - - -4x - -4x -4x - -2x - -2x -2x -2x -2x -2x -2x -2x - -2x -1x - - - - - -9x -9x -9x - - - - -9x - - - - - - - - -9x -3x -3x -3x -3x -3x -2x -2x -2x - - - - - - - - - - -3x - - -3x -3x - - - - -9x -3x - - - -9x - - - - - - - - - - - - - - -9x -1x -1x - - -9x -9x - - - - - - - - - - -9x - - - -9x - - | import {
- createContext,
- useCallback,
- useContext,
- useEffect,
- useMemo,
- useState,
-} from 'react';
-import * as SecureStore from 'expo-secure-store';
-import * as WebBrowser from 'expo-web-browser';
-import * as Google from 'expo-auth-session/providers/google';
-import { assertGoogleEnv, googleClientIds } from './env';
-
-// Required on web + some managed flows: completes the auth popup when the
-// redirect lands back in the app. No-op on native. Safe to call at module load.
-WebBrowser.maybeCompleteAuthSession();
-
-export const STORAGE_KEY = 'auth.session.v1';
-
-const AuthContext = createContext({
- user: null,
- loading: true,
- error: null,
- signIn: async () => {},
- signOut: async () => {},
-});
-
-/**
- * Decode a JWT payload WITHOUT verifying the signature.
- * Safe here because `id_token` came from Google over TLS via expo-auth-session's
- * PKCE flow — we only read the public claims (email, name, picture).
- * Never trust this output for authorization on a server; verify on the backend.
- */
-export function decodeIdToken(idToken) {
- if (typeof idToken !== 'string') return null;
- const parts = idToken.split('.');
- if (parts.length !== 3) return null;
- try {
- // base64url -> base64
- const b64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
- const padded = b64 + '='.repeat((4 - (b64.length % 4)) % 4);
- // `atob` is available in Hermes/React Native and Node >= 16.
- const json =
- typeof atob === 'function'
- ? atob(padded)
- : Buffer.from(padded, 'base64').toString('utf8');
- return JSON.parse(json);
- } catch {
- return null;
- }
-}
-
-function userFromClaims(claims) {
- Iif (!claims) return null;
- return {
- email: claims.email ?? null,
- name: claims.name ?? null,
- picture: claims.picture ?? null,
- sub: claims.sub ?? null,
- };
-}
-
-// Google's documented `iss` values. Anything else means we're rehydrating
-// a token from a different IdP — not what this starter assumes.
-const ALLOWED_ISSUERS = new Set([
- 'https://accounts.google.com',
- 'accounts.google.com',
-]);
-
-/**
- * Reject sessions whose id_token has expired or wasn't issued by Google.
- * The token came from Google over TLS via PKCE, so this isn't a server-grade
- * check — it's the *client*'s self-defense against a stolen device replaying
- * an old SecureStore blob. Returns true when the session should be honoured.
- */
-export function isSessionStillValid(session, now = Date.now()) {
- const idToken = session?.tokens?.idToken;
- Iif (!idToken) return false;
- const claims = decodeIdToken(idToken);
- Iif (!claims) return false;
- Iif (typeof claims.exp !== 'number' || claims.exp * 1000 <= now) return false;
- Iif (claims.iss && !ALLOWED_ISSUERS.has(claims.iss)) return false;
- return true;
-}
-
-/**
- * Pure post-auth handler. Exported so tests can cover the result -> user pipeline
- * without mocking `useAuthRequest` internals.
- *
- * `setSession` receives `{ user, tokens }` on success, `null` on dismissal, or
- * throws on error.
- */
-export async function handleAuthResult(response, setSession, deps = {}) {
- const store = deps.store ?? SecureStore;
-
- Iif (!response) return;
- if (response.type === 'success') {
- const idToken =
- response.params?.id_token ?? response.authentication?.idToken ?? null;
- const accessToken =
- response.authentication?.accessToken ?? response.params?.access_token ?? null;
- const claims = decodeIdToken(idToken);
- const user = userFromClaims(claims);
- const session = { user, tokens: { idToken, accessToken } };
- await store.setItemAsync(STORAGE_KEY, JSON.stringify(session));
- setSession(session);
- return;
- }
- if (response.type === 'error') {
- throw response.error ?? new Error('Google sign-in failed.');
- }
- // `dismiss` / `cancel` -> no-op
-}
-
-export function AuthProvider({ children }) {
- const [session, setSession] = useState(null);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
-
- // `useAuthRequest` returns [request, response, promptAsync].
- // We build the config lazily and guard on env at signIn time so tests / dev
- // without client IDs don't crash at import.
- const [request, response, promptAsync] = Google.useAuthRequest({
- clientId: googleClientIds.webClientId,
- iosClientId: googleClientIds.iosClientId,
- androidClientId: googleClientIds.androidClientId,
- webClientId: googleClientIds.webClientId,
- scopes: ['openid', 'profile', 'email'],
- });
-
- // Restore from SecureStore on mount.
- useEffect(() => {
- let cancelled = false;
- (async () => {
- try {
- const raw = await SecureStore.getItemAsync(STORAGE_KEY);
- if (!cancelled && raw) {
- const parsed = JSON.parse(raw);
- if (isSessionStillValid(parsed)) {
- setSession(parsed);
- } else E{
- // Token expired or issuer mismatch — clear the blob so a fresh
- // sign-in is forced. Without this, an expired token persists
- // and the UI treats the user as signed in indefinitely.
- await SecureStore.deleteItemAsync(STORAGE_KEY);
- }
- }
- } catch {
- // corrupt blob -> treat as signed out
- } finally {
- Eif (!cancelled) setLoading(false);
- }
- })();
- return () => {
- cancelled = true;
- };
- }, []);
-
- // React to the auth response.
- useEffect(() => {
- Eif (!response) return;
- handleAuthResult(response, setSession).catch((e) => setError(e));
- }, [response]);
-
- const signIn = useCallback(async () => {
- setError(null);
- try {
- assertGoogleEnv();
- if (!request) {
- // `useAuthRequest` not ready yet — retry shortly.
- throw new Error('Auth request not ready. Try again in a moment.');
- }
- await promptAsync();
- } catch (e) {
- setError(e);
- throw e;
- }
- }, [request, promptAsync]);
-
- const signOut = useCallback(async () => {
- await SecureStore.deleteItemAsync(STORAGE_KEY);
- setSession(null);
- }, []);
-
- const value = useMemo(
- () => ({
- user: session?.user ?? null,
- tokens: session?.tokens ?? null,
- loading,
- error,
- signIn,
- signOut,
- }),
- [session, loading, error, signIn, signOut],
- );
-
- return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-}
-
-export function useAuth() {
- return useContext(AuthContext);
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 | - - - - - -1x -1x -1x - -1x - - - - - - - - - - - - - - - - - - - - | // Read-once env config for Google OAuth.
-//
-// Expo SDK 52 inlines `EXPO_PUBLIC_*` vars from `.env` into the bundle at build time,
-// so `process.env.EXPO_PUBLIC_FOO` works on device. Missing vars here surface a clear
-// error at the point of use (sign-in), not a cryptic OAuth failure later.
-
-const WEB = process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID;
-const IOS = process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID;
-const ANDROID = process.env.EXPO_PUBLIC_GOOGLE_ANDROID_CLIENT_ID;
-
-export const googleClientIds = {
- webClientId: WEB,
- iosClientId: IOS,
- androidClientId: ANDROID,
-};
-
-/**
- * Throw if the web client ID is missing. The web client ID is the minimum
- * required for Expo AuthSession proxy dev flow; native IDs are only needed
- * for standalone production builds.
- */
-export function assertGoogleEnv() {
- if (!WEB) {
- throw new Error(
- 'Missing EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID. ' +
- 'Create OAuth client IDs in Google Cloud Console and add them to .env. ' +
- 'See .env.example and README "Auth" section.',
- );
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| auth-context.js | -
-
- |
- 79.26% | -65/82 | -66.12% | -41/62 | -75% | -12/16 | -85.91% | -61/71 | -
| env.js | -
-
- |
- 66.66% | -4/6 | -0% | -0/2 | -0% | -0/1 | -66.66% | -4/6 | -