@chem-po/firebase-native 0.0.38 → 0.0.40

package/src/components/TwoFactorAuthModal.tsx

@@ -1,6 +1,8 @@
 import { EnrollmentFactor, PhoneEnrollmentFactor } from '@chem-po/core'
-import { useAuth, useBackgroundColor } from '@chem-po/react'
+import { useAuth, useBackgroundColor, useBorderColor, useIconColor } from '@chem-po/react'
 import { Txt } from '@chem-po/react-native'
+import { useFont } from '@chem-po/react-native/src/hooks/useFont'
+import { Ionicons } from '@expo/vector-icons'
 import React, { useState } from 'react'
 import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native'
 import { Modal, Portal } from 'react-native-paper'
@@ -8,6 +10,46 @@ import { useBackend } from '../hooks/backend'
 import { AuthenticatorVerify } from './AuthenticatorVerify'
 import { PhoneVerify } from './PhoneVerify'
 
+const FactorView = ({
+  factor,
+  buttonBackgroundColor,
+  iconColor,
+  borderColor,
+  onPress,
+}: {
+  factor: EnrollmentFactor
+  buttonBackgroundColor: string
+  iconColor: string
+  borderColor: string
+  onPress: () => void
+}) => {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.factorButton,
+        {
+          backgroundColor: buttonBackgroundColor,
+          borderColor,
+        },
+      ]}
+      onPress={onPress}
+    >
+      <View style={styles.factorContent}>
+        <Ionicons
+          name={factor.type === 'phone' ? 'phone-portrait' : 'qr-code'}
+          size={20}
+          color={iconColor}
+        />
+        <Txt style={styles.factorHeaderText}>
+          {factor.type === 'phone' ? `Phone: ${factor.phoneNumber}` : 'Authenticator App'}
+        </Txt>
+        {factor.displayName ? (
+          <Txt style={styles.factorDetailsText}>{factor.displayName}</Txt>
+        ) : null}
+      </View>
+    </TouchableOpacity>
+  )
+}
 
 const TwoFactorSelect = ({
   factors,
@@ -17,30 +59,22 @@ const TwoFactorSelect = ({
   onSelect: (factor: EnrollmentFactor) => void
 }) => {
   const buttonBackgroundColor = useBackgroundColor(100)
+  const borderColor = useBorderColor()
+  const iconColor = useIconColor()
+  const textFont = useFont('body', 'md')
   return (
     <View style={styles.selectContainer}>
-      <Txt style={styles.selectTitle}>Select an option to verify with:</Txt>
+      <Txt style={[styles.selectTitle, textFont]}>Select an option to verify with:</Txt>
       <View style={styles.factorsList}>
         {factors.map((factor) => (
-          <TouchableOpacity
-            key={factor.uid}
-            style={[
-              styles.factorButton,
-              {
-                backgroundColor: buttonBackgroundColor,
-              },
-            ]}
+          <FactorView
+            key={`${factor.type}-${factor.enrollmentTime}`}
+            factor={factor}
+            buttonBackgroundColor={buttonBackgroundColor}
             onPress={() => onSelect(factor)}
-          >
-            <Txt style={styles.factorHeaderText}>
-              {factor.type === 'phone' ? `Phone: ${factor.phoneNumber}` : 'Authenticator App'}
-            </Txt>
-            {
-              factor.displayName ? (
-                <Txt style={styles.factorDetailsText}>{factor.displayName}</Txt>
-              ) : null
-            }
-          </TouchableOpacity>
+            iconColor={iconColor}
+            borderColor={borderColor}
+          />
         ))}
       </View>
     </View>
@@ -83,7 +117,9 @@ export const TwoFactorAuthModal = () => {
     <Portal>
       <Modal
         visible={true}
-        onDismiss={() => { auth.logout() }}
+        onDismiss={() => {
+          auth.logout()
+        }}
         style={styles.modal}
       >
         <View style={[styles.modalContent, { backgroundColor }]}>
@@ -96,6 +132,28 @@ export const TwoFactorAuthModal = () => {
   )
 }
 
+const testFactor: EnrollmentFactor = {
+  uid: 'test',
+  type: 'phone',
+  phoneNumber: '1234567890',
+  displayName: 'Test Phone',
+  enrollmentTime: '2021-01-01',
+}
+export const TestTwoFactorVerifyModal = () => {
+  const backgroundColor = useBackgroundColor(150)
+  return (
+    <Portal>
+      <Modal visible={true} onDismiss={() => {}} style={styles.modal}>
+        <View style={[styles.modalContent, { backgroundColor }]}>
+          <ScrollView contentContainerStyle={styles.scrollContent}>
+            <TwoFactorVerify factorInfo={testFactor} />
+          </ScrollView>
+        </View>
+      </Modal>
+    </Portal>
+  )
+}
+
 const styles = StyleSheet.create({
   modal: {
     margin: 0,
@@ -113,18 +171,24 @@ const styles = StyleSheet.create({
   },
   selectTitle: {
     fontSize: 16,
-    marginBottom: 16,
+    marginBottom: 8,
+    paddingHorizontal: 4,
   },
   factorsList: {
     gap: 8,
   },
+  factorContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
   factorButton: {
     padding: 16,
     borderRadius: 8,
     borderWidth: 1,
   },
   factorHeaderText: {
-    fontSize: 14,
+    fontSize: 16,
     fontWeight: 'bold',
     opacity: 0.8,
   },

package/src/hooks/usePhoneVerify.ts

@@ -5,6 +5,7 @@ import { useBackend } from './backend'
 
 export const usePhoneVerify = (factor: PhoneEnrollmentFactor, automaticallySendSmsCode: boolean) => {
   const [code, setCode] = useState('')
+  const [sendingCode, setSendingCode] = useState(false)
   const [verifying, setVerifying] = useState(false)
   const [error, setError] = useState('')
 
@@ -15,14 +16,22 @@ export const usePhoneVerify = (factor: PhoneEnrollmentFactor, automaticallySendS
 
   const initSendCode = useRef(!!automaticallySendSmsCode)
 
-  const { showSuccess, showError, showInfo } = useToast()
+  const { showSuccess, showError } = useToast()
 
   const sendCode = useCallback(async () => {
     if (!enrollmentFactors) {
       showError('Error - No session found')
       return
     }
-    await auth.sendMultiFactorCode(factor, enrollmentFactors.multiFactorResolver)
+    setSendingCode(true)
+    return auth.sendMultiFactorCode(factor, enrollmentFactors.multiFactorResolver)
+      .then(() => {
+        setSendingCode(false)
+      })
+      .catch((e) => {
+        setSendingCode(false)
+        setError(e.message || 'An error occurred')
+      })
   }, [auth, factor, twoFactorVerification, showError])
 
   const initSendCodeFunc = useRef(sendCode)
@@ -32,7 +41,7 @@ export const usePhoneVerify = (factor: PhoneEnrollmentFactor, automaticallySendS
     }
   }, [])
 
-  const handleVerify = useCallback(() => {
+  const handleVerify = useCallback(async () => {
     setVerifying(true)
     setError('')
     if (!twoFactorVerification) {
@@ -54,7 +63,7 @@ export const usePhoneVerify = (factor: PhoneEnrollmentFactor, automaticallySendS
       showError('Error - Two factor verification is not supported')
       return
     }
-    verify(twoFactorVerification, code)
+    return verify(twoFactorVerification, code)
       .then(() => {
         setVerifying(false)
         setCode('')
@@ -69,7 +78,9 @@ export const usePhoneVerify = (factor: PhoneEnrollmentFactor, automaticallySendS
   return {
     code,
     setCode,
+    sendCode,
     verifying,
+    sendingCode,
     error,
     handleVerify,
   }

package/src/utils/validation.ts

@@ -1,4 +1,5 @@
 import { BaseAuthProvider, GoogleAuthProvider } from '@chem-po/core'
+import { Platform } from 'react-native'
 
 interface ValidationResult {
   isValid: boolean
@@ -27,6 +28,12 @@ export const validateAuthConfiguration = (providers: BaseAuthProvider[]): Valida
         'Google webClientId format looks incorrect. Expected format: "xxx.apps.googleusercontent.com"',
       )
     }
+    if (Platform.OS === 'ios' && !googleProvider.iosClientId) {
+      errors.push(
+        'Google provider is missing iosClientId. ' +
+          'Get this from Firebase Console > Authentication > Sign-in method > Google > iOS SDK configuration',
+      )
+    }
   }
 
   // Check environment