feat(mobile): implement real Supabase authentication

Replace mock authentication with real Supabase integration:

**New Files:**
- mobile/src/lib/supabase.ts - Supabase client initialization with AsyncStorage persistence
- mobile/src/contexts/AuthContext.tsx - Complete authentication context with session management

**Updated Files:**
- mobile/src/screens/SignInScreen.tsx
  * Import useAuth from AuthContext
  * Add Alert and ActivityIndicator for error handling and loading states
  * Replace mock setTimeout with real signIn() API call
  * Add loading state management (isLoading)
  * Update button to show ActivityIndicator during sign-in
  * Add proper error handling with Alert dialogs

- mobile/src/screens/SignUpScreen.tsx
  * Import useAuth from AuthContext
  * Add Alert and ActivityIndicator
  * Add username state and input field
  * Replace mock registration with real signUp() API call
  * Add loading state management
  * Update button to show ActivityIndicator during sign-up
  * Add form validation for all required fields
  * Add proper error handling with Alert dialogs

- mobile/App.tsx
  * Import and add AuthProvider to provider hierarchy
  * Provider order: ErrorBoundary → AuthProvider → PolkadotProvider → LanguageProvider → BiometricAuthProvider

**Features Implemented:**
- Real user authentication with Supabase
- Email/password sign in with error handling
- User registration with username and referral code support
- Profile creation in Supabase database
- Admin status checking
- Session timeout management (30 minutes inactivity)
- Automatic session refresh
- Activity tracking with AsyncStorage
- Auth state persistence across app restarts

**Security:**
- Credentials from environment variables (EXPO_PUBLIC_SUPABASE_URL, EXPO_PUBLIC_SUPABASE_ANON_KEY)
- Automatic token refresh enabled
- Secure session persistence with AsyncStorage
- No sensitive data in console logs (protected with __DEV__)

This completes P0 authentication implementation for mobile app.
Production ready authentication matching web implementation.
This commit is contained in:
Claude
2025-11-21 22:23:35 +00:00
parent 6a86915549
commit ada1883b52
5 changed files with 371 additions and 22 deletions
+39 -6
View File
@@ -10,9 +10,12 @@ import {
Platform,
ScrollView,
StatusBar,
Alert,
ActivityIndicator,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { useTranslation } from 'react-i18next';
import { useAuth } from '../contexts/AuthContext';
import AppColors, { KurdistanColors } from '../theme/colors';
interface SignInScreenProps {
@@ -22,13 +25,35 @@ interface SignInScreenProps {
const SignInScreen: React.FC<SignInScreenProps> = ({ onSignIn, onNavigateToSignUp }) => {
const { t } = useTranslation();
const { signIn } = useAuth();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isLoading, setIsLoading] = useState(false);
const handleSignIn = () => {
// TODO: Implement actual authentication
if (__DEV__) console.log('Sign in:', { email, password });
onSignIn();
const handleSignIn = async () => {
if (!email || !password) {
Alert.alert('Error', 'Please enter both email and password');
return;
}
setIsLoading(true);
try {
const { error } = await signIn(email, password);
if (error) {
Alert.alert('Sign In Failed', error.message);
return;
}
// Success - navigate to app
onSignIn();
} catch (error) {
Alert.alert('Error', 'An unexpected error occurred');
if (__DEV__) console.error('Sign in error:', error);
} finally {
setIsLoading(false);
}
};
return (
@@ -91,11 +116,16 @@ const SignInScreen: React.FC<SignInScreenProps> = ({ onSignIn, onNavigateToSignU
</TouchableOpacity>
<TouchableOpacity
style={styles.signInButton}
style={[styles.signInButton, isLoading && styles.buttonDisabled]}
onPress={handleSignIn}
activeOpacity={0.8}
disabled={isLoading}
>
<Text style={styles.signInButtonText}>{t('auth.signIn')}</Text>
{isLoading ? (
<ActivityIndicator color={KurdistanColors.spi} />
) : (
<Text style={styles.signInButtonText}>{t('auth.signIn')}</Text>
)}
</TouchableOpacity>
<View style={styles.divider}>
@@ -223,6 +253,9 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
color: KurdistanColors.spi,
},
buttonDisabled: {
opacity: 0.6,
},
divider: {
flexDirection: 'row',
alignItems: 'center',