Add authentication with token rotation and App Links

- Login screen using GraphQL mutation against the post-overhaul auth API
  (accessToken + refreshToken + expiresAt).
- Token store backed by EncryptedSharedPreferences via
  react-native-encrypted-storage; survives app restarts.
- Apollo auth link attaches Bearer access token, proactively refreshes
  within 60s of expiry, single-flight mutex on renewal so concurrent
  requests don't trip TOKEN_REUSE_DETECTED.
- Apollo error link branches on extensions.code: refresh + replay on
  TOKEN_EXPIRED/UNAUTHENTICATED, clear tokens on REVOKED/INVALID/
  UNCONFIRMED, raise a security warning on REUSE_DETECTED.
- Logout calls the server with the refresh token before clearing local
  tokens and the Apollo cache.
- App Links: manifest intent filters for /users/confirm/* and
  /users/reset_password/*, plus a JS-side deep link receiver that
  captures the token into a reactive var for future confirm/reset
  screens to consume.
- Fix dev API: localhost -> 10.0.2.2 (emulator's host loopback),
  path /api/graphql -> /graphql/v1.
- Drop stale ping.graphql (referenced a removed schema field).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dfalling

App.tsx

@@ -1,18 +1,29 @@
 /**
- * Sample React Native App
- * https://github.com/facebook/react-native
+ * Culpeos React Native app entry.
  *
  * @format
  */
 
 import {ApolloProvider} from '@apollo/client';
 import {NewAppScreen} from '@react-native/new-app-screen';
-import {StatusBar, StyleSheet, useColorScheme, View} from 'react-native';
+import {useEffect} from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
 import {
   SafeAreaProvider,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
-import {apolloClient} from './src/graphql/client';
+import {apolloClient, logout} from './src/auth/authClient';
+import {useDeepLinkListener} from './src/auth/deepLinks';
+import {LoginScreen} from './src/auth/LoginScreen';
+import {tokenStore, useAuth, useAuthHydrated} from './src/auth/tokenStore';
 
 function App() {
   const isDarkMode = useColorScheme() === 'dark';
@@ -28,14 +39,49 @@ function App() {
 }
 
 function AppContent() {
+  const hydrated = useAuthHydrated();
+  const auth = useAuth();
   const safeAreaInsets = useSafeAreaInsets();
 
+  useDeepLinkListener();
+
+  useEffect(() => {
+    tokenStore.hydrate();
+  }, []);
+
+  if (!hydrated) {
+    return (
+      <View style={[styles.container, styles.splash]}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  if (!auth) {
+    return <LoginScreen />;
+  }
+
   return (
     <View style={styles.container}>
       <NewAppScreen
         templateFileName="App.tsx"
         safeAreaInsets={safeAreaInsets}
       />
+      <View
+        style={[styles.logoutBar, {paddingBottom: safeAreaInsets.bottom + 12}]}>
+        <Text style={styles.signedInAs}>Signed in as {auth.user.email}</Text>
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => {
+            logout();
+          }}
+          style={({pressed}) => [
+            styles.logoutButton,
+            pressed && styles.logoutPressed,
+          ]}>
+          <Text style={styles.logoutText}>Log out</Text>
+        </Pressable>
+      </View>
     </View>
   );
 }
@@ -44,6 +90,41 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  splash: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logoutBar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    backgroundColor: 'rgba(255,255,255,0.95)',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#ccc',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  signedInAs: {
+    fontSize: 12,
+    color: '#444',
+    flex: 1,
+    marginRight: 12,
+  },
+  logoutButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 6,
+    backgroundColor: '#eee',
+  },
+  logoutPressed: {opacity: 0.7},
+  logoutText: {
+    fontSize: 14,
+    color: '#222',
+  },
 });
 
 export default App;

android/app/src/main/AndroidManifest.xml

@@ -22,6 +22,20 @@
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
+        <!-- App Links: open culpeos.com confirm/reset emails in this app.
+             Requires /.well-known/assetlinks.json on the server to list the
+             signing keystore's SHA-256 fingerprint for com.culpeos.app. -->
+        <intent-filter android:autoVerify="true">
+            <action android:name="android.intent.action.VIEW" />
+            <category android:name="android.intent.category.DEFAULT" />
+            <category android:name="android.intent.category.BROWSABLE" />
+            <data android:scheme="https"
+                  android:host="www.culpeos.com"
+                  android:pathPrefix="/users/confirm/" />
+            <data android:scheme="https"
+                  android:host="www.culpeos.com"
+                  android:pathPrefix="/users/reset_password/" />
+        </intent-filter>
       </activity>
     </application>
 </manifest>

