@sudobility/auth-components-rn 1.0.1

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@sudobility/auth-components-rn",
+  "version": "1.0.1",
+  "description": "React Native Authentication components for Sudobility with Firebase Auth support",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "react-native": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite build --watch",
+    "type-check": "tsc --noEmit",
+    "test": "jest --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@react-native-firebase/auth": ">=18.0.0",
+    "@sudobility/components-rn": "^1.0.0",
+    "@sudobility/design": "^1.1.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-native": ">=0.72.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-native-firebase/auth": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@sudobility/components-rn": "^1.0.7",
+    "@sudobility/design": "^1.1.14",
+    "@types/react": "^18.3.0",
+    "@types/react-native": "^0.73.0",
+    "react": "^18.3.0",
+    "react-native": "^0.76.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sudobility/components-rn.git",
+    "directory": "packages/auth-components-rn"
+  },
+  "keywords": [
+    "react-native",
+    "authentication",
+    "firebase",
+    "auth",
+    "components"
+  ],
+  "author": "Sudobility",
+  "license": "BUSL-1.1"
+}

package/src/AuthAction.tsx

@@ -0,0 +1,107 @@
+/**
+ * AuthAction - Authentication action component for headers in React Native
+ */
+
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn, Button } from '@sudobility/components-rn';
+import type { AuthActionProps } from './types';
+import { useAuthStatus } from './AuthProvider';
+import { Avatar } from './Avatar';
+
+/**
+ * Authentication action component for app headers
+ */
+export const AuthAction: React.FC<AuthActionProps> = ({
+  className,
+  loginButtonVariant = 'primary',
+  size = 'md',
+  loginButtonContent,
+  avatarSize = 32,
+  menuItems: _menuItems = [],
+  showUserInfo = true,
+  renderUserInfo: _renderUserInfo,
+  renderAvatar,
+  onLoginPress,
+  onLogoutPress,
+  onTrack,
+  trackingLabel,
+  componentName = 'AuthAction',
+}) => {
+  const { user, isAuthenticated, texts, signOut, loading } = useAuthStatus();
+
+  const handleLoginPress = () => {
+    onTrack?.({
+      action: 'login_press',
+      trackingLabel,
+      componentName,
+    });
+
+    const result = onLoginPress?.();
+    // If onLoginPress returns false, don't proceed with default behavior
+    if (result === false) return;
+  };
+
+  const handleLogoutPress = async () => {
+    onTrack?.({
+      action: 'logout_press',
+      trackingLabel,
+      componentName,
+    });
+
+    onLogoutPress?.();
+    await signOut();
+  };
+
+  // Not authenticated - show login button
+  if (!isAuthenticated || !user) {
+    return (
+      <Button
+        variant={loginButtonVariant}
+        size={size === 'md' ? 'default' : size}
+        onPress={handleLoginPress}
+        disabled={loading}
+        className={className}
+      >
+        {loginButtonContent || texts.login}
+      </Button>
+    );
+  }
+
+  // Authenticated - show avatar and user info
+  // For React Native, we show a simplified version without dropdown
+  // A full dropdown menu would require a modal or action sheet
+  return (
+    <View className={cn('flex-row items-center gap-3', className)}>
+      {showUserInfo && (
+        <View className='items-end'>
+          <Text className='text-sm font-medium text-gray-900 dark:text-white'>
+            {user.displayName || user.email}
+          </Text>
+          {user.displayName && user.email && (
+            <Text className='text-xs text-gray-500 dark:text-gray-400'>
+              {user.email}
+            </Text>
+          )}
+        </View>
+      )}
+
+      {renderAvatar ? (
+        renderAvatar(user)
+      ) : (
+        <Avatar user={user} size={avatarSize} />
+      )}
+
+      <Pressable
+        onPress={handleLogoutPress}
+        className='px-3 py-1.5 rounded-md bg-gray-100 dark:bg-gray-800 active:opacity-80'
+        accessibilityRole='button'
+        accessibilityLabel={texts.logout}
+      >
+        <Text className='text-sm text-gray-700 dark:text-gray-300'>
+          {texts.logout}
+        </Text>
+      </Pressable>
+    </View>
+  );
+};

package/src/AuthInline.tsx

