@chem-po/firebase-native 0.0.38 → 0.0.40

package/src/adapter/auth.ts

@@ -7,7 +7,7 @@ import {
   EnrollmentFactorsResult,
   LoginResult,
   MultiFactorVerification,
-  WithMultiFactorVerified
+  WithMultiFactorVerified,
 } from '@chem-po/core'
 import {
   AppleAuthProvider,
@@ -27,12 +27,11 @@ import {
 
 import { appleAuth } from '@invertase/react-native-apple-authentication'
 import { GoogleSignin } from '@react-native-google-signin/google-signin'
+import { Platform } from 'react-native'
 import { Auth, User } from '../types/auth'
 
-const isDebug = (
-  typeof process !== 'undefined' && 
-  process.env?.EXPO_PUBLIC_DEBUG === 'true'
-) || false
+const isDebug =
+  (typeof process !== 'undefined' && process.env?.EXPO_PUBLIC_DEBUG === 'true') || false
 
 const debugLog = (message: string, data?: any) => {
   if (isDebug) {
@@ -46,24 +45,24 @@ const getUserWithRole = async <UserData extends BaseUserData>(
   user: FirebaseAuthTypes.User
 ): Promise<WithMultiFactorVerified<UserData>> => {
   debugLog('Getting user with role', { uid: user.uid, email: user.email })
-  
+
   try {
     const { claims } = await getIdTokenResult(user)
     debugLog('Retrieved ID token claims', { role: claims.role, customClaims: Object.keys(claims) })
-    
+
     const userWithRole = {
       ...(user as any),
       role: claims.role ?? ('user' as BaseUserRole),
-      multiFactorVerified: !!user.multiFactor?.enrolledFactors.length
+      multiFactorVerified: !!user.multiFactor?.enrolledFactors.length,
     } as WithMultiFactorVerified<UserData>
-    
-    debugLog('User with role created', { 
-      uid: userWithRole.uid, 
-      role: userWithRole.role, 
+
+    debugLog('User with role created', {
+      uid: userWithRole.uid,
+      role: userWithRole.role,
       multiFactorVerified: userWithRole.multiFactorVerified,
-      enrolledFactorsCount: user.multiFactor?.enrolledFactors.length || 0
+      enrolledFactorsCount: user.multiFactor?.enrolledFactors.length || 0,
     })
-    
+
     return userWithRole
   } catch (error) {
     debugLog('Error getting user with role', error)
@@ -121,7 +120,7 @@ const sendMultiFactorCode = async (
   resolver: FirebaseAuthTypes.MultiFactorResolver
 ): Promise<MultiFactorVerification> => {
   debugLog('Sending multi-factor code', { factorType: factor.type, factorUid: factor.uid })
-  
+
   const sessionId = resolver.session
   // const verificationId = await new PhoneAuthProvider(auth).verifyPhoneNumber(phoneSignInFactor, sessionId)
   if (factor.type === 'phone') {
@@ -130,7 +129,9 @@ const sendMultiFactorCode = async (
         toFirebaseFactor(factor),
         sessionId
       )
-      debugLog('Multi-factor code sent successfully', { verificationId: verificationId.substring(0, 10) + '...' })
+      debugLog('Multi-factor code sent successfully', {
+        verificationId: verificationId.substring(0, 10) + '...',
+      })
       return {
         verificationId,
         factor,
@@ -146,19 +147,23 @@ const sendMultiFactorCode = async (
 
 const getEnrolledFactors = async (auth: Auth, error: any): Promise<EnrollmentFactorsResult> => {
   debugLog('Getting enrolled factors from error', { errorCode: error?.code })
-  
+
   try {
     const resolver = getMultiFactorResolver(auth, error)
     debugLog('Multi-factor resolver created', { hintsCount: resolver.hints.length })
-    
+
     if (resolver.hints.length === 0) {
       debugLog('No enrolled factors found')
-      throw new Error('No multi-factor verification methods found, please enroll one on the website')
+      throw new Error(
+        'No multi-factor verification methods found, please enroll one on the website'
+      )
     }
-    
+
     const enrollmentFactors = resolver.hints.map(toEnrollmentFactor)
-    debugLog('Enrollment factors mapped', { factors: enrollmentFactors.map(f => ({ type: f.type, uid: f.uid })) })
-    
+    debugLog('Enrollment factors mapped', {
+      factors: enrollmentFactors.map((f) => ({ type: f.type, uid: f.uid })),
+    })
+
     return {
       enrollmentFactors,
       multiFactorResolver: resolver,
@@ -173,36 +178,36 @@ const verifyMultiFactor = async (
   verification: MultiFactorVerification,
   code: string
 ): Promise<LoginResult<User>> => {
-  debugLog('Verifying multi-factor code', { 
-    factorType: verification.factor.type, 
-    codeLength: code.length 
+  debugLog('Verifying multi-factor code', {
+    factorType: verification.factor.type,
+    codeLength: code.length,
   })
-  
+
   try {
     const credential = await PhoneAuthProvider.credential(verification.verificationId, code)
     debugLog('Phone credential created')
-    
+
     const assertion = PhoneMultiFactorGenerator.assertion(credential)
     debugLog('Multi-factor assertion created')
-    
+
     const resolver = (verification as any).resolver
     if (!resolver) {
       debugLog('Multi-factor resolver not found')
       throw new Error('Internal error signing in with two factor: resolver not found')
     }
-    
+
     const userCredential = await resolver.resolveSignIn(assertion)
     debugLog('Multi-factor sign-in resolved', { uid: userCredential.user?.uid })
-    
+
     const user = userCredential.user
     if (!user) {
       debugLog('No user found after multi-factor resolution')
       throw new Error('No user found')
     }
-    
+
     const userWithRole = await getUserWithRole(user)
     debugLog('Multi-factor verification completed successfully')
-    
+
     return { user: userWithRole }
   } catch (error) {
     debugLog('Error verifying multi-factor', error)
@@ -212,43 +217,51 @@ const verifyMultiFactor = async (
 
 const handleSignInError = async (error: any): Promise<LoginResult<User>> => {
   debugLog('Handling sign-in error', { code: error?.code, message: error?.message })
-  
+
   if (error.code === 'auth/multi-factor-auth-required') {
     debugLog('Multi-factor authentication required')
     return { requestArgs: error }
   }
-  
+
   debugLog('Re-throwing sign-in error')
   throw error
 }
 
 const initializeProvider = async (provider: BaseAuthProvider) => {
-  debugLog('Initializing provider', { name: provider.name, alreadyInitialized: providerInitialized[provider.name] })
-  
+  debugLog('Initializing provider', {
+    name: provider.name,
+    alreadyInitialized: providerInitialized[provider.name],
+  })
+
   if (providerInitialized[provider.name]) {
     debugLog('Provider already initialized, skipping')
     return
   }
-  
+
   switch (provider.name) {
     case 'google':
-      debugLog('Initializing Google provider', { webClientId: !!(provider as GoogleAuthProvider).webClientId })
-      
-      if (!(provider as GoogleAuthProvider).webClientId) {
+      const { webClientId, iosClientId } = provider as GoogleAuthProvider
+      debugLog('Initializing Google provider', {
+        webClientId,
+        iosClientId,
+      })
+
+      if (!webClientId) {
         debugLog('Google web client ID missing')
         throw new Error(
           'Google web client ID is required when using Google Auth. ' +
-          'Get your webClientId from Firebase Console > Authentication > Sign-in method > Google > Web SDK configuration. ' +
-          'Then provide it in your GoogleAuthProvider: { name: "google", webClientId: "YOUR_CLIENT_ID" }'
+            'Get your webClientId from Firebase Console > Authentication > Sign-in method > Google > Web SDK configuration. ' +
+            'Then provide it in your GoogleAuthProvider: { name: "google", webClientId: "YOUR_CLIENT_ID" }'
         )
       }
-      
+
       try {
         await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true })
         debugLog('Google Play Services available')
-        
+
         GoogleSignin.configure({
-          webClientId: (provider as any).webClientId,
+          webClientId: Platform.OS === 'ios' ? iosClientId : webClientId,
+          iosClientId,
         })
         debugLog('Google Sign-In configured successfully')
       } catch (error) {
@@ -256,7 +269,7 @@ const initializeProvider = async (provider: BaseAuthProvider) => {
         if (error instanceof Error && error.message.includes('UNAVAILABLE')) {
           throw new Error(
             'Google Play Services is not available or needs to be updated. ' +
-            'Please ensure Google Play Services is installed and up to date on this device.'
+              'Please ensure Google Play Services is installed and up to date on this device.'
           )
         }
         throw error
@@ -294,28 +307,28 @@ const handleInitialLogin = async (
   userCredential: FirebaseAuthTypes.UserCredential,
   twoFactorRequired: boolean
 ): Promise<LoginResult<User>> => {
-  debugLog('Handling initial login', { 
-    uid: userCredential.user?.uid, 
+  debugLog('Handling initial login', {
+    uid: userCredential.user?.uid,
     twoFactorRequired,
-    enrolledFactorsCount: userCredential.user?.multiFactor?.enrolledFactors.length || 0
+    enrolledFactorsCount: userCredential.user?.multiFactor?.enrolledFactors.length || 0,
   })
-  
+
   const user = userCredential.user
   if (!user) {
     debugLog('No user found in credential')
     throw new Error('No user found')
   }
-  
+
   if (twoFactorRequired) {
     debugLog('Two-factor authentication is required but user has no enrolled factors')
     throw new Error(
       'This app requires two factor authentication, please enroll a factor on the website and try again'
     )
   }
-  
+
   const userWithRole = await getUserWithRole(user)
   debugLog('Initial login completed successfully')
-  
+
   return { user: userWithRole }
 }
 
@@ -324,7 +337,7 @@ const loginWithApple = async (
   twoFactorRequired: boolean
 ): Promise<LoginResult<User>> => {
   debugLog('Starting Apple sign-in', { twoFactorRequired })
-  
+
   try {
     // Start the sign-in request
     const appleAuthRequestResponse = await appleAuth.performRequest({
@@ -338,9 +351,9 @@ const loginWithApple = async (
       throw new Error('Apple Sign-In failed - no identity token returned')
     }
 
-    debugLog('Apple sign-in response received', { 
+    debugLog('Apple sign-in response received', {
       hasIdentityToken: appleAuthRequestResponse.identityToken,
-      hasNonce: appleAuthRequestResponse.nonce
+      hasNonce: appleAuthRequestResponse.nonce,
     })
 
     // Create a Firebase credential from the response
@@ -362,24 +375,24 @@ const loginWithGoogle = async (
   twoFactorRequired: boolean
 ): Promise<LoginResult<User>> => {
   debugLog('Starting Google sign-in', { twoFactorRequired })
-  
+
   try {
     debugLog('Calling GoogleSignin.signIn()')
     const signInResult = await GoogleSignin.signIn()
     debugLog('Google sign-in result received', { hasIdToken: !!signInResult.data?.idToken })
-    
+
     const idToken = signInResult.data?.idToken
     if (!idToken) {
       debugLog('No ID token found in Google sign-in result')
       throw new Error('No ID token found')
     }
-    
+
     debugLog('Creating Google credential')
     const googleCredential = GoogleAuthProvider.credential(idToken)
-    
+
     debugLog('Signing in with Google credential')
     const userCredential = await signInWithCredential(auth, googleCredential)
-    
+
     return await handleInitialLogin(userCredential, twoFactorRequired)
   } catch (error) {
     debugLog('Error in Google sign-in', error)
@@ -393,18 +406,18 @@ const getLoginWithPassword =
     provider: BaseAuthProvider,
     { email, password }: { email: string; password: string }
   ): Promise<LoginResult<User>> => {
-    debugLog('Starting email/password sign-in', { 
-      provider: provider.name, 
-      email, 
-      twoFactorRequired 
+    debugLog('Starting email/password sign-in', {
+      provider: provider.name,
+      email,
+      twoFactorRequired,
     })
-    
+
     await initializeProvider(provider)
     try {
       debugLog('Calling signInWithEmailAndPassword')
       const userCredential = await signInWithEmailAndPassword(auth, email, password)
       debugLog('Email/password sign-in successful', { uid: userCredential.user?.uid })
-      
+
       return await handleInitialLogin(userCredential, twoFactorRequired)
     } catch (error) {
       debugLog('Error in email/password sign-in', error)
@@ -416,7 +429,7 @@ const getLoginWithPopup =
   (auth: Auth, twoFactorRequired: boolean) =>
   async (provider: BaseAuthProvider): Promise<LoginResult<User>> => {
     debugLog('Starting popup sign-in', { provider: provider.name, twoFactorRequired })
-    
+
     await initializeProvider(provider)
     switch (provider.name) {
       case 'google':
@@ -433,7 +446,7 @@ const getLoginWithRedirect =
   (auth: Auth, twoFactorRequired: boolean) =>
   async (provider: BaseAuthProvider): Promise<LoginResult<User>> => {
     debugLog('Starting redirect sign-in', { provider: provider.name, twoFactorRequired })
-    
+
     // In React Native, redirect is the same as popup since we're using native SDKs
     return getLoginWithPopup(auth, twoFactorRequired)(provider)
   }
@@ -441,18 +454,18 @@ const getLoginWithRedirect =
 const getLoginWithToken =
   (auth: Auth, twoFactorRequired: boolean) =>
   async (provider: BaseAuthProvider, token: string): Promise<LoginResult<User>> => {
-    debugLog('Starting token sign-in', { 
-      provider: provider.name, 
+    debugLog('Starting token sign-in', {
+      provider: provider.name,
       tokenLength: token.length,
-      twoFactorRequired 
+      twoFactorRequired,
     })
-    
+
     await initializeProvider(provider)
     try {
       debugLog('Calling signInWithCustomToken')
       const userCredential = await signInWithCustomToken(auth, token)
       debugLog('Token sign-in successful', { uid: userCredential.user?.uid })
-      
+
       return await handleInitialLogin(userCredential, twoFactorRequired)
     } catch (error) {
       debugLog('Error in token sign-in', error)
@@ -466,7 +479,7 @@ const resetPassword = async (
   usernameOrEmail: string
 ): Promise<void> => {
   debugLog('Starting password reset', { provider: provider.name, email: usernameOrEmail })
-  
+
   await initializeProvider(provider)
   try {
     await sendPasswordResetEmail(auth, usernameOrEmail)
@@ -482,7 +495,7 @@ export const getFirebaseAuthAdapter = (
   twoFactorRequired: boolean
 ): AuthAdapter<BaseAuthProvider, User, { email: string; password: string }> => {
   debugLog('Creating Firebase Auth Adapter', { twoFactorRequired })
-  
+
   return {
     twoFactorRequired,
     getCurrentUser: async () => {
@@ -528,13 +541,15 @@ export const getFirebaseAuthAdapter = (
           return
         }
         debugLog('User state changed: user signed in', { uid: user.uid, email: user.email })
-        getUserWithRole(user).then((result) => {
-          debugLog('User subscription callback completed', { uid: result.uid, role: result.role })
-          callback(result)
-        }).catch((error) => {
-          debugLog('Error in user subscription callback', error)
-          callback(null)
-        })
+        getUserWithRole(user)
+          .then((result) => {
+            debugLog('User subscription callback completed', { uid: result.uid, role: result.role })
+            callback(result)
+          })
+          .catch((error) => {
+            debugLog('Error in user subscription callback', error)
+            callback(null)
+          })
       })
     },
   }

package/src/components/FirebaseSignIn.tsx

@@ -1,8 +1,9 @@
 import { useBackend } from '../hooks'
 
 import { AppleAuthProvider, GoogleAuthProvider, ThirdPartyAuthProvider } from '@chem-po/core'
-import { TextField, useBorderColor, useToast } from '@chem-po/react'
+import { TextField, useBorderColor, useTextColor, useToast } from '@chem-po/react'
 import { LoadingButton, StandaloneInput, Txt } from '@chem-po/react-native'
+import { ButtonText } from '@chem-po/react-native/src/components/button/ButtonText'
 import appleAuth from '@invertase/react-native-apple-authentication'
 import React, { useCallback, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
@@ -40,14 +41,19 @@ const ThirdPartyLogin = ({ provider }: { provider: GoogleAuthProvider | AppleAut
     })
   }, [auth, provider, showError])
 
-  const borderColor = useBorderColor()
-
+  const textColor = useTextColor(400)
   return (
     <View style={styles.row}>
-      <LoadingButton style={[styles.googleLoginButton, { borderColor }]} onPress={handleSignIn}>
+      <LoadingButton
+        color={textColor}
+        variant="outline"
+        style={[styles.googleLoginButton]}
+        onPress={handleSignIn}>
         <View style={styles.googleLogin}>
           {thirdPartyInfo[provider.name].icon}
-          <Txt>Log In with {thirdPartyInfo[provider.name].name}</Txt>
+          <ButtonText
+            variant="outline"
+            color={textColor}>{`Log In with ${thirdPartyInfo[provider.name].name}`}</ButtonText>
         </View>
       </LoadingButton>
     </View>
@@ -57,20 +63,18 @@ const ThirdPartyLogin = ({ provider }: { provider: GoogleAuthProvider | AppleAut
 const EmailPasswordLogin = () => {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const forgotPasswordTextColor = useTextColor(400)
 
   const { auth } = useBackend()
   const { showInfo } = useToast()
 
   const handleLogin = async () => {
-    setIsLoading(true)
     try {
       await auth.loginWithPassword({ name: 'email' }, { email, password })
     } catch (error) {
       setError(error instanceof Error ? error.message : 'An unknown error occurred')
     }
-    setIsLoading(false)
   }
 
   return (
@@ -85,18 +89,19 @@ const EmailPasswordLogin = () => {
       <View style={styles.row}>
         <View style={styles.forgotPassword}>
           <LoadingButton
+            color={forgotPasswordTextColor}
             textStyle={styles.forgotPasswordButtonText}
-            contentStyle={styles.forgotPasswordButton}
-            onPress={() => {
+            style={styles.forgotPasswordButton}
+            size="sm"
+            variant="outline"
+            onPress={async () => {
               // console.log('press')
               showInfo('Visit our website to reset your password')
             }}>
             Forgot Password?
           </LoadingButton>
         </View>
-        <LoadingButton onPress={() => handleLogin()} disabled={isLoading}>
-          Sign In
-        </LoadingButton>
+        <LoadingButton onPress={() => handleLogin()}>Sign In</LoadingButton>
       </View>
     </View>
   )
@@ -149,7 +154,7 @@ const styles = StyleSheet.create({
   },
   column: {
     flexDirection: 'column',
-    gap: 20,
+    gap: 10,
     flex: 1,
     width: '100%',
     alignItems: 'center',
@@ -176,6 +181,7 @@ const styles = StyleSheet.create({
   },
   forgotPasswordButton: {
     borderWidth: 0,
+    backgroundColor: 'transparent',
   },
   forgotPasswordButtonText: {
     fontSize: 14,
@@ -183,6 +189,7 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
     width: '100%',
   },
   forgotPassword: {

package/src/components/PhoneVerify.tsx

@@ -1,53 +1,66 @@
-import { PhoneEnrollmentFactor } from '@chem-po/core'
-import { useAuth } from '@chem-po/react'
-import { Txt } from '@chem-po/react-native'
-import React from 'react'
-import { ActivityIndicator, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'
+import { formatPhoneNumber, PhoneEnrollmentFactor } from '@chem-po/core'
+import { useAuth, useBorderColor, useButtonColor, usePlaceholderColor, useTextColor } from '@chem-po/react'
+import { CircularProgress, LoadingButton, Txt } from '@chem-po/react-native'
+import React, { useMemo } from 'react'
+import { StyleSheet, TextInput, View } from 'react-native'
 import { usePhoneVerify } from '../hooks/usePhoneVerify'
 
 // UI to send code and verify code
 export const PhoneVerify = ({ factor }: { factor: PhoneEnrollmentFactor }) => {
-  const { handleVerify, verifying, error, code, setCode } =
-    usePhoneVerify(factor, true)
-
-  const {multiFactorVerification: twoFactorVerification, multiFactorLoading: loading} = useAuth()
+  const { handleVerify, verifying, error, code, setCode, sendCode, sendingCode } = usePhoneVerify(factor, true)
+  const { multiFactorVerification: twoFactorVerification, multiFactorLoading: loading } = useAuth()
+  const buttonBackgroundColor = useButtonColor()
+  const borderColor = useBorderColor()
+  const textColor = useTextColor()
+  const placeholderColor = usePlaceholderColor()
 
   const verificationId = twoFactorVerification?.verificationId
+  const formattedPhoneNumber = useMemo(
+    () =>
+      Number.isNaN(Number(factor.phoneNumber))
+        ? factor.phoneNumber
+        : formatPhoneNumber(factor.phoneNumber),
+    [factor.phoneNumber]
+  )
 
   let body: React.ReactNode = null
 
-  if (loading) {
+  if (sendingCode) {
     body = (
       <View style={styles.container}>
-        <ActivityIndicator size="large" color="#0000ff" />
+        <CircularProgress size='large' />
         <Txt style={styles.text}>Sending verification code...</Txt>
       </View>
     )
-  } else if (verificationId) {
+  } else if (verificationId || verifying) {
     body = (
       <View style={styles.container}>
         <Txt style={styles.text}>Enter the code sent to your phone:</Txt>
         <TextInput
-          style={styles.input}
+          style={[styles.input, { borderColor, color: textColor }]}
           value={code}
+          placeholderTextColor={placeholderColor}
           onChangeText={setCode}
-          placeholder="Verification Code"
-          keyboardType="number-pad"
+          placeholder='Verification Code'
+          keyboardType='number-pad'
           maxLength={6}
         />
         {error ? <Txt style={styles.errorText}>{error}</Txt> : null}
-        <TouchableOpacity style={styles.button} onPress={handleVerify} disabled={verifying}>
-          <Txt style={styles.buttonText}>{verifying ? 'Verifying...' : 'Verify'}</Txt>
-        </TouchableOpacity>
+        <LoadingButton variant='solid' onPress={handleVerify} color={buttonBackgroundColor}>
+          {verifying ? 'Verifying...' : 'Verify'}
+        </LoadingButton>
       </View>
     )
   } else {
     body = (
       <View style={styles.container}>
-        <Txt style={styles.text}>We'll send a verification code to {factor.phoneNumber}</Txt>
-        <TouchableOpacity style={styles.button} onPress={() => {}} disabled={loading}>
-          <Txt style={styles.buttonText}>Send Verification Code</Txt>
-        </TouchableOpacity>
+        <View style={styles.textContainer}>
+          <Txt style={styles.infoText}>We'll send a verification code to:</Txt>
+          <Txt style={styles.text}>{formattedPhoneNumber}</Txt>
+        </View>
+        <LoadingButton variant='solid' onPress={sendCode} disabled={loading} color={buttonBackgroundColor}>
+          Send Verification Code
+        </LoadingButton>
       </View>
     )
   }
@@ -64,7 +77,17 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 16,
+    gap: 8,
+  },
+  textContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4,
+  },
+  infoText: {
+    fontSize: 15,
+    opacity: 0.8,
+    textAlign: 'center',
   },
   text: {
     fontSize: 16,
@@ -75,22 +98,12 @@ const styles = StyleSheet.create({
     width: '100%',
     height: 48,
     borderWidth: 1,
-    borderColor: '#ccc',
     borderRadius: 8,
     paddingHorizontal: 16,
     fontSize: 16,
     marginBottom: 8,
   },
-  button: {
-    backgroundColor: '#007AFF',
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-    borderRadius: 8,
-    minWidth: 200,
-    alignItems: 'center',
-  },
   buttonText: {
-    color: 'white',
     fontSize: 16,
     fontWeight: '600',
   },