bun.lock

@@ -12,12 +12,13 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
+    "@apollo/client": "^3.11.0",
+    "@react-native/new-app-screen": "0.85.3",
+    "graphql": "^16.9.0",
     "react": "19.2.3",
     "react-native": "0.85.3",
-    "@react-native/new-app-screen": "0.85.3",
-    "react-native-safe-area-context": "^5.5.2",
-    "@apollo/client": "^3.11.0",
-    "graphql": "^16.9.0"
+    "react-native-encrypted-storage": "^4.0.3",
+    "react-native-safe-area-context": "^5.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package.json

@@ -0,0 +1,179 @@
+import {useState} from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import {useLoginMutation} from '../graphql/__generated__/types';
+import {clearSecurityWarning, useSecurityWarning} from './authClient';
+import {tokenStore} from './tokenStore';
+
+function deviceLabel(): string {
+  // The guide recommends device model + Android version; we don't have a
+  // device-info module installed, so fall back to the OS version. Users can
+  // still identify the entry in the session list.
+  return `Android ${Platform.Version}`;
+}
+
+function errorCode(err: unknown): string | undefined {
+  const arr =
+    err && typeof err === 'object' && 'graphQLErrors' in err
+      ? (err as {graphQLErrors?: ReadonlyArray<{extensions?: {code?: string}}>})
+          .graphQLErrors
+      : undefined;
+  return arr?.[0]?.extensions?.code;
+}
+
+function messageForCode(code: string | undefined): string {
+  switch (code) {
+    case 'INVALID_CREDENTIALS':
+      return 'Invalid email or password.';
+    case 'ACCOUNT_UNCONFIRMED':
+      return 'Please confirm your email address before logging in.';
+    case 'RATE_LIMITED':
+      return 'Too many attempts. Please wait a minute and try again.';
+    default:
+      return 'Login failed. Please try again.';
+  }
+}
+
+export function LoginScreen() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [login, {loading}] = useLoginMutation();
+  const securityWarning = useSecurityWarning();
+
+  const canSubmit = email.length > 0 && password.length > 0 && !loading;
+
+  async function onSubmit() {
+    setErrorMessage(null);
+    clearSecurityWarning();
+    try {
+      const {data} = await login({
+        variables: {input: {email, password, deviceLabel: deviceLabel()}},
+      });
+      if (!data?.login) {
+        setErrorMessage('Login failed. Please try again.');
+        return;
+      }
+      tokenStore.set({
+        accessToken: data.login.accessToken,
+        refreshToken: data.login.refreshToken,
+        expiresAtMs: new Date(data.login.expiresAt).getTime(),
+        user: data.login.user,
+      });
+    } catch (err) {
+      setErrorMessage(messageForCode(errorCode(err)));
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      style={styles.flex}>
+      <View style={styles.container}>
+        <Text style={styles.title}>Sign in to Culpeos</Text>
+
+        <TextInput
+          style={styles.input}
+          placeholder="Email"
+          autoCapitalize="none"
+          autoCorrect={false}
+          autoComplete="email"
+          keyboardType="email-address"
+          value={email}
+          onChangeText={setEmail}
+          editable={!loading}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Password"
+          autoCapitalize="none"
+          autoCorrect={false}
+          autoComplete="password"
+          secureTextEntry
+          value={password}
+          onChangeText={setPassword}
+          editable={!loading}
+          onSubmitEditing={canSubmit ? onSubmit : undefined}
+        />
+
+        {securityWarning ? (
+          <Text style={styles.warning}>{securityWarning}</Text>
+        ) : null}
+        {errorMessage ? <Text style={styles.error}>{errorMessage}</Text> : null}
+
+        <Pressable
+          accessibilityRole="button"
+          disabled={!canSubmit}
+          onPress={onSubmit}
+          style={({pressed}) => [
+            styles.button,
+            !canSubmit && styles.buttonDisabled,
+            pressed && canSubmit && styles.buttonPressed,
+          ]}>
+          {loading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.buttonText}>Log in</Text>
+          )}
+        </Pressable>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: {flex: 1},
+  container: {
+    flex: 1,
+    padding: 24,
+    justifyContent: 'center',
+    gap: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    fontSize: 16,
+  },
+  error: {
+    color: '#c00',
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  warning: {
+    color: '#a55',
+    fontSize: 13,
+    textAlign: 'center',
+    fontStyle: 'italic',
+  },
+  button: {
+    backgroundColor: '#0a7ea4',
+    borderRadius: 8,
+    paddingVertical: 14,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonDisabled: {opacity: 0.5},
+  buttonPressed: {opacity: 0.85},
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});