@@ -0,0 +1,124 @@
+/**
+ * AuthInline - Inline authentication component for React Native
+ */
+
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import { Card } from '@sudobility/components-rn';
+import type { AuthInlineProps, AuthMode } from './types';
+import { useAuthStatus } from './AuthProvider';
+import { ProviderButtons } from './ProviderButtons';
+import { EmailSignInForm } from './EmailSignInForm';
+import { EmailSignUpForm } from './EmailSignUpForm';
+import { ForgotPasswordForm } from './ForgotPasswordForm';
+
+/**
+ * Inline authentication component
+ */
+export const AuthInline: React.FC<AuthInlineProps> = ({
+  initialMode = 'select',
+  className,
+  providers,
+  showTitle = true,
+  title,
+  onModeChange,
+  onSuccess,
+  variant = 'card',
+  onTrack,
+  trackingLabel,
+  componentName = 'AuthInline',
+}) => {
+  const { texts, providerConfig } = useAuthStatus();
+  const [mode, setMode] = useState<AuthMode>(initialMode);
+
+  const activeProviders = providers || providerConfig.providers;
+
+  const handleModeChange = (newMode: AuthMode) => {
+    setMode(newMode);
+    onModeChange?.(newMode);
+  };
+
+  const getTitle = (): string => {
+    if (title) return title;
+    switch (mode) {
+      case 'select':
+        return texts.signInTitle;
+      case 'email-signin':
+        return texts.signInWithEmail;
+      case 'email-signup':
+        return texts.createAccount;
+      case 'forgot-password':
+        return texts.resetPassword;
+    }
+  };
+
+  const renderContent = () => {
+    switch (mode) {
+      case 'select':
+        return (
+          <ProviderButtons
+            providers={activeProviders}
+            onEmailPress={() => handleModeChange('email-signin')}
+            onTrack={onTrack}
+            trackingLabel={trackingLabel}
+            componentName={componentName}
+          />
+        );
+      case 'email-signin':
+        return (
+          <EmailSignInForm
+            onSwitchToSignUp={() => handleModeChange('email-signup')}
+            onSwitchToForgotPassword={() => handleModeChange('forgot-password')}
+            onSuccess={onSuccess}
+            onTrack={onTrack}
+            trackingLabel={trackingLabel}
+            componentName={componentName}
+          />
+        );
+      case 'email-signup':
+        return (
+          <EmailSignUpForm
+            onSwitchToSignIn={() => handleModeChange('email-signin')}
+            onSuccess={onSuccess}
+            onTrack={onTrack}
+            trackingLabel={trackingLabel}
+            componentName={componentName}
+          />
+        );
+      case 'forgot-password':
+        return (
+          <ForgotPasswordForm
+            onSwitchToSignIn={() => handleModeChange('email-signin')}
+            onTrack={onTrack}
+            trackingLabel={trackingLabel}
+            componentName={componentName}
+          />
+        );
+    }
+  };
+
+  const content = (
+    <View className='gap-4'>
+      {showTitle && (
+        <Text className='text-xl font-semibold text-gray-900 dark:text-white text-center'>
+          {getTitle()}
+        </Text>
+      )}
+      {renderContent()}
+    </View>
+  );
+
+  if (variant === 'flat') {
+    return <View className={className}>{content}</View>;
+  }
+
+  return (
+    <Card
+      variant={variant === 'bordered' ? 'bordered' : 'default'}
+      padding='lg'
+      className={className}
+    >
+      {content}
+    </Card>
+  );
+};

package/src/AuthProvider.tsx

