@chem-po/firebase-native 0.0.51 → 0.0.53

package/src/components/TwoFactorAuthModal.tsx

@@ -1,198 +0,0 @@
-import { EnrollmentFactor, PhoneEnrollmentFactor } from '@chem-po/core'
-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'
-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,
-  onSelect,
-}: {
-  factors: EnrollmentFactor[]
-  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, textFont]}>Select an option to verify with:</Txt>
-      <View style={styles.factorsList}>
-        {factors.map((factor) => (
-          <FactorView
-            key={`${factor.type}-${factor.enrollmentTime}`}
-            factor={factor}
-            buttonBackgroundColor={buttonBackgroundColor}
-            onPress={() => onSelect(factor)}
-            iconColor={iconColor}
-            borderColor={borderColor}
-          />
-        ))}
-      </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 { auth } = useBackend()
-  const backgroundColor = useBackgroundColor(150)
-  const twoFactorVerification = useAuth(s => s.multiFactorVerification)
-  const enrollmentFactors = useAuth(s => s.enrollmentFactors)
-  if (!twoFactorVerification && !enrollmentFactors) return null
-
-  return (
-    <Portal>
-      <Modal
-        visible={true}
-        onDismiss={() => {
-          auth.logout()
-        }}
-        style={styles.modal}
-      >
-        <View style={[styles.modalContent, { backgroundColor }]}>
-          <ScrollView contentContainerStyle={styles.scrollContent}>
-            <TwoFactorContent />
-          </ScrollView>
-        </View>
-      </Modal>
-    </Portal>
-  )
-}
-
-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,
-  },
-  modalContent: {
-    margin: 20,
-    borderRadius: 12,
-    position: 'relative',
-    maxHeight: '80%',
-  },
-  scrollContent: {
-    padding: 16,
-  },
-  selectContainer: {
-    width: '100%',
-  },
-  selectTitle: {
-    fontSize: 16,
-    marginBottom: 8,
-    paddingHorizontal: 4,
-  },
-  factorsList: {
-    gap: 8,
-  },
-  factorContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  factorButton: {
-    padding: 16,
-    borderRadius: 8,
-    borderWidth: 1,
-  },
-  factorHeaderText: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    opacity: 0.8,
-  },
-  factorDetailsText: {
-    fontSize: 16,
-  },
-})

package/src/components/index.ts

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

package/src/contexts/FirebaseContext.tsx

