@sudobility/auth-components-rn 1.0.1

package/src/Avatar.tsx

@@ -0,0 +1,86 @@
+/**
+ * Avatar - User avatar component for React Native
+ */
+
+import React, { useState } from 'react';
+import { View, Text, Image, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+import type { AvatarProps } from './types';
+
+/**
+ * Get initials from display name or email
+ */
+function getInitials(name: string | null, email: string | null): string {
+  if (name) {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length >= 2) {
+      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    return name.slice(0, 2).toUpperCase();
+  }
+  if (email) {
+    return email.slice(0, 2).toUpperCase();
+  }
+  return '?';
+}
+
+/**
+ * Avatar component with photo URL and initials fallback
+ */
+export const Avatar: React.FC<AvatarProps & ViewProps> = ({
+  user,
+  size = 32,
+  className,
+  onPress,
+  ...props
+}) => {
+  const [imageError, setImageError] = useState(false);
+
+  const hasValidPhoto = user.photoURL && !imageError;
+  const initials = getInitials(user.displayName, user.email);
+
+  const sizeStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+  };
+
+  const content = hasValidPhoto ? (
+    <Image
+      source={{ uri: user.photoURL! }}
+      style={sizeStyle}
+      className='bg-gray-200 dark:bg-gray-700'
+      onError={() => setImageError(true)}
+      accessibilityLabel={user.displayName || 'User avatar'}
+    />
+  ) : (
+    <View
+      style={sizeStyle}
+      className={cn('items-center justify-center bg-blue-600', className)}
+    >
+      <Text style={{ fontSize: size * 0.4 }} className='font-medium text-white'>
+        {initials}
+      </Text>
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        className={cn('active:opacity-80', className)}
+        accessibilityRole='button'
+        accessibilityLabel={user.displayName || 'User avatar'}
+        {...props}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View className={className} {...props}>
+      {content}
+    </View>
+  );
+};

package/src/EmailSignInForm.tsx