@@ -0,0 +1,276 @@
+/**
+ * AuthProvider - Context provider for authentication state in React Native
+ */
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react';
+import type {
+  AuthUser,
+  AuthErrorTexts,
+  AuthContextValue,
+  AuthProviderProps,
+} from './types';
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+/**
+ * Default English error texts
+ */
+export function createDefaultErrorTexts(): AuthErrorTexts {
+  return {
+    'auth/user-not-found': 'No account found with this email.',
+    'auth/wrong-password': 'Incorrect password.',
+    'auth/invalid-email': 'Please enter a valid email address.',
+    'auth/invalid-credential': 'Invalid email or password.',
+    'auth/email-already-in-use': 'An account already exists with this email.',
+    'auth/weak-password': 'Password should be at least 6 characters.',
+    'auth/too-many-requests': 'Too many attempts. Please try again later.',
+    'auth/network-request-failed':
+      'Network error. Please check your connection.',
+    'auth/popup-closed-by-user': 'Sign-in was cancelled.',
+    'auth/popup-blocked': 'Sign-in popup was blocked.',
+    'auth/account-exists-with-different-credential':
+      'An account already exists with a different sign-in method.',
+    'auth/operation-not-allowed': 'This sign-in method is not enabled.',
+    default: 'An error occurred. Please try again.',
+  };
+}
+
+/**
+ * Hook to access auth context
+ */
+export function useAuthStatus(): AuthContextValue {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuthStatus must be used within an AuthProvider');
+  }
+  return context;
+}
+
+/**
+ * Auth provider component for React Native
+ */
+export function AuthProvider({
+  children,
+  providerConfig,
+  texts,
+  errorTexts,
+  callbacks,
+  resolveErrorMessage,
+}: AuthProviderProps): React.ReactElement {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Resolve error message from code
+  const getErrorMessage = useCallback(
+    (code: string): string => {
+      if (resolveErrorMessage) {
+        return resolveErrorMessage(code);
+      }
+      const key = code as keyof AuthErrorTexts;
+      return errorTexts[key] || errorTexts.default;
+    },
+    [errorTexts, resolveErrorMessage]
+  );
+
+  // Handle auth errors
+  const handleError = useCallback(
+    (err: Error & { code?: string }) => {
+      const code = err.code || 'default';
+      const message = getErrorMessage(code);
+      setError(message);
+      callbacks?.onError?.(err, code);
+    },
+    [getErrorMessage, callbacks]
+  );
+
+  // Auth state listener - to be connected to Firebase Auth
+  useEffect(() => {
+    // This is a placeholder - in actual implementation,
+    // you would connect to @react-native-firebase/auth here
+    // Example:
+    // import auth from '@react-native-firebase/auth';
+    // const unsubscribe = auth().onAuthStateChanged((firebaseUser) => {
+    //   if (firebaseUser) {
+    //     setUser({
+    //       uid: firebaseUser.uid,
+    //       email: firebaseUser.email,
+    //       displayName: firebaseUser.displayName,
+    //       photoURL: firebaseUser.photoURL,
+    //       isAnonymous: firebaseUser.isAnonymous,
+    //       emailVerified: firebaseUser.emailVerified,
+    //       providerId: firebaseUser.providerData[0]?.providerId || null,
+    //     });
+    //   } else {
+    //     setUser(null);
+    //   }
+    //   setLoading(false);
+    // });
+    // return unsubscribe;
+
+    setLoading(false);
+  }, []);
+
+  // Sign in with Google
+  const signInWithGoogle = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Placeholder - implement with @react-native-firebase/auth
+      // and @react-native-google-signin/google-signin
+      throw new Error('Google sign-in not implemented');
+    } catch (err) {
+      handleError(err as Error & { code?: string });
+    } finally {
+      setLoading(false);
+    }
+  }, [handleError]);
+
+  // Sign in with Apple
+  const signInWithApple = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Placeholder - implement with @react-native-firebase/auth
+      // and @invertase/react-native-apple-authentication
+      throw new Error('Apple sign-in not implemented');
+    } catch (err) {
+      handleError(err as Error & { code?: string });
+    } finally {
+      setLoading(false);
+    }
+  }, [handleError]);
+
+  // Sign in with email/password
+  const signInWithEmail = useCallback(
+    async (_email: string, _password: string) => {
+      setLoading(true);
+      setError(null);
+      try {
+        // Placeholder - implement with @react-native-firebase/auth
+        // import auth from '@react-native-firebase/auth';
+        // await auth().signInWithEmailAndPassword(_email, _password);
+        throw new Error('Email sign-in not implemented');
+      } catch (err) {
+        handleError(err as Error & { code?: string });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [handleError]
+  );
+
+  // Sign up with email/password
+  const signUpWithEmail = useCallback(
+    async (_email: string, _password: string, _displayName?: string) => {
+      setLoading(true);
+      setError(null);
+      try {
+        // Placeholder - implement with @react-native-firebase/auth
+        throw new Error('Email sign-up not implemented');
+      } catch (err) {
+        handleError(err as Error & { code?: string });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [handleError]
+  );
+
+  // Reset password
+  const resetPassword = useCallback(
+    async (_email: string) => {
+      setLoading(true);
+      setError(null);
+      try {
+        // Placeholder - implement with @react-native-firebase/auth
+        throw new Error('Password reset not implemented');
+      } catch (err) {
+        handleError(err as Error & { code?: string });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [handleError]
+  );
+
+  // Sign out
+  const signOut = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Placeholder - implement with @react-native-firebase/auth
+      // import auth from '@react-native-firebase/auth';
+      // await auth().signOut();
+      setUser(null);
+      callbacks?.onSignOut?.();
+    } catch (err) {
+      handleError(err as Error & { code?: string });
+    } finally {
+      setLoading(false);
+    }
+  }, [handleError, callbacks]);
+
+  // Sign in anonymously
+  const signInAnonymously = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Placeholder - implement with @react-native-firebase/auth
+      throw new Error('Anonymous sign-in not implemented');
+    } catch (err) {
+      handleError(err as Error & { code?: string });
+    } finally {
+      setLoading(false);
+    }
+  }, [handleError]);
+
+  // Clear error
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  const value = useMemo<AuthContextValue>(
+    () => ({
+      user,
+      loading,
+      error,
+      isAuthenticated: !!user && !user.isAnonymous,
+      isAnonymous: user?.isAnonymous ?? false,
+      signInWithGoogle,
+      signInWithApple,
+      signInWithEmail,
+      signUpWithEmail,
+      resetPassword,
+      signOut,
+      signInAnonymously,
+      clearError,
+      texts,
+      providerConfig,
+    }),
+    [
+      user,
+      loading,
+      error,
+      signInWithGoogle,
+      signInWithApple,
+      signInWithEmail,
+      signUpWithEmail,
+      resetPassword,
+      signOut,
+      signInAnonymously,
+      clearError,
+      texts,
+      providerConfig,
+    ]
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}