@@ -1,50 +0,0 @@
-import React, { createContext, useContext, useMemo } from 'react'
-import type {
-  FirebaseApp,
-  FirebaseAuth,
-  FirebaseContextValue,
-  FirebaseFirestore,
-  FirebaseFunctions,
-  FirebaseStorage,
-} from '../types'
-
-const FirebaseContext = createContext<FirebaseContextValue | null>(null)
-
-export interface FirebaseProviderProps {
-  children: React.ReactNode
-  app: FirebaseApp
-  firestore: FirebaseFirestore | null
-  storage: FirebaseStorage | null
-  functions: FirebaseFunctions | null
-  auth: FirebaseAuth | null
-}
-
-export function FirebaseProvider({
-  children,
-  app,
-  firestore,
-  storage,
-  functions,
-  auth,
-}: FirebaseProviderProps) {
-  const value: FirebaseContextValue = useMemo(
-    () => ({
-      app,
-      auth,
-      firestore,
-      storage,
-      functions,
-    }),
-    [app, auth, firestore, storage, functions],
-  )
-
-  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

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

package/src/db/index.ts

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

package/src/db/utils.ts

@@ -1,142 +0,0 @@
-import { AnyObject, BaseQuery, isInequalityOperator, stringTransforms } from '@chem-po/core'
-import {
-  collection,
-  collectionGroup,
-  limit as limitTo,
-  orderBy,
-  query,
-  startAfter,
-  where,
-} from '@react-native-firebase/firestore'
-import { Firestore, FirestoreBaseQuery, FirestoreCursor, FirestoreQuery } from '../types/db'
-
-export const toFirestoreQuery = <T extends AnyObject>(
-  db: Firestore,
-  baseQuery: FirestoreBaseQuery<T>,
-): FirestoreQuery<T> => {
-  const {
-    collection: collectionPath,
-    filters,
-    limit,
-    search,
-    sort,
-    isCollectionGroup,
-    cursor: startAfterDoc,
-  } = baseQuery
-
-  let q: FirestoreQuery<T> = (
-    isCollectionGroup ? collectionGroup(db, collectionPath) : collection(db, collectionPath)
-  ) as FirestoreQuery<T>
-
-  if (filters) {
-    filters.forEach(({ key, operator, value }) => {
-      q = query(q, where(key, operator, value))
-    })
-  }
-
-  if (sort) {
-    q = query(q, orderBy(sort.key, sort.direction))
-  }
-
-  if (startAfterDoc) {
-    q = query(q, startAfter(startAfterDoc))
-  }
-
-  if (search?.paths?.length && search.query) {
-    const trimmed = (search.query || '').trim()
-    if (trimmed) {
-      q = query(
-        q,
-        where(search.paths[0].prop, '>=', trimmed),
-        where(search.paths[0].prop, '<=', `${trimmed}\uf8ff`),
-      )
-    }
-  }
-
-  return limit ? query(q, limitTo(limit)) : q
-}
-
-export const toCursorQuery = <T extends AnyObject>(
-  db: Firestore,
-  baseQuery: FirestoreBaseQuery<T>,
-  cursor: FirestoreCursor | null,
-): FirestoreQuery<T> => {
-  const { collection: collectionPath, filters, sort, isCollectionGroup, search, limit } = baseQuery
-
-  let q: FirestoreQuery<T> = (
-    isCollectionGroup ? collectionGroup(db, collectionPath) : collection(db, collectionPath)
-  ) as FirestoreQuery<T>
-
-  if (filters) {
-    filters.forEach(({ key, operator, value }) => {
-      q = query(q, where(key, operator, value))
-    })
-  }
-
-  if (sort) {
-    q = query(q, orderBy(sort.key, sort.direction))
-  }
-
-  if (search?.paths?.length && search.query) {
-    const trimmed = (search.query || '').trim()
-    if (trimmed) {
-      q = query(
-        q,
-        where(search.paths[0].prop, '>=', trimmed),
-        where(search.paths[0].prop, '<=', `${trimmed}\uf8ff`),
-      )
-    }
-  }
-
-  if (cursor) {
-    q = query(q, startAfter(cursor))
-  }
-
-  return limit ? query(q, limitTo(limit), limitTo(1)) : q
-}
-
-export const toFirestoreQueries = <T extends AnyObject>(
-  db: Firestore,
-  baseQuery: BaseQuery<T>,
-  cursors: Array<FirestoreCursor | null> | null,
-): Array<FirestoreQuery<T>> => {
-  const { collection: collectionPath, filters, limit, search, sort, isCollectionGroup } = baseQuery
-
-  let q: FirestoreQuery<T> = (
-    isCollectionGroup ? collectionGroup(db, collectionPath) : collection(db, collectionPath)
-  ) as FirestoreQuery<T>
-  if (filters) {
-    let filterSortKey: string | null = null
-    filters.forEach(({ key, operator, value }) => {
-      q = query(q, where(key, operator, value))
-      if (!filterSortKey && isInequalityOperator(operator) && sort?.key !== key) {
-        filterSortKey = key
-        q = query(q, orderBy(key, 'asc'))
-      }
-    })
-  }
-
-  if (sort) {
-    q = query(q, orderBy(sort.key, sort.direction))
-  }
-
-  if (cursors?.length) {
-    q = query(q, startAfter(cursors[cursors.length - 1]))
-  }
-
-  const queries =
-    search?.paths?.length && search.query
-      ? search.paths.map(path => {
-          let trimmed = (search.query ?? '').trim()
-          if (!trimmed) return q
-          if (path.transform) trimmed = stringTransforms[path.transform](trimmed)
-          return query(
-            q,
-            where(path.prop, '>=', trimmed),
-            where(path.prop, '<=', `${trimmed}\uf8ff`),
-          )
-        })
-      : [q]
-
-  return queries.map(q0 => (limit ? query(q0, limitTo(limit)) : q0))
-}

package/src/hooks/backend.ts

@@ -1,4 +0,0 @@
-import { useBackendBase } from '@chem-po/react'
-// import { FirebaseBackendAdapter } from '../types/adapter'
-
-export const useBackend = () => useBackendBase()

package/src/hooks/index.ts

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

package/src/hooks/useAuthenticatorVerify.ts

@@ -1,45 +0,0 @@
-import { useAuth } from '@chem-po/react'
-import { FirebaseAuthTypes } from '@react-native-firebase/auth'
-import { useCallback, useState } from 'react'
-import { useBackend } from './backend'
-
-export const useAuthenticatorVerify = () => {
-  const [code, setCode] = useState('')
-  const [verifying, setVerifying] = useState(false)
-  const [error, setError] = useState('')
-  const twoFactorVerification = useAuth(s => s.multiFactorVerification)
-  const { auth } = useBackend()
-  // const { showSuccess, showError, showInfo } = useToast()
-
-  const handleVerify = useCallback(async () => {
-    const verify = auth.verifyMultiFactor
-    if (!verify) {
-      setError('Error - Two factor verification is not supported')
-      return
-    }
-    if (!code) return
-    if (!twoFactorVerification) {
-      setError('Error - No session found')
-      return
-    }
-    const resolver = twoFactorVerification.resolver as FirebaseAuthTypes.MultiFactorResolver
-    if (!resolver) {
-      setError('Error - No session found')
-      return
-    }
-    setVerifying(true)
-    try {
-      await verify(twoFactorVerification, code)
-    } catch (error) {
-      setError(error instanceof Error ? error.message : 'An unknown error occurred')
-    }
-  }, [code, auth, twoFactorVerification])
-
-  return {
-    code,
-    setCode,
-    verifying,
-    error,
-    handleVerify,
-  }
-}

package/src/hooks/usePhoneVerify.ts

@@ -1,87 +0,0 @@
-import { PhoneEnrollmentFactor } from '@chem-po/core'
-import { useAuth, useToast } from '@chem-po/react'
-import { useCallback, useEffect, useRef, useState } from 'react'
-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('')
-
-  const { auth } = useBackend()
-  const {multiFactorVerification: twoFactorVerification, enrollmentFactors} = useAuth()
-
-  // const [{ automaticallySendSmsCode }, setCookie] = useCookies(['automaticallySendSmsCode'])
-
-  const initSendCode = useRef(!!automaticallySendSmsCode)
-
-  const { showSuccess, showError } = useToast()
-
-  const sendCode = useCallback(async () => {
-    if (!enrollmentFactors) {
-      showError('Error - No session found')
-      return
-    }
-    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)
-  useEffect(() => {
-    if (initSendCode.current) {
-      initSendCodeFunc.current()
-    }
-  }, [])
-
-  const handleVerify = useCallback(async () => {
-    setVerifying(true)
-    setError('')
-    if (!twoFactorVerification) {
-      showError('Error - No session found')
-      return
-    }
-    const resolver = twoFactorVerification.resolver
-    if (!resolver) {
-      showError('Error - No resolver found')
-      return
-    }
-    const verificationId = twoFactorVerification.verificationId
-    if (!verificationId) {
-      showError('Error - No verification ID found')
-      return
-    }
-    const verify = auth.verifyMultiFactor
-    if (!verify) {
-      showError('Error - Two factor verification is not supported')
-      return
-    }
-    return verify(twoFactorVerification, code)
-      .then(() => {
-        setVerifying(false)
-        setCode('')
-        showSuccess('Verification successful')
-      })
-      .catch(e => {
-        setVerifying(false)
-        setError(e.message || 'An error occurred')
-      })
-  }, [code, auth, showSuccess, showError])
-
-  return {
-    code,
-    setCode,
-    sendCode,
-    verifying,
-    sendingCode,
-    error,
-    handleVerify,
-  }
-}

package/src/icons/Apple.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react'
-import Svg, { Path, SvgProps } from 'react-native-svg'
-
-const SvgApple = (props: SvgProps) => {
-  return (
-    <Svg width={24} height={24} viewBox="0 0 814 1000" {...props}>
-      <Path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z" />
-    </Svg>
-  )
-}
-
-export default SvgApple

package/src/icons/Google.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react'
-import Svg, { Path, SvgProps } from 'react-native-svg'
-
-const SvgGoogle = (props: SvgProps) => (
-  <Svg width={24} height={24} viewBox="0 0 24 24" {...props}>
-    <Path
-      fill="#4285F4"
-      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-    />
-    <Path
-      fill="#34A853"
-      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-    />
-    <Path
-      fill="#FBBC05"
-      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-    />
-    <Path
-      fill="#EA4335"
-      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-    />
-  </Svg>
-)
-export default SvgGoogle

package/src/index.ts

@@ -1,9 +0,0 @@
-export * from './adapter'
-export * from './auth'
-export * from './components'
-export * from './contexts'
-export * from './db'
-export * from './hooks'
-export * from './storage'
-export * from './types'
-export * from './utils/validation'

package/src/storage/index.ts

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

package/src/storage/utils.ts

@@ -1,29 +0,0 @@
-import { FileValue, LocalFileValue, OnUploadProgress } from '@chem-po/core'
-import { FirebaseStorageTypes, ref, uploadString } from '@react-native-firebase/storage'
-
-export const uploadFileValue = async (
-  storage: FirebaseStorageTypes.Module,
-  path: string,
-  file: LocalFileValue | FileValue | null | undefined,
-  onUploadProgress: OnUploadProgress,
-): Promise<FileValue | null> => {
-  if (!file) return null
-  const { dataUrl, type, filename } = file as LocalFileValue
-  if (!dataUrl) return file
-
-  const storageRef = ref(storage, path)
-  const uploadTask = uploadString(storageRef, dataUrl, 'data_url')
-
-  uploadTask.on('state_changed', snapshot => {
-    const percent = snapshot.bytesTransferred / snapshot.totalBytes
-    onUploadProgress({ total: snapshot.totalBytes, loaded: snapshot.bytesTransferred, percent })
-  })
-
-  return new Promise((resolve, reject) => {
-    uploadTask
-      .then(() => {
-        resolve({ storagePath: path, type, filename })
-      })
-      .catch(reject)
-  })
-}

package/src/types/adapter.ts

@@ -1,13 +0,0 @@
-import { BackendAdapterInterface, BaseAuthProvider } from '@chem-po/core'
-import { FirebaseStorageTypes } from '@react-native-firebase/storage'
-import { EmailPasswordLogin, User } from './auth'
-import { FirestoreCursor } from './db'
-
-export type FirebaseBackendAdapter<AuthProvider extends BaseAuthProvider> = BackendAdapterInterface<
-  AuthProvider,
-  User,
-  EmailPasswordLogin,
-  FirestoreCursor,
-  Blob,
-  FirebaseStorageTypes.FullMetadata
->

package/src/types/auth.ts

@@ -1,13 +0,0 @@
-import { BaseUserRole } from '@chem-po/core'
-import { getAuth } from '@react-native-firebase/auth'
-
-export type Auth = ReturnType<typeof getAuth>
-export interface User {
-  uid: string
-  role: BaseUserRole
-}
-
-export interface EmailPasswordLogin {
-  email: string
-  password: string
-}

package/src/types/db.ts

@@ -1,10 +0,0 @@
-// import { AnyObject } from '@chem-po/core'
-import { AnyObject, BaseQuery, OnItemsData } from '@chem-po/core'
-import { FirebaseFirestoreTypes } from '@react-native-firebase/firestore'
-
-export type Firestore = FirebaseFirestoreTypes.Module
-export type FirestoreCursor = FirebaseFirestoreTypes.QueryDocumentSnapshot
-export type FirestoreBaseQuery<T extends AnyObject> = BaseQuery<T, FirestoreCursor>
-export type FirestoreQuery<T extends AnyObject> = FirebaseFirestoreTypes.Query<T>
-// export type FirestoreQuery<T extends AnyObject> = BaseQuery<T, FirestoreCursor>
-export type FirestoreOnItemsData<T extends AnyObject> = OnItemsData<T, FirestoreCursor>

package/src/types/functions.ts

@@ -1,3 +0,0 @@
-import { getFunctions } from '@react-native-firebase/functions'
-
-export type Functions = ReturnType<typeof getFunctions>