From a0b34e3434fd07e82921a421e4f92a69d472f26d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= <khanh@quocs.com>
Date: Mon, 10 Jun 2024 00:10:22 +0700
Subject: [PATCH] feat(mobile): clerk oauth apple and google

---
 apps/mobile/app/_layout.tsx                 |  5 +++
 apps/mobile/components/auth/auth-social.tsx | 47 +++++++++++++++++----
 apps/mobile/hooks/use-warm-up-browser.tsx   | 13 ++++++
 3 files changed, 56 insertions(+), 9 deletions(-)
 create mode 100644 apps/mobile/hooks/use-warm-up-browser.tsx

diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index f16d2a3e..10b5a0f2 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -12,8 +12,10 @@ import {
 } from '@expo-google-fonts/be-vietnam-pro'
 import { Stack } from 'expo-router'
 import * as SplashScreen from 'expo-splash-screen'
+import * as WebBrowser from "expo-web-browser";
 
 import 'react-native-reanimated'
+import { useWarmUpBrowser } from '@/hooks/use-warm-up-browser'
 import { useColorScheme } from '@/hooks/useColorScheme'
 import { queryClient } from '@/lib/client'
 import {
@@ -36,12 +38,15 @@ cssInterop(Svg, {
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync()
 
+WebBrowser.maybeCompleteAuthSession();
+
 // biome-ignore lint/style/useNamingConvention: <explanation>
 export const unstable_settings = {
   initialRouteName: '(app)',
 }
 
 export default function RootLayout() {
+  useWarmUpBrowser();
   const colorScheme = useColorScheme()
   const [fontsLoaded] = useFonts({
     BeVietnamPro_300Light,
diff --git a/apps/mobile/components/auth/auth-social.tsx b/apps/mobile/components/auth/auth-social.tsx
index 35cbd534..ee04f5ec 100644
--- a/apps/mobile/components/auth/auth-social.tsx
+++ b/apps/mobile/components/auth/auth-social.tsx
@@ -1,3 +1,4 @@
+import { useOAuth } from '@clerk/clerk-expo'
 import type { SvgProps } from 'react-native-svg'
 import { Button } from '../Button'
 import { AppleLogo } from '../svg-assets/apple-logo'
@@ -6,35 +7,63 @@ import { GoogleLogo } from '../svg-assets/google-logo'
 type AuthSocialProps = {
   label: string
   icon: React.ComponentType<SvgProps>
+  onPress?: () => void
 }
 
-export function AuthSocial({
-  label,
-  icon: Icon,
-}: AuthSocialProps) {
+export function AuthSocial({ label, icon: Icon, onPress }: AuthSocialProps) {
   return (
-    <Button
-      label={label}
-      leftIcon={Icon}
-      variant="outline"
-    />
+    <Button label={label} leftIcon={Icon} variant="outline" onPress={onPress} />
   )
 }
 
 export function GoogleAuthButton() {
+  const { startOAuthFlow } = useOAuth({ strategy: 'oauth_google' })
+
+  const onPress = async () => {
+    try {
+      const { createdSessionId, setActive } = await startOAuthFlow()
+
+      if (createdSessionId) {
+        setActive?.({ session: createdSessionId })
+      } else {
+        // Use signIn or signUp for next steps such as MFA
+      }
+    } catch (err) {
+      console.error('OAuth error', err)
+    }
+  }
+
   return (
     <AuthSocial
       label="Sign in with Google"
       icon={GoogleLogo}
+      onPress={onPress}
     />
   )
 }
 
 export function AppleAuthButton() {
+  const { startOAuthFlow } = useOAuth({ strategy: 'oauth_apple' })
+
+  const onPress = async () => {
+    try {
+      const { createdSessionId, setActive } = await startOAuthFlow()
+
+      if (createdSessionId) {
+        setActive?.({ session: createdSessionId })
+      } else {
+        // Use signIn or signUp for next steps such as MFA
+      }
+    } catch (err) {
+      console.error('OAuth error', err)
+    }
+  }
+
   return (
     <AuthSocial
       label="Sign in with Apple"
       icon={AppleLogo}
+      onPress={onPress}
     />
   )
 }
diff --git a/apps/mobile/hooks/use-warm-up-browser.tsx b/apps/mobile/hooks/use-warm-up-browser.tsx
new file mode 100644
index 00000000..08c00ef6
--- /dev/null
+++ b/apps/mobile/hooks/use-warm-up-browser.tsx
@@ -0,0 +1,13 @@
+import * as WebBrowser from "expo-web-browser";
+import React from "react";
+
+export const useWarmUpBrowser = () => {
+  React.useEffect(() => {
+    // biome-ignore lint/complexity/noVoid: <explanation>
+    void WebBrowser.warmUpAsync();
+    return () => {
+      // biome-ignore lint/complexity/noVoid: <explanation>
+      void WebBrowser.coolDownAsync();
+    };
+  }, []);
+};