package/src/AuthScreen.tsx

@@ -0,0 +1,117 @@
+/**
+ * AuthScreen - Full-screen authentication component for React Native
+ */
+
+import React, { useState } from 'react';
+import { View, Text, ScrollView, SafeAreaView } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+import type { AuthScreenProps, AuthMode } from './types';
+import { useAuthStatus } from './AuthProvider';
+import { ProviderButtons } from './ProviderButtons';
+import { EmailSignInForm } from './EmailSignInForm';
+import { EmailSignUpForm } from './EmailSignUpForm';
+import { ForgotPasswordForm } from './ForgotPasswordForm';
+
+/**
+ * Full-screen authentication component
+ */
+export const AuthScreen: React.FC<AuthScreenProps> = ({
+  initialMode = 'select',
+  className,
+  providers,
+  showTitle = true,
+  title,
+  onModeChange,
+  onSuccess,
+  onTrack,
+  trackingLabel,
+  componentName = 'AuthScreen',
+}) => {
+  const { texts, providerConfig } = useAuthStatus();
+  const [mode, setMode] = useState<AuthMode>(initialMode);
+
+  const activeProviders = providers || providerConfig.providers;
+
+  const handleModeChange = (newMode: AuthMode) => {
+    setMode(newMode);
+    onModeChange?.(newMode);
+  };
+
+  const getTitle = (): string => {
+    if (title) return title;
+    switch (mode) {
+      case 'select':
+        return texts.signInTitle;
+      case 'email-signin':
+        return texts.signInWithEmail;
+      case 'email-signup':
+        return texts.createAccount;
+      case 'forgot-password':
+        return texts.resetPassword;
+    }
+  };
+
+  const renderContent = () => {
+    switch (mode) {
+      case 'select':
+        return (
+          <ProviderButtons
+            providers={activeProviders}
+            onEmailPress={() => handleModeChange('email-signin')}
+            onTrack={onTrack}
+            trackingLabel={trackingLabel}
+            componentName={componentName}
+          />
+        );
+      case 'email-signin':
+        return (
+          <EmailSignInForm
+            onSwitchToSignUp={() => handleModeChange('email-signup')}
+            onSwitchToForgotPassword={() => handleModeChange('forgot-password')}
+            onSuccess={onSuccess}
+            onTrack={onTrack}
+            trackingLabel={trackingLabel}
+            componentName={componentName}
+          />
+        );
+      case 'email-signup':
+        return (
+          <EmailSignUpForm
+            onSwitchToSignIn={() => handleModeChange('email-signin')}
+            onSuccess={onSuccess}
+            onTrack={onTrack}
+            trackingLabel={trackingLabel}
+            componentName={componentName}
+          />
+        );
+      case 'forgot-password':
+        return (
+          <ForgotPasswordForm
+            onSwitchToSignIn={() => handleModeChange('email-signin')}
+            onTrack={onTrack}
+            trackingLabel={trackingLabel}
+            componentName={componentName}
+          />
+        );
+    }
+  };
+
+  return (
+    <SafeAreaView className={cn('flex-1 bg-white dark:bg-gray-900', className)}>
+      <ScrollView
+        className='flex-1'
+        contentContainerClassName='flex-grow justify-center px-6 py-8'
+        keyboardShouldPersistTaps='handled'
+      >
+        <View className='max-w-md w-full self-center gap-8'>
+          {showTitle && (
+            <Text className='text-2xl font-bold text-gray-900 dark:text-white text-center'>
+              {getTitle()}
+            </Text>
+          )}
+          {renderContent()}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};