@chem-po/firebase-native 0.0.31 → 0.0.33

package/package.json

@@ -2,7 +2,7 @@
   "name": "@chem-po/firebase-native",
   "author": "Elan Canfield",
   "license": "MIT",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "source": "src/index.ts",
@@ -32,6 +32,7 @@
   ],
   "dependencies": {
     "@react-native-google-signin/google-signin": "^14.0.1",
+    "@invertase/react-native-apple-authentication": "^2.4.1",
     "@react-native-firebase/app": "^22.4.0",
     "@react-native-firebase/auth": "^22.4.0",
     "@react-native-firebase/firestore": "^22.4.0",
@@ -43,9 +44,9 @@
     "react-native-paper": "^5.14.3",
     "react-native-svg": "15.11.2",
     "zustand": "^4.3.3",
-    "@chem-po/core": "0.0.31",
-    "@chem-po/react": "0.0.31",
-    "@chem-po/react-native": "0.0.31"
+    "@chem-po/core": "0.0.33",
+    "@chem-po/react-native": "0.0.33",
+    "@chem-po/react": "0.0.33"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

package/src/adapter/auth.ts

@@ -7,9 +7,10 @@ import {
   EnrollmentFactorsResult,
   LoginResult,
   MultiFactorVerification,
-  WithMultiFactorVerified,
+  WithMultiFactorVerified
 } from '@chem-po/core'
 import {
+  AppleAuthProvider,
   FirebaseAuthTypes,
   getIdTokenResult,
   getMultiFactorResolver,
@@ -24,6 +25,7 @@ import {
   signOut,
 } from '@react-native-firebase/auth'
 
+import { appleAuth } from '@invertase/react-native-apple-authentication'
 import { GoogleSignin } from '@react-native-google-signin/google-signin'
 import { Auth, User } from '../types/auth'
 
@@ -260,13 +262,28 @@ const initializeProvider = async (provider: BaseAuthProvider) => {
         throw error
       }
       break
+    case 'apple':
+      debugLog('Apple provider initialization')
+      try {
+        const isAppleAuthAvailable = appleAuth.isSupported
+        debugLog('Apple authentication supported:', isAppleAuthAvailable)
+        if (!isAppleAuthAvailable) {
+          throw new Error('Apple authentication is not supported on this device')
+        }
+        debugLog('Apple authentication is supported')
+      } catch (error) {
+        debugLog('Error checking Apple authentication support', error)
+        throw error
+      }
+      break
+
     case 'email':
       debugLog('Email provider initialization (no special setup required)')
       // Native SDK doesn't need special initialization
       break
     default:
       debugLog('Unsupported provider', { name: provider.name })
-      throw new Error(`Unsupported provider: ${provider.name}`)
+      throw new Error(`Unsupported provider for initialization: ${provider.name}`)
   }
 
   providerInitialized[provider.name] = true
@@ -302,6 +319,44 @@ const handleInitialLogin = async (
   return { user: userWithRole }
 }
 
+const loginWithApple = async (
+  auth: Auth,
+  twoFactorRequired: boolean
+): Promise<LoginResult<User>> => {
+  debugLog('Starting Apple sign-in', { twoFactorRequired })
+  
+  try {
+    // Start the sign-in request
+    const appleAuthRequestResponse = await appleAuth.performRequest({
+      requestedOperation: appleAuth.Operation.LOGIN,
+      requestedScopes: [appleAuth.Scope.FULL_NAME, appleAuth.Scope.EMAIL],
+    })
+
+    // Ensure Apple returned a user identityToken
+    if (!appleAuthRequestResponse.identityToken) {
+      debugLog('No identity token returned from Apple')
+      throw new Error('Apple Sign-In failed - no identity token returned')
+    }
+
+    debugLog('Apple sign-in response received', { 
+      hasIdentityToken: appleAuthRequestResponse.identityToken,
+      hasNonce: appleAuthRequestResponse.nonce
+    })
+
+    // Create a Firebase credential from the response
+    const { identityToken, nonce } = appleAuthRequestResponse
+    const appleCredential = AppleAuthProvider.credential(identityToken, nonce)
+
+    debugLog('Signing in with Apple credential')
+    const userCredential = await signInWithCredential(auth, appleCredential)
+
+    return await handleInitialLogin(userCredential, twoFactorRequired)
+  } catch (error) {
+    debugLog('Error in Apple sign-in', error)
+    return await handleSignInError(error)
+  }
+}
+
 const loginWithGoogle = async (
   auth: Auth,
   twoFactorRequired: boolean
@@ -366,12 +421,23 @@ const getLoginWithPopup =
     switch (provider.name) {
       case 'google':
         return loginWithGoogle(auth, twoFactorRequired)
+      case 'apple':
+        return loginWithApple(auth, twoFactorRequired)
       default:
-        debugLog('Unsupported popup provider', { name: provider.name })
-        throw new Error(`Unsupported provider: ${provider.name}`)
+        debugLog('Unsupported popup provider', provider)
+        throw new Error(`Unsupported provider for login with popup: ${provider.name}`)
     }
   }
 
+const getLoginWithRedirect =
+  (auth: Auth, twoFactorRequired: boolean) =>
+  async (provider: BaseAuthProvider): Promise<LoginResult<User>> => {
+    debugLog('Starting redirect sign-in', { provider: provider.name, twoFactorRequired })
+    
+    // In React Native, redirect is the same as popup since we're using native SDKs
+    return getLoginWithPopup(auth, twoFactorRequired)(provider)
+  }
+
 const getLoginWithToken =
   (auth: Auth, twoFactorRequired: boolean) =>
   async (provider: BaseAuthProvider, token: string): Promise<LoginResult<User>> => {
@@ -431,6 +497,7 @@ export const getFirebaseAuthAdapter = (
     },
     loginWithPassword: getLoginWithPassword(auth, twoFactorRequired),
     loginWithPopup: getLoginWithPopup(auth, twoFactorRequired),
+    loginWithRedirect: getLoginWithRedirect(auth, twoFactorRequired),
     loginWithToken: getLoginWithToken(auth, twoFactorRequired),
     resetPassword: (...args) => {
       return resetPassword(auth, ...args)

package/src/components/FirebaseSignIn.tsx

@@ -1,11 +1,13 @@
 import { useBackend } from '../hooks'
 
-import { GoogleAuthProvider } from '@chem-po/core'
+import { AppleAuthProvider, GoogleAuthProvider, ThirdPartyAuthProvider } from '@chem-po/core'
 import { TextField, useBorderColor, useToast } from '@chem-po/react'
 import { LoadingButton, StandaloneInput, Txt } from '@chem-po/react-native'
+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 = {
@@ -20,7 +22,15 @@ const passwordField: TextField = {
   placeholder: 'Password',
 }
 
-const GoogleLogin = ({ provider }: { provider: GoogleAuthProvider }) => {
+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()
 
@@ -30,12 +40,14 @@ const GoogleLogin = ({ provider }: { provider: GoogleAuthProvider }) => {
     })
   }, [auth, provider, showError])
 
+  const borderColor = useBorderColor()
+
   return (
     <View style={styles.row}>
-      <LoadingButton style={styles.googleLoginButton} onPress={handleSignIn}>
+      <LoadingButton style={[styles.googleLoginButton, { borderColor }]} onPress={handleSignIn}>
         <View style={styles.googleLogin}>
-          <SvgGoogle width={24} />
-          <Txt>Log In with Google</Txt>
+          {thirdPartyInfo[provider.name].icon}
+          <Txt>Log In with {thirdPartyInfo[provider.name].name}</Txt>
         </View>
       </LoadingButton>
     </View>
@@ -88,21 +100,42 @@ const EmailPasswordLogin = () => {
   )
 }
 
-export const FirebaseSignIn = ({
+const ThirdPartyLogins = ({
+  appleProvider,
   googleProvider,
 }: {
-  googleProvider: GoogleAuthProvider | null
+  appleProvider?: AppleAuthProvider
+  googleProvider?: GoogleAuthProvider
 }) => {
   const borderColor = useBorderColor()
+  console.log('appleAuth.isSupported', appleAuth.isSupported)
+  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
+}) => {
+  console.log('hello')
   return (
     <View style={styles.signInContent}>
       <EmailPasswordLogin />
-      {googleProvider ? (
-        <>
-          <Divider style={{ backgroundColor: borderColor, width: '100%' }} />
-          <GoogleLogin provider={googleProvider} />
-        </>
-      ) : null}
+      <ThirdPartyLogins appleProvider={appleProvider} googleProvider={googleProvider} />
     </View>
   )
 }
@@ -122,13 +155,20 @@ const styles = StyleSheet.create({
     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,
-    height: 300,
     gap: 12,
     justifyContent: 'center',
     alignItems: 'center',

package/src/icons/Apple.tsx

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