@fastshot/auth 1.0.6 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastshot/auth",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "OAuth authentication SDK for Expo React Native applications with Supabase",
   "main": "src/index.ts",
   "repository": {
@@ -23,15 +23,14 @@
     "babel-plugin-transform-inline-environment-variables": "^0.4.4"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-native": ">=0.70.0",
     "@supabase/supabase-js": "^2.0.0",
     "expo-linking": "^8.0.0",
+    "expo-router": "^6.0.21",
     "expo-web-browser": "^15.0.0"
   },
   "devDependencies": {
-    "@types/react": "~19.1.10",
-    "react": "19.1.0",
+    "@types/react": "~19.2.0",
+    "react": "19.2.3",
     "react-native": "0.81.5",
     "typescript": "~5.9.2"
   },

package/src/index.ts

@@ -1,103 +1,87 @@
 /**
- * @fastshot/auth - OAuth authentication SDK for Expo React Native
+ * @fastshot/auth - Opinionated OAuth authentication for React Native Expo
  *
  * Provides Google and Apple OAuth authentication via Fastshot's auth-broker,
- * with automatic Supabase session restoration.
+ * with automatic Supabase session management. Designed for Expo Router.
  *
- * @example
- * ```tsx
- * // Using hooks (recommended)
- * import { useGoogleSignIn, useAppleSignIn, useAuthCallback } from '@fastshot/auth';
- * import { supabase } from './lib/supabase';
+ * ## Quick Start (2 Steps!)
  *
- * function App() {
- *   // Handle OAuth callbacks automatically
- *   useAuthCallback({
- *     supabaseClient: supabase,
- *     onSuccess: ({ user }) => console.log('Logged in:', user.email),
- *   });
+ * ### Step 1: Wrap your app with AuthProvider + routes config
+ * ```tsx
+ * // app/_layout.tsx - This is ALL you need for auth routing!
+ * import { Stack } from 'expo-router';
+ * import { AuthProvider } from '@fastshot/auth';
+ * import { supabase } from '@/lib/supabase';
  *
- *   return <LoginScreen />;
+ * export default function RootLayout() {
+ *   return (
+ *     <AuthProvider
+ *       supabaseClient={supabase}
+ *       routes={{
+ *         login: '/(auth)/login',
+ *         afterLogin: '/(tabs)',
+ *       }}
+ *     >
+ *       <Stack screenOptions={{ headerShown: false }}>
+ *         <Stack.Screen name="(auth)" />
+ *         <Stack.Screen name="(tabs)" />
+ *       </Stack>
+ *     </AuthProvider>
+ *   );
  * }
+ * ```
  *
- * function LoginScreen() {
- *   const { signIn: googleSignIn, isLoading: googleLoading } = useGoogleSignIn({
- *     supabaseClient: supabase,
- *   });
- *
- *   const { signIn: appleSignIn, isLoading: appleLoading } = useAppleSignIn({
- *     supabaseClient: supabase,
- *   });
+ * ### Step 2: Use auth in your screens
+ * ```tsx
+ * // app/(auth)/login.tsx
+ * import { useAuth } from '@fastshot/auth';
  *
- *   return (
- *     <View>
- *       <Button title="Sign in with Google" onPress={googleSignIn} />
- *       <Button title="Sign in with Apple" onPress={appleSignIn} />
- *     </View>
- *   );
+ * export default function LoginScreen() {
+ *   const { signInWithGoogle, isLoading } = useAuth();
+ *   return <Button onPress={signInWithGoogle} disabled={isLoading}>Sign In</Button>;
  * }
  * ```
  *
- * @example
- * ```typescript
- * // Using standalone functions
- * import { signInWithGoogle, handleAuthCallback } from '@fastshot/auth';
- * import { supabase } from './lib/supabase';
+ * That's it! Auth redirects are automatic:
+ * - Unauthenticated users visiting `(tabs)` → redirected to login
+ * - Authenticated users visiting `(auth)` → redirected to tabs
  *
- * // Trigger sign-in
- * await signInWithGoogle({ supabaseClient: supabase });
+ * ## Features
  *
- * // Handle callback (in your deep link handler)
- * const result = await handleAuthCallback(url, supabase);
- * ```
+ * - **Minimal setup**: Just add `routes` config, redirects are automatic
+ * - **Convention-based**: Common route names auto-detected (tabs, app, auth, etc.)
+ * - **Expo Router native**: Designed for file-based routing with route groups
+ * - **Reactive state**: UI automatically updates when auth state changes
+ * - **Deep link handling**: Handles OAuth callbacks automatically
+ * - **TypeScript**: Full type safety out of the box
  */
 
-// Core auth functions
-export {
-  signInWithGoogle,
-  signInWithApple,
-  handleAuthCallback,
-  signOut,
-} from './auth';
-export type { SignInOptions } from './auth';
+// =============================================================================
+// PRIMARY API
+// =============================================================================
 
-// React hooks
-export {
-  useGoogleSignIn,
-  useAppleSignIn,
-  useAuthCallback,
-} from './hooks';
-export type {
-  UseGoogleSignInConfig,
-  UseGoogleSignInResult,
-  UseAppleSignInConfig,
-  UseAppleSignInResult,
-  UseAuthCallbackConfig,
-  UseAuthCallbackResult,
-} from './hooks';
+/**
+ * Primary exports - these are what most users need
+ *
+ * - AuthProvider: Wrap your app to enable auth
+ * - useAuth: Hook to access auth state and methods
+ * - ProtectedLayout: Wrapper for routes requiring authentication
+ * - GuestLayout: Wrapper for routes that should only be accessible when logged out
+ * - AuthCallbackPage: Web callback page component (only needed for web)
+ */
+export { AuthProvider, useAuth, AuthCallbackPage, ProtectedLayout, GuestLayout } from './provider';
+export type { AuthProviderConfig, AuthContextValue, SignUpOptions, ProtectedLayoutProps, GuestLayoutProps } from './provider';
 
