@chem-po/firebase-native 0.0.51 → 0.0.53

package/src/adapter/index.ts

@@ -1,32 +0,0 @@
-import { BackendAdapter, BaseAuthProvider } from '@chem-po/core'
-import { FirebaseStorageTypes } from '@react-native-firebase/storage'
-import { Auth, EmailPasswordLogin, User } from '../types/auth'
-import { Firestore, FirestoreCursor } from '../types/db'
-import { Functions } from '../types/functions'
-import { Storage } from '../types/storage'
-import { getFirebaseAuthAdapter } from './auth'
-import { getFirebaseDatabaseAdapter } from './db'
-import { getFirebaseStorageAdapter } from './storage'
-
-export type FirebaseAdapter<AuthProvider extends BaseAuthProvider> = BackendAdapter<
-  AuthProvider,
-  User,
-  EmailPasswordLogin,
-  FirestoreCursor,
-  Blob,
-  FirebaseStorageTypes.FullMetadata
->
-
-export const getFirebaseAdapter = <AuthProvider extends BaseAuthProvider>(
-  auth: Auth,
-  db: Firestore,
-  storage: Storage,
-  functions: Functions,
-  twoFactorRequired: boolean,
-): FirebaseAdapter<AuthProvider> => {
-  return {
-    auth: getFirebaseAuthAdapter(auth, twoFactorRequired),
-    db: getFirebaseDatabaseAdapter(db, functions),
-    storage: getFirebaseStorageAdapter(storage),
-  }
-}

package/src/adapter/storage.ts

@@ -1,58 +0,0 @@
-import { StorageAdapter, UploadedFileValue } from '@chem-po/core'
-import {
-  deleteObject,
-  getDownloadURL,
-  getMetadata,
-  ref,
-  uploadBytesResumable,
-} from '@react-native-firebase/storage'
-import { Storage } from '../types/storage'
-
-export const getFirebaseStorageAdapter = (storage: Storage): StorageAdapter<Blob, any> => ({
-  delete: async path => {
-    const storageRef = ref(storage, path)
-    await deleteObject(storageRef)
-  },
-  fetchObject: async path => {
-    const storageRef = ref(storage, path)
-    const url = await getDownloadURL(storageRef)
-    const response = await fetch(url)
-    return await response.blob()
-  },
-  fetchMetadata: async path => {
-    const storageRef = ref(storage, path)
-    return await getMetadata(storageRef)
-  },
-  getObjectUrl: async path => {
-    const storageRef = ref(storage, path)
-    return await getDownloadURL(storageRef)
-  },
-  upload: async (path, data, onUploadProgress) => {
-    const storageRef = ref(storage, path)
-    // Convert dataUrl to Blob
-    const blob = await fetch(data.dataUrl).then(res => res.blob())
-    const uploadTask = uploadBytesResumable(storageRef, blob)
-    return new Promise<UploadedFileValue>((resolve, reject) => {
-      uploadTask.on(
-        'state_changed',
-        snapshot => {
-          const progress = snapshot.bytesTransferred / snapshot.totalBytes
-          onUploadProgress({
-            loaded: snapshot.bytesTransferred,
-            total: snapshot.totalBytes,
-            percent: progress,
-          })
-        },
-        error => reject(error),
-        () => {
-          const fileValue: UploadedFileValue = {
-            filename: data.filename,
-            type: data.type,
-            storagePath: path,
-          }
-          resolve(fileValue)
-        },
-      )
-    })
-  },
-})

package/src/auth/functions.ts

@@ -1,7 +0,0 @@
-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

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

package/src/components/AuthenticatorVerify.tsx

@@ -1,75 +0,0 @@
-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

