@chem-po/firebase-native 0.0.39 → 0.0.41

package/package.json

@@ -2,7 +2,7 @@
   "name": "@chem-po/firebase-native",
   "author": "Elan Canfield",
   "license": "MIT",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "source": "src/index.ts",
@@ -44,9 +44,9 @@
     "react-native-paper": "^5.14.3",
     "react-native-svg": "15.11.2",
     "zustand": "^4.3.3",
-    "@chem-po/react": "0.0.39",
-    "@chem-po/react-native": "0.0.39",
-    "@chem-po/core": "0.0.39"
+    "@chem-po/core": "0.0.41",
+    "@chem-po/react-native": "0.0.41",
+    "@chem-po/react": "0.0.41"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

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}>
+          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',
   },

package/src/components/TwoFactorAuthModal.tsx

@@ -1,6 +1,7 @@
 import { EnrollmentFactor, PhoneEnrollmentFactor } from '@chem-po/core'
-import { useAuth, useBackgroundColor } from '@chem-po/react'
-import { Txt } from '@chem-po/react-native'
+import { useAuth, useBackgroundColor, useBorderColor, useIconColor } from '@chem-po/react'
+import { Txt, useFont } from '@chem-po/react-native'
+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 +9,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 +58,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 +116,9 @@ export const TwoFactorAuthModal = () => {
     <Portal>
       <Modal
         visible={true}
-        onDismiss={() => { auth.logout() }}
+        onDismiss={() => {
+          auth.logout()
+        }}
         style={styles.modal}
       >
         <View style={[styles.modalContent, { backgroundColor }]}>
@@ -96,6 +131,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 +170,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,
   }