-// Utilities (for advanced usage)
-export {
-  exchangeTicket,
-  isAuthCallbackUrl,
-  parseCallbackUrl,
-  getDefaultCallbackUrl,
-  createAuthError,
-  isAuthError,
-} from './utils';
+// =============================================================================
+// TYPES
+// =============================================================================
 
-// Types
 export type {
-  OAuthProvider,
-  AuthMode,
   AuthError,
   AuthErrorType,
-  AuthCallbackResult,
-  ExchangeTicketResponse,
+  OAuthProvider,
+  AuthMode,
+  SignUpResult,
+  PasswordResetResult,
+  AuthRoutes,
 } from './types';
-
-// Constants (for debugging/customization)
-export { AUTH_CONFIG, AUTH_ENDPOINTS } from './constants';
-
-// Environment utilities
-export { getProjectId, getAuthBrokerUrl, ENV } from './env';

package/src/provider/AuthCallbackPage.tsx

@@ -0,0 +1,140 @@
+/**
+ * AuthCallbackPage - Web OAuth callback handler
+ *
+ * @example
+ * ```tsx
+ * // app/auth/callback.tsx
+ * import { AuthCallbackPage } from '@fastshot/auth';
+ * import { supabase } from '@/lib/supabase';
+ * import { useRouter } from 'expo-router';
+ *
+ * export default function Callback() {
+ *   const router = useRouter();
+ *   return (
+ *     <AuthCallbackPage
+ *       supabaseClient={supabase}
+ *       onSuccess={() => router.replace('/')}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+
+import React, { useEffect, useState } from 'react';
+import { View, Text, ActivityIndicator, StyleSheet, Platform, Pressable } from 'react-native';
+import type { SupabaseClient } from '@supabase/supabase-js';
+import { parseCallbackUrl, exchangeTicket, restoreSession, isAuthError } from '../utils';
+
+interface AuthCallbackPageProps {
+  supabaseClient: SupabaseClient;
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+  loadingText?: string;
+}
+
+type Status = 'loading' | 'success' | 'error';
+
+// Module-level: track which ticket is being processed to prevent duplicates
+let processingTicket: string | null = null;
+
+export function AuthCallbackPage({
+  supabaseClient,
+  onSuccess,
+  onError,
+  loadingText = 'Completing sign in...',
+}: AuthCallbackPageProps) {
+  const [status, setStatus] = useState<Status>('loading');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (Platform.OS !== 'web' || typeof window === 'undefined') return;
+
+    const { ticket, error: urlError, errorDescription } = parseCallbackUrl(window.location.href);
+
+    if (urlError) {
+      setError(errorDescription || urlError);
+      setStatus('error');
+      onError?.(new Error(errorDescription || urlError));
+      return;
+    }
+
+    if (!ticket) {
+      setError('No ticket found in URL');
+      setStatus('error');
+      onError?.(new Error('No ticket found'));
+      return;
+    }
+
+    // Prevent duplicate processing
+    if (processingTicket === ticket) return;
+    processingTicket = ticket;
+
+    // Process the OAuth callback
+    processCallback(ticket);
+
+    async function processCallback(ticket: string) {
+      try {
+        const tokens = await exchangeTicket(ticket);
+        await restoreSession(supabaseClient, tokens);
+
+        processingTicket = null;
+        setStatus('success');
+
+        // Navigate on next tick
+        setTimeout(() => {
+          onSuccess ? onSuccess() : window.location.replace('/');
+        }, 50);
+
+      } catch (err) {
+        processingTicket = null;
+        const msg = isAuthError(err) ? err.message : (err instanceof Error ? err.message : 'Failed');
+        console.error('[@fastshot/auth] Callback failed:', err);
+        setError(msg);
+        setStatus('error');
+        onError?.(new Error(msg));
+      }
+    }
+  }, [supabaseClient, onSuccess, onError]);
+
+  const navigate = () => {
+    onSuccess ? onSuccess() : window.location.replace('/');
+  };
+
+  return (
+    <View style={styles.container}>
+      {status === 'loading' && (
+        <>
+          <ActivityIndicator size="large" color="#4A7C59" />
+          <Text style={styles.text}>{loadingText}</Text>
+        </>
+      )}
+      {status === 'success' && (
+        <>
+          <Text style={styles.success}>Sign in successful!</Text>
+          <Pressable onPress={navigate} style={styles.button}>
+            <Text style={styles.buttonText}>Continue →</Text>
+          </Pressable>
+        </>
+      )}
+      {status === 'error' && (
+        <>
+          <Text style={styles.error}>{error}</Text>
+          <Pressable onPress={() => window.history.back()} style={styles.link}>
+            <Text style={styles.linkText}>← Go back</Text>
+          </Pressable>
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', padding: 20 },
+  text: { marginTop: 16, fontSize: 16, color: '#666' },
+  success: { fontSize: 20, fontWeight: '600', color: '#16a34a', marginBottom: 16 },
+  error: { fontSize: 16, color: '#dc2626', textAlign: 'center', marginBottom: 16 },
+  button: { paddingHorizontal: 24, paddingVertical: 12, backgroundColor: '#4A7C59', borderRadius: 8 },
+  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
+  link: { padding: 12 },
+  linkText: { color: '#4A7C59', fontSize: 16 },
+});