@@ -1,234 +0,0 @@
-import { useBackend } from '../hooks'
-
-import { AppleAuthProvider, GoogleAuthProvider, ThirdPartyAuthProvider } from '@chem-po/core'
-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'
-import { Divider } from 'react-native-paper'
-import SvgApple from '../icons/Apple'
-import SvgGoogle from '../icons/Google'
-
-const emailField: TextField = {
-  _type: 'text',
-  type: 'email',
-  placeholder: 'Email',
-}
-
-const passwordField: TextField = {
-  _type: 'text',
-  type: 'password',
-  placeholder: 'Password',
-}
-
-const thirdPartyInfo: Record<
-  ThirdPartyAuthProvider['name'],
-  { icon: React.ReactNode; name: string }
-> = {
-  google: { icon: <SvgGoogle width={24} />, name: 'Google' },
-  apple: { icon: <SvgApple width={24} />, name: 'Apple' },
-}
-
-const ThirdPartyLogin = ({ provider }: { provider: GoogleAuthProvider | AppleAuthProvider }) => {
-  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])
-
-  const textColor = useTextColor(400)
-  return (
-    <View style={styles.row}>
-      <LoadingButton
-        color={textColor}
-        variant="outline"
-        style={[styles.googleLoginButton]}
-        onPress={handleSignIn}>
-        <View style={styles.googleLogin}>
-          {thirdPartyInfo[provider.name].icon}
-          <ButtonText
-            variant="outline"
-            color={textColor}>{`Log In with ${thirdPartyInfo[provider.name].name}`}</ButtonText>
-        </View>
-      </LoadingButton>
-    </View>
-  )
-}
-
-const EmailPasswordLogin = () => {
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const forgotPasswordTextColor = useTextColor(400)
-
-  const { auth } = useBackend()
-  const { showInfo } = useToast()
-
-  const handleLogin = async () => {
-    try {
-      await auth.loginWithPassword({ name: 'email' }, { email, password })
-    } catch (error) {
-      setError(error instanceof Error ? error.message : 'An unknown error occurred')
-    }
-  }
-
-  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
-            color={forgotPasswordTextColor}
-            textStyle={styles.forgotPasswordButtonText}
-            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()}>Sign In</LoadingButton>
-      </View>
-    </View>
-  )
-}
-
-const ThirdPartyLogins = ({
-  appleProvider,
-  googleProvider,
-}: {
-  appleProvider?: AppleAuthProvider
-  googleProvider?: GoogleAuthProvider
-}) => {
-  const borderColor = useBorderColor()
-  const hasApple = appleProvider && appleAuth.isSupported
-  if (!googleProvider && !hasApple) return null
-  return (
-    <>
-      <Divider style={{ backgroundColor: borderColor, width: '100%' }} />
-      <View style={styles.thirdPartyLogins}>
-        {googleProvider ? <ThirdPartyLogin provider={googleProvider} /> : null}
-        {appleProvider && appleAuth.isSupported ? (
-          <ThirdPartyLogin provider={appleProvider} />
-        ) : null}
-      </View>
-    </>
-  )
-}
-
-export const FirebaseSignIn = ({
-  googleProvider,
-  appleProvider,
-}: {
-  googleProvider?: GoogleAuthProvider
-  appleProvider?: AppleAuthProvider
-}) => {
-  return (
-    <View style={styles.signInContent}>
-      <EmailPasswordLogin />
-      <ThirdPartyLogins appleProvider={appleProvider} googleProvider={googleProvider} />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  column: {
-    flexDirection: 'column',
-    gap: 10,
-    flex: 1,
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  thirdPartyLogins: {
-    flexDirection: 'column',
-    gap: 10,
-    flex: 1,
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  colorModeToggle: {
-    paddingVertical: 20,
-  },
-  signInContent: {
-    paddingVertical: 20,
-    paddingHorizontal: 20,
-    gap: 12,
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '100%',
-  },
-  forgotPasswordButton: {
-    borderWidth: 0,
-    backgroundColor: 'transparent',
-  },
-  forgotPasswordButtonText: {
-    fontSize: 14,
-  },
-  row: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    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

@@ -1,115 +0,0 @@
-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, 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 (sendingCode) {
-    body = (
-      <View style={styles.container}>
-        <CircularProgress size='large' />
-        <Txt style={styles.text}>Sending verification code...</Txt>
-      </View>
-    )
-  } 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, { borderColor, color: textColor }]}
-          value={code}
-          placeholderTextColor={placeholderColor}
-          onChangeText={setCode}
-          placeholder='Verification Code'
-          keyboardType='number-pad'
-          maxLength={6}
-        />
-        {error ? <Txt style={styles.errorText}>{error}</Txt> : null}
-        <LoadingButton variant='solid' onPress={handleVerify} color={buttonBackgroundColor}>
-          Verify
-        </LoadingButton>
-      </View>
-    )
-  } else {
-    body = (
-      <View style={styles.container}>
-        <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>
-    )
-  }
-
-  return <View style={styles.wrapper}>{body}</View>
-}
-
-const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1,
-    padding: 16,
-  },
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 8,
-  },
-  textContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 4,
-  },
-  infoText: {
-    fontSize: 15,
-    opacity: 0.8,
-    textAlign: 'center',
-  },
-  text: {
-    fontSize: 16,
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-  input: {
-    width: '100%',
-    height: 48,
-    borderWidth: 1,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    fontSize: 16,
-    marginBottom: 8,
-  },
-  buttonText: {
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  errorText: {
-    color: 'red',
-    fontSize: 14,
-    marginBottom: 8,
-  },
-})