@@ -0,0 +1,130 @@
+/**
+ * EmailSignInForm - Email sign-in form for React Native
+ */
+
+import React, { useState } from 'react';
+import { View, Text, TextInput, Pressable } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+import type { EmailSignInFormProps } from './types';
+import { useAuthStatus } from './AuthProvider';
+
+/**
+ * Email sign-in form component
+ */
+export const EmailSignInForm: React.FC<EmailSignInFormProps> = ({
+  onSwitchToSignUp,
+  onSwitchToForgotPassword,
+  onSuccess,
+  onTrack,
+  trackingLabel,
+  componentName = 'EmailSignInForm',
+}) => {
+  const { texts, signInWithEmail, loading, error, clearError } =
+    useAuthStatus();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = async () => {
+    onTrack?.({
+      action: 'form_submit',
+      trackingLabel,
+      componentName,
+    });
+
+    clearError();
+    await signInWithEmail(email, password);
+    onSuccess?.();
+  };
+
+  return (
+    <View className='gap-4'>
+      <View className='gap-2'>
+        <Text className='text-sm font-medium text-gray-900 dark:text-white'>
+          {texts.email}
+        </Text>
+        <TextInput
+          value={email}
+          onChangeText={setEmail}
+          placeholder={texts.emailPlaceholder}
+          keyboardType='email-address'
+          autoCapitalize='none'
+          autoCorrect={false}
+          className='px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white'
+          placeholderTextColor='#9CA3AF'
+        />
+      </View>
+
+      <View className='gap-2'>
+        <Text className='text-sm font-medium text-gray-900 dark:text-white'>
+          {texts.password}
+        </Text>
+        <TextInput
+          value={password}
+          onChangeText={setPassword}
+          placeholder={texts.passwordPlaceholder}
+          secureTextEntry
+          className='px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white'
+          placeholderTextColor='#9CA3AF'
+        />
+      </View>
+
+      {error && (
+        <Text className='text-sm text-red-600 dark:text-red-400'>{error}</Text>
+      )}
+
+      <Pressable
+        onPress={handleSubmit}
+        disabled={loading || !email || !password}
+        className={cn(
+          'py-3 px-4 rounded-lg items-center justify-center',
+          'bg-blue-600 active:bg-blue-700',
+          (loading || !email || !password) && 'opacity-50'
+        )}
+        accessibilityRole='button'
+        accessibilityLabel={texts.signIn}
+      >
+        <Text className='font-medium text-white'>
+          {loading ? texts.loading : texts.signIn}
+        </Text>
+      </Pressable>
+
+      <Pressable
+        onPress={() => {
+          onTrack?.({
+            action: 'switch_mode',
+            trackingLabel,
+            componentName,
+          });
+          onSwitchToForgotPassword();
+        }}
+        className='items-center py-2'
+        accessibilityRole='button'
+      >
+        <Text className='text-sm text-blue-600 dark:text-blue-400'>
+          {texts.forgotPassword}
+        </Text>
+      </Pressable>
+
+      <View className='flex-row items-center justify-center gap-1'>
+        <Text className='text-sm text-gray-500 dark:text-gray-400'>
+          {texts.noAccount}
+        </Text>
+        <Pressable
+          onPress={() => {
+            onTrack?.({
+              action: 'switch_mode',
+              trackingLabel,
+              componentName,
+            });
+            onSwitchToSignUp();
+          }}
+          accessibilityRole='button'
+        >
+          <Text className='text-sm font-medium text-blue-600 dark:text-blue-400'>
+            {texts.signUp}
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+};

package/src/EmailSignUpForm.tsx

@@ -0,0 +1,161 @@
+/**
+ * EmailSignUpForm - Email sign-up form for React Native
+ */
+
+import React, { useState } from 'react';
+import { View, Text, TextInput, Pressable } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+import type { EmailSignUpFormProps } from './types';
+import { useAuthStatus } from './AuthProvider';
+
+/**
+ * Email sign-up form component
+ */
+export const EmailSignUpForm: React.FC<EmailSignUpFormProps> = ({
+  onSwitchToSignIn,
+  onSuccess,
+  onTrack,
+  trackingLabel,
+  componentName = 'EmailSignUpForm',
+}) => {
+  const { texts, signUpWithEmail, loading, error, clearError } =
+    useAuthStatus();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    setLocalError(null);
+    clearError();
+
+    // Validate passwords match
+    if (password !== confirmPassword) {
+      setLocalError(texts.passwordMismatch);
+      return;
+    }
+
+    // Validate password length
+    if (password.length < 6) {
+      setLocalError(texts.passwordTooShort);
+      return;
+    }
+
+    onTrack?.({
+      action: 'form_submit',
+      trackingLabel,
+      componentName,
+    });
+
+    await signUpWithEmail(email, password, displayName || undefined);
+    onSuccess?.();
+  };
+
+  const displayError = localError || error;
+
+  return (
+    <View className='gap-4'>
+      <View className='gap-2'>
+        <Text className='text-sm font-medium text-gray-900 dark:text-white'>
+          {texts.displayName}
+        </Text>
+        <TextInput
+          value={displayName}
+          onChangeText={setDisplayName}
+          placeholder={texts.displayNamePlaceholder}
+          autoCapitalize='words'
+          className='px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white'
+          placeholderTextColor='#9CA3AF'
+        />
+      </View>
+
+      <View className='gap-2'>
+        <Text className='text-sm font-medium text-gray-900 dark:text-white'>
+          {texts.email}
+        </Text>
+        <TextInput
+          value={email}
+          onChangeText={setEmail}
+          placeholder={texts.emailPlaceholder}
+          keyboardType='email-address'
+          autoCapitalize='none'
+          autoCorrect={false}
+          className='px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white'
+          placeholderTextColor='#9CA3AF'
+        />
+      </View>
+
+      <View className='gap-2'>
+        <Text className='text-sm font-medium text-gray-900 dark:text-white'>
+          {texts.password}
+        </Text>
+        <TextInput
+          value={password}
+          onChangeText={setPassword}
+          placeholder={texts.passwordPlaceholder}
+          secureTextEntry
+          className='px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white'
+          placeholderTextColor='#9CA3AF'
+        />
+      </View>
+
+      <View className='gap-2'>
+        <Text className='text-sm font-medium text-gray-900 dark:text-white'>
+          {texts.confirmPassword}
+        </Text>
+        <TextInput
+          value={confirmPassword}
+          onChangeText={setConfirmPassword}
+          placeholder={texts.confirmPasswordPlaceholder}
+          secureTextEntry
+          className='px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white'
+          placeholderTextColor='#9CA3AF'
+        />
+      </View>
+
+      {displayError && (
+        <Text className='text-sm text-red-600 dark:text-red-400'>
+          {displayError}
+        </Text>
+      )}
+
+      <Pressable
+        onPress={handleSubmit}
+        disabled={loading || !email || !password || !confirmPassword}
+        className={cn(
+          'py-3 px-4 rounded-lg items-center justify-center',
+          'bg-blue-600 active:bg-blue-700',
+          (loading || !email || !password || !confirmPassword) && 'opacity-50'
+        )}
+        accessibilityRole='button'
+        accessibilityLabel={texts.signUp}
+      >
+        <Text className='font-medium text-white'>
+          {loading ? texts.loading : texts.signUp}
+        </Text>
+      </Pressable>
+
+      <View className='flex-row items-center justify-center gap-1'>
+        <Text className='text-sm text-gray-500 dark:text-gray-400'>
+          {texts.haveAccount}
+        </Text>
+        <Pressable
+          onPress={() => {
+            onTrack?.({
+              action: 'switch_mode',
+              trackingLabel,
+              componentName,
+            });
+            onSwitchToSignIn();
+          }}
+          accessibilityRole='button'
+        >
+          <Text className='text-sm font-medium text-blue-600 dark:text-blue-400'>
+            {texts.signIn}
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+};

package/src/ForgotPasswordForm.tsx

@@ -0,0 +1,129 @@
+/**
+ * ForgotPasswordForm - Password reset form for React Native
+ */
+
+import React, { useState } from 'react';
+import { View, Text, TextInput, Pressable } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+import type { ForgotPasswordFormProps } from './types';
+import { useAuthStatus } from './AuthProvider';
+
+/**
+ * Forgot password form component
+ */
+export const ForgotPasswordForm: React.FC<ForgotPasswordFormProps> = ({
+  onSwitchToSignIn,
+  onTrack,
+  trackingLabel,
+  componentName = 'ForgotPasswordForm',
+}) => {
+  const { texts, resetPassword, loading, error, clearError } = useAuthStatus();
+  const [email, setEmail] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async () => {
+    clearError();
+    setSuccess(false);
+
+    onTrack?.({
+      action: 'form_submit',
+      trackingLabel,
+      componentName,
+    });
+
+    await resetPassword(email);
+    setSuccess(true);
+  };
+
+  if (success) {
+    return (
+      <View className='gap-4'>
+        <View className='p-4 rounded-lg bg-green-50 dark:bg-green-900/20'>
+          <Text className='text-base font-medium text-green-800 dark:text-green-200'>
+            {texts.resetEmailSent}
+          </Text>
+          <Text className='mt-1 text-sm text-green-700 dark:text-green-300'>
+            {texts.resetEmailSentDesc.replace('{{email}}', email)}
+          </Text>
+        </View>
+
+        <Pressable
+          onPress={() => {
+            onTrack?.({
+              action: 'switch_mode',
+              trackingLabel,
+              componentName,
+            });
+            onSwitchToSignIn();
+          }}
+          className='py-3 px-4 rounded-lg items-center justify-center bg-blue-600 active:bg-blue-700'
+          accessibilityRole='button'
+        >
+          <Text className='font-medium text-white'>{texts.backToSignIn}</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  return (
+    <View className='gap-4'>
+      <Text className='text-sm text-gray-500 dark:text-gray-400'>
+        Enter your email address and we'll send you a link to reset your
+        password.
+      </Text>
+
+      <View className='gap-2'>
+        <Text className='text-sm font-medium text-gray-900 dark:text-white'>
+          {texts.email}
+        </Text>
+        <TextInput
+          value={email}
+          onChangeText={setEmail}
+          placeholder={texts.emailPlaceholder}
+          keyboardType='email-address'
+          autoCapitalize='none'
+          autoCorrect={false}
+          className='px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white'
+          placeholderTextColor='#9CA3AF'
+        />
+      </View>
+
+      {error && (
+        <Text className='text-sm text-red-600 dark:text-red-400'>{error}</Text>
+      )}
+
+      <Pressable
+        onPress={handleSubmit}
+        disabled={loading || !email}
+        className={cn(
+          'py-3 px-4 rounded-lg items-center justify-center',
+          'bg-blue-600 active:bg-blue-700',
+          (loading || !email) && 'opacity-50'
+        )}
+        accessibilityRole='button'
+        accessibilityLabel={texts.sendResetLink}
+      >
+        <Text className='font-medium text-white'>
+          {loading ? texts.loading : texts.sendResetLink}
+        </Text>
+      </Pressable>
+
+      <Pressable
+        onPress={() => {
+          onTrack?.({
+            action: 'switch_mode',
+            trackingLabel,
+            componentName,
+          });
+          onSwitchToSignIn();
+        }}
+        className='items-center py-2'
+        accessibilityRole='button'
+      >
+        <Text className='text-sm text-blue-600 dark:text-blue-400'>
+          {texts.backToSignIn}
+        </Text>
+      </Pressable>
+    </View>
+  );
+};

package/src/ProviderButtons.tsx

@@ -0,0 +1,106 @@
+/**
+ * ProviderButtons - OAuth provider buttons for React Native
+ */
+
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+import type { ProviderButtonsProps, AuthProviderType } from './types';
+import { useAuthStatus } from './AuthProvider';
+
+interface ProviderButtonProps {
+  provider: AuthProviderType;
+  label: string;
+  onPress: () => void;
+  className?: string;
+}
+
+const ProviderButton: React.FC<ProviderButtonProps> = ({
+  provider,
+  label,
+  onPress,
+  className,
+}) => {
+  const bgColors: Record<AuthProviderType, string> = {
+    google: 'bg-white border border-gray-300',
+    apple: 'bg-black',
+    email: 'bg-blue-600',
+  };
+
+  const textColors: Record<AuthProviderType, string> = {
+    google: 'text-gray-900',
+    apple: 'text-white',
+    email: 'text-white',
+  };
+
+  return (
+    <Pressable
+      onPress={onPress}
+      className={cn(
+        'flex-row items-center justify-center py-3 px-4 rounded-lg',
+        'active:opacity-80',
+        bgColors[provider],
+        className
+      )}
+      accessibilityRole='button'
+      accessibilityLabel={label}
+    >
+      <Text className={cn('font-medium text-base', textColors[provider])}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+};
+
+/**
+ * Provider buttons component for OAuth and email sign-in
+ */
+export const ProviderButtons: React.FC<ProviderButtonsProps> = ({
+  providers,
+  onEmailPress,
+  onTrack,
+  trackingLabel,
+  componentName = 'ProviderButtons',
+}) => {
+  const { texts, signInWithGoogle, signInWithApple } = useAuthStatus();
+
+  const handleProviderPress = async (provider: AuthProviderType) => {
+    onTrack?.({
+      action: 'provider_press',
+      trackingLabel,
+      componentName,
+    });
+
+    if (provider === 'google') {
+      await signInWithGoogle();
+    } else if (provider === 'apple') {
+      await signInWithApple();
+    } else if (provider === 'email') {
+      onEmailPress();
+    }
+  };
+
+  const getLabel = (provider: AuthProviderType): string => {
+    switch (provider) {
+      case 'google':
+        return texts.continueWithGoogle;
+      case 'apple':
+        return texts.continueWithApple;
+      case 'email':
+        return texts.continueWithEmail;
+    }
+  };
+
+  return (
+    <View className='gap-3'>
+      {providers.map(provider => (
+        <ProviderButton
+          key={provider}
+          provider={provider}
+          label={getLabel(provider)}
+          onPress={() => handleProviderPress(provider)}
+        />
+      ))}
+    </View>
+  );
+};