@chem-po/firebase-native 0.0.16 → 0.0.18

package/src/auth/functions.ts

@@ -0,0 +1,7 @@
+import { FirebaseFunctionsTypes } from '@react-native-firebase/functions'
+
+export const getThirdPartyAuthUrl = (functions: FirebaseFunctionsTypes.Module) =>
+  functions.httpsCallable('getThirdPartyAuthUrl')
+
+export const getThirdPartyAuthToken = (functions: FirebaseFunctionsTypes.Module) =>
+  functions.httpsCallable('getThirdPartyAuthToken')

package/src/auth/index.ts

@@ -0,0 +1 @@
+export * from './functions'

package/src/components/AuthenticatorVerify.tsx

@@ -0,0 +1,75 @@
+import { LoadingButton, Txt } from '@chem-po/react-native'
+import React from 'react'
+import { StyleSheet, TextInput, View } from 'react-native'
+import { useAuthenticatorVerify } from '../hooks/useAuthenticatorVerify'
+
+export const AuthenticatorVerify = () => {
+  const { code, setCode, verifying, error, handleVerify } = useAuthenticatorVerify()
+
+  return (
+    <View style={styles.wrapper}>
+      <View style={styles.container}>
+        <Txt style={styles.text}>Enter the code on your authenticator app:</Txt>
+        <TextInput
+          style={styles.input}
+          value={code}
+          onChangeText={setCode}
+          placeholder="Verification Code"
+          keyboardType="number-pad"
+          maxLength={6}
+          autoFocus
+        />
+        {error ? <Txt style={styles.errorText}>{error}</Txt> : null}
+        <LoadingButton style={styles.button} onPress={handleVerify} disabled={verifying}>
+          <Txt style={styles.buttonText}>{verifying ? 'Verifying...' : 'Verify'}</Txt>
+        </LoadingButton>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    padding: 16,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 16,
+  },
+  text: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  input: {
+    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',
+  },
+  errorText: {
+    color: 'red',
+    fontSize: 14,
+    marginBottom: 8,
+  },
+})

package/src/components/FirebaseSignIn.tsx

@@ -0,0 +1,187 @@
+import { useBackend } from '../hooks'
+
+import { GoogleAuthProvider } from '@chem-po/core'
+import { TextField, useBorderColor, useToast } from '@chem-po/react'
+import { LoadingButton, StandaloneInput, Txt } from '@chem-po/react-native'
+import React, { useCallback, useState } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Divider } from 'react-native-paper'
+import SvgGoogle from '../icons/Google'
+
+const emailField: TextField = {
+  _type: 'text',
+  type: 'email',
+  placeholder: 'Email',
+}
+
+const passwordField: TextField = {
+  _type: 'text',
+  type: 'password',
+  placeholder: 'Password',
+}
+
+const GoogleLogin = ({ provider }: { provider: GoogleAuthProvider }) => {
+  const { auth } = useBackend()
+  const { showError } = useToast()
+
+  const handleSignIn = useCallback(() => {
+    return auth.loginWithPopup(provider).catch(error => {
+      showError(error instanceof Error ? error.message : 'An unknown error occurred')
+    })
+  }, [auth, provider, showError])
+
+  return (
+    <View style={styles.row}>
+      <LoadingButton style={styles.googleLoginButton} onPress={handleSignIn}>
+        <View style={styles.googleLogin}>
+          <SvgGoogle width={24} />
+          <Txt>Log In with Google</Txt>
+        </View>
+      </LoadingButton>
+    </View>
+  )
+}
+
+const EmailPasswordLogin = () => {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const { auth } = useBackend()
+
+  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 (
+    <View style={styles.column}>
+      <StandaloneInput field={emailField} onChange={setEmail} value={email} />
+      <StandaloneInput field={passwordField} onChange={setPassword} value={password} />
+      {error && (
+        <View style={styles.error}>
+          <Txt style={styles.errorText}>{error}</Txt>
+        </View>
+      )}
+      <View style={styles.row}>
+        <View style={styles.forgotPassword}>
+          <LoadingButton
+            textStyle={styles.forgotPasswordButtonText}
+            contentStyle={styles.forgotPasswordButton}
+            onPress={() => {
+              console.log('press')
+            }}>
+            Forgot Password?
+          </LoadingButton>
+        </View>
+        <LoadingButton onPress={() => handleLogin()} disabled={isLoading}>
+          Sign In
+        </LoadingButton>
+      </View>
+    </View>
+  )
+}
+
+export const FirebaseSignIn = ({
+  googleProvider,
+}: {
+  googleProvider: GoogleAuthProvider | null
+}) => {
+  const borderColor = useBorderColor()
+  return (
+    <View style={styles.signInContent}>
+      <EmailPasswordLogin />
+      {googleProvider ? (
+        <>
+          <Divider style={{ backgroundColor: borderColor, width: '100%' }} />
+          <GoogleLogin provider={googleProvider} />
+        </>
+      ) : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  column: {
+    flexDirection: 'column',
+    gap: 20,
+    flex: 1,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  colorModeToggle: {
+    paddingVertical: 20,
+  },
+  signInContent: {
+    paddingVertical: 20,
+    paddingHorizontal: 20,
+    height: 300,
+    gap: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+  },
+  forgotPasswordButton: {
+    borderWidth: 0,
+  },
+  forgotPasswordButtonText: {
+    fontSize: 14,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  forgotPassword: {
+    // flex: 1,
+  },
+  header: {
+    fontSize: 16,
+    opacity: 0.7,
+    fontWeight: 'bold',
+  },
+  infoText: {
+    fontSize: 16,
+    textAlign: 'center',
+    // fontFamily: fontFamilies.body.regular,
+    paddingBottom: 20,
+  },
+  logo: {
+    height: 50,
+    resizeMode: 'contain',
+  },
+  link: {
+    fontSize: 14,
+    // fontFamily: fontFamilies.body.regular,
+    textDecorationLine: 'underline',
+    fontWeight: 'semibold',
+  },
+  googleLogin: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+    width: '100%',
+  },
+  googleLoginButton: {
+    width: '100%',
+  },
+  error: {},
+  errorText: {
+    fontSize: 12,
+    color: 'red',
+  },
+})

package/src/components/PhoneVerify.tsx

@@ -0,0 +1,102 @@
+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 { 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 verificationId = twoFactorVerification?.verificationId
+
+  let body: React.ReactNode = null
+
+  if (loading) {
+    body = (
+      <View style={styles.container}>
+        <ActivityIndicator size="large" color="#0000ff" />
+        <Txt style={styles.text}>Sending verification code...</Txt>
+      </View>
+    )
+  } else if (verificationId) {
+    body = (
+      <View style={styles.container}>
+        <Txt style={styles.text}>Enter the code sent to your phone:</Txt>
+        <TextInput
+          style={styles.input}
+          value={code}
+          onChangeText={setCode}
+          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>
+      </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>
+    )
+  }
+
+  return <View style={styles.wrapper}>{body}</View>
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    padding: 16,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 16,
+  },
+  text: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  input: {
+    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',
+  },
+  errorText: {
+    color: 'red',
+    fontSize: 14,
+    marginBottom: 8,
+  },
+})

package/src/components/TwoFactorAuthModal.tsx

@@ -0,0 +1,133 @@
+import { EnrollmentFactor, PhoneEnrollmentFactor } from '@chem-po/core'
+import { useAuth, useBackgroundColor } from '@chem-po/react'
+import { Txt } from '@chem-po/react-native'
+import React, { useState } from 'react'
+import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Modal, Portal } from 'react-native-paper'
+import { useBackend } from '../hooks/backend'
+import { AuthenticatorVerify } from './AuthenticatorVerify'
+import { PhoneVerify } from './PhoneVerify'
+
+
+const TwoFactorSelect = ({
+  factors,
+  onSelect,
+}: {
+  factors: EnrollmentFactor[]
+  onSelect: (factor: EnrollmentFactor) => void
+}) => {
+  const buttonBackgroundColor = useBackgroundColor(100)
+  return (
+    <View style={styles.selectContainer}>
+      <Txt style={styles.selectTitle}>Select an option to verify with:</Txt>
+      <View style={styles.factorsList}>
+        {factors.map((factor) => (
+          <TouchableOpacity
+            key={factor.uid}
+            style={[
+              styles.factorButton,
+              {
+                backgroundColor: 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>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+const TwoFactorVerify = ({ factorInfo }: { factorInfo: EnrollmentFactor }) =>
+  factorInfo.type === 'phone' ? (
+    <PhoneVerify factor={factorInfo as PhoneEnrollmentFactor} />
+  ) : (
+    <AuthenticatorVerify />
+  )
+
+const TwoFactorContent = () => {
+  const [selectedEnrollmentFactor, setSelectedEnrollmentFactor] = useState<EnrollmentFactor | null>(
+    null
+  )
+  const enrolledFactors = useAuth((s) => s.enrollmentFactors)
+
+  if (selectedEnrollmentFactor) return <TwoFactorVerify factorInfo={selectedEnrollmentFactor} />
+  if (!enrolledFactors) return null
+  if (enrolledFactors.enrollmentFactors.length === 0) return null
+  // if (enrolledFactors.enrollmentFactors.length === 1) return <TwoFactorVerify factorInfo={enrolledFactors.enrollmentFactors[0]} />
+  return (
+    <TwoFactorSelect
+      factors={enrolledFactors.enrollmentFactors}
+      onSelect={setSelectedEnrollmentFactor}
+    />
+  )
+}
+
+export const TwoFactorAuthModal = () => {
+  const { multiFactorVerification: twoFactorVerification, enrollmentFactors } = useAuth()
+
+  const {auth} = useBackend()
+  const backgroundColor = useBackgroundColor(150)
+  if (!twoFactorVerification && !enrollmentFactors) return null
+
+  return (
+    <Portal>
+      <Modal
+        visible={true}
+        onDismiss={() => {auth.logout()}}
+        contentContainerStyle={[styles.modalContent, { backgroundColor }]}
+        style={styles.modal}
+      >
+        <ScrollView contentContainerStyle={styles.scrollContent}>
+          <TwoFactorContent />
+        </ScrollView>
+      </Modal>
+    </Portal>
+  )
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+  },
+  modalContent: {
+    margin: 20,
+    borderRadius: 12,
+    maxHeight: '80%',
+  },
+  scrollContent: {
+    padding: 16,
+  },
+  selectContainer: {
+    width: '100%',
+  },
+  selectTitle: {
+    fontSize: 16,
+    marginBottom: 16,
+  },
+  factorsList: {
+    gap: 8,
+  },
+  factorButton: {
+    padding: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  factorHeaderText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    opacity: 0.8,
+  },
+  factorDetailsText: {
+    fontSize: 16,
+  },
+})

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './FirebaseSignIn'
+export * from './TwoFactorAuthModal'

package/src/contexts/FirebaseContext.tsx

@@ -0,0 +1,54 @@
+import firebase from '@react-native-firebase/app'
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react'
+import type {
+  FirebaseAuth,
+  FirebaseConfig,
+  FirebaseContextValue,
+  FirebaseFirestore,
+  FirebaseStorage,
+} from '../types'
+
+const FirebaseContext = createContext<FirebaseContextValue | null>(null)
+
+export interface FirebaseProviderProps {
+  config: FirebaseConfig
+  children: React.ReactNode
+}
+
+export function FirebaseProvider({ config, children }: FirebaseProviderProps) {
+  const [loading, setLoading] = useState(true)
+  const [app, setApp] = useState<FirebaseContextValue['app'] | null>(null)
+  const [auth] = useState<FirebaseAuth>(firebase.auth())
+  const [firestore] = useState<FirebaseFirestore>(firebase.firestore())
+  const [storage] = useState<FirebaseStorage>(firebase.storage())
+
+  useEffect(() => {
+    const initializeApp = async () => {
+      const firebaseApp = await firebase.initializeApp(config)
+      setApp(firebaseApp)
+      setLoading(false)
+    }
+    initializeApp()
+  }, [config])
+
+  const value: FirebaseContextValue = useMemo(
+    () => ({
+      loading,
+      app,
+      auth,
+      firestore,
+      storage,
+    }),
+    [app, auth, firestore, storage, loading],
+  )
+
+  return <FirebaseContext.Provider value={value}>{children}</FirebaseContext.Provider>
+}
+
+export function useFirebase() {
+  const context = useContext(FirebaseContext)
+  if (!context) {
+    throw new Error('useFirebase must be used within a FirebaseProvider')
+  }
+  return context
+}

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './FirebaseContext'

package/src/db/index.ts

@@ -0,0 +1 @@
+export * from './utils'