Feature: Apple SignIn integration to Medica App

app.json

@@ -20,7 +20,7 @@
       "infoPlist": {
         "NSFaceIDUsageDescription": "This app uses Face ID and Touch ID for some features"
       },
-      "bundleIdentifier": "com.supabase.medical"
+      "bundleIdentifier": "com.andela.matadors.medica"
     },
     "android": {
       "jsEngine": "hermes",

app/(app)/ActionMenu/index.tsx

@@ -160,11 +160,8 @@ export default function Index() {
                 <Image
                   style={{ width: "100%", height: "100%", borderRadius: 100 }}
                   source={{
-                    uri:
-                      authType !== "email"
-                        ? authType
-                          ? otherAuthImageUrl
-                          : `${CDNURL + userData?.id + "/" + profilePhoto}`
+                    uri:authType !== "email" && authType !== "apple"
+                        ? otherAuthImageUrl
                         : `${CDNURL + userData?.id + "/" + profilePhoto}`,
                   }}
                 />

app/(app)/Profile/index.tsx

@@ -123,12 +123,11 @@ const index = () => {
                   <Image
                     style={{ width: "100%", height: "100%", borderRadius: 100 }}
                     source={{
-                      uri:
-                        authType !== "email"
-                          ? authType
-                            ? otherAuthImageUrl
-                            : `${CDNURL + userData?.id + "/" + profilePhoto}`
-                          : `${CDNURL + userData?.id + "/" + profilePhoto}`,
+                      uri:authType !== "email" && authType !== "apple"
+                      ? otherAuthImageUrl
+                      : `${CDNURL + userData?.id + "/" + profilePhoto}`,
+
+
                     }}
                   />
                 </View>

app/(auth)/SignIn&SignOut/LetsYouIn.tsx

@@ -7,6 +7,7 @@ import {
   TouchableOpacity,
   ScrollView,
   ActivityIndicator,
+  Alert,
 } from "react-native";
 import { supabase } from "@/lib/supabase";
 import { ThemeContext } from "@/ctx/ThemeContext";
@@ -27,6 +28,8 @@ import { makeRedirectUri } from "expo-auth-session";
 import * as QueryParams from "expo-auth-session/build/QueryParams";
 import React from "react";
 import { useAuth } from "@/ctx/AuthContext";
+import * as AppleAuthentication from 'expo-apple-authentication';
+
 
 WebBrowser.maybeCompleteAuthSession();
 const redirectTo = makeRedirectUri({
@@ -45,6 +48,7 @@ const LetsYouIn = () => {
     setImageUrl,
     setAuthType,
   } = useAuth();
+  const { signInWithApple } = useAuth();
   const [loading, setLoading] = useState(false);
   const createSessionFromUrl = async (url: string) => {
     const { params, errorCode } = QueryParams.getQueryParams(url);
@@ -126,7 +130,18 @@ const LetsYouIn = () => {
     }
   };
   const { theme } = useContext(ThemeContext);
-
+  const handleSignInWithApple = async () => {
+    setLoading(true);
+    try {
+      await signInWithApple();
+      router.push("/(app)/ActionMenu");
+    } catch (error) {
+      console.error('Error signing in with Apple:', error);
+      // Handle error (show alert, reset loading state, etc.)
+    } finally {
+      setLoading(false);
+    }
+  };
   const url = Linking.useURL();
   if (url) createSessionFromUrl(url);
 
@@ -212,7 +227,7 @@ const LetsYouIn = () => {
                 </Text>
               </TouchableOpacity>
 
-              <TouchableOpacity
+              <TouchableOpacity onPress={signInWithApple}
                 style={[
                   styles.middleButton,
                   {

app/(auth)/SignIn&SignOut/SignInBlankForm.tsx

@@ -33,6 +33,7 @@ import * as Linking from "expo-linking";
 import { makeRedirectUri } from "expo-auth-session";
 import * as QueryParams from "expo-auth-session/build/QueryParams";
 import { useAuth } from "@/ctx/AuthContext";
+import * as AppleAuthentication from 'expo-apple-authentication';
 
 WebBrowser.maybeCompleteAuthSession();
 const redirectTo = makeRedirectUri({
@@ -87,10 +88,11 @@ AppState.addEventListener("change", (state) => {
 });
 
 const Login = () => {
+  const { signInWithApple } = useAuth();
   const { login } = useAuth();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  // const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false)
   const [secureTextEntry, setSecureTextEntry] = useState(true);
   const [isChecked, setIsChecked] = useState(false);
   const [emailFocused, setEmailFocused] = useState(false);
@@ -135,6 +137,22 @@ const Login = () => {
     }
   }
 
+  const supabaseAuth = supabase.schema('auth');
+
+  const handleSignInWithApple = async () => {
+    setLoading(true);
+    try {
+      await signInWithApple();
+      router.push("/(app)/ActionMenu");
+    } catch (error) {
+      console.error('Error signing in with Apple:', error);
+      // Handle error (show alert, reset loading state, etc.)
+    } finally {
+      setLoading(false);
+    }
+  };
+
+
   return (
     <ScrollView
       style={{
@@ -343,7 +361,7 @@ const Login = () => {
           </View>
         </TouchableOpacity>
 
-        <TouchableOpacity>
+        <TouchableOpacity onPress={signInWithApple}>
           <View
             style={[
               styles.smallCont,

app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx

@@ -26,10 +26,12 @@ import { appleBlackIcon, appleWhiteIcon } from "@/constants/icon";
 import { supabase } from "@/lib/supabase";
 import * as WebBrowser from "expo-web-browser";
 import * as Linking from "expo-linking";
-import { makeRedirectUri } from "expo-auth-session";
+import { makeRedirectUri , useAuthRequest} from "expo-auth-session";
 import * as QueryParams from "expo-auth-session/build/QueryParams";
 import { useAuth } from "@/ctx/AuthContext";
 import { ActivityIndicator } from "react-native";
+import { Auth } from "@/components/AppleAuth";
+
 
 WebBrowser.maybeCompleteAuthSession();
 const redirectTo = makeRedirectUri({
@@ -331,23 +333,7 @@ export default function Signup() {
           </View>
         </TouchableOpacity>
 
-        <TouchableOpacity>
-          <View
-            style={[
-              styles.smallCont,
-              {
-                backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF",
-                borderColor: theme === "dark" ? "#35383F" : "#EEEEEE",
-              },
-              {
-                backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF",
-                borderColor: theme === "dark" ? "#35383F" : "#EEEEEE",
-              },
-            ]}
-          >
-            <SvgXml xml={theme === "dark" ? appleWhiteIcon : appleBlackIcon} />
-          </View>
-        </TouchableOpacity>
+        <Auth /> 
       </View>
 
       <View style={{ gap: 3, flexDirection: "row" }}>

app/(auth)/SignIn&SignOut/YourProfile/[email].tsx

@@ -53,21 +53,24 @@ const YourProfile = () => {
     });
   }
 
+  console.log(formData.lastName);
+
   async function handleSubmit() {
     try {
       setIsLoading(true);
       await setUpUserInfo(
-        authType !== "email"
-          ? authType
+
+        authType !== "email" && authType !== "apple"
+          ? authType && authType !== "apple"
             ? {
-                ...formData,
-                firstName: String(name).split(" ")[0],
-                lastName: String(name).split(" ")[1],
-                imageUrl: { uri: imageUrl, mimeType: "image/jpeg" },
-              }
+              ...formData,
+              firstName: String(name).split(" ")[0],
+              lastName: String(name).split(" ")[1],
+              imageUrl: { uri: imageUrl, mimeType: "image/jpeg" },
+            }
             : formData
           : formData
-      );
+      )
     } catch (err) {
       setIsLoading(false);
       const error: Error = err as Error;
@@ -95,10 +98,8 @@ const YourProfile = () => {
       <View>
         <SelectProfile
           image={
-            authType
-              ? authType
-                ? { uri: imageUrl, mimeType: "image/jpeg" }
-                : formData
+            authType && authType !== "apple"
+              ? { uri: imageUrl, mimeType: "image/jpeg" }
               : formData.image
           }
           onChange={handleFormChange}
@@ -120,8 +121,8 @@ const YourProfile = () => {
           placeholder="First Name"
           name="firstName"
           value={
-            authType !== "email"
-              ? authType
+            authType !== "email" && authType !== "apple"
+              ? authType || authType !== "apple"
                 ? String(name).split(" ")[0]
                 : formData.firstName
               : formData.firstName
@@ -132,8 +133,8 @@ const YourProfile = () => {
           placeholder="Last Name"
           name="lastName"
           value={
-            authType !== "email"
-              ? authType
+            authType !== "email" && authType !== "apple"
+              ? authType || authType !== "apple"
                 ? String(name).split(" ")[1]
                 : formData.lastName
               : formData.lastName
@@ -227,7 +228,7 @@ const YourProfile = () => {
           searchPlaceholder="Search..."
           renderInputSearch={() => <></>}
           value={formData.gender}
-          onChangeText={(e) => {}}
+          onChangeText={(e) => { }}
         />
       </View>
 

components/AppleAuth.tsx

@@ -0,0 +1,85 @@
+import { Platform, Alert, View, TouchableOpacity, StyleSheet } from 'react-native';
+import * as AppleAuthentication from 'expo-apple-authentication';
+import { supabase } from '../lib/supabase';
+import React, { useContext,useState } from 'react';
+import { SvgXml } from 'react-native-svg';
+import { router } from 'expo-router';
+import { ThemeContext } from '@/ctx/ThemeContext';
+import { BlackApple, WhiteApple } from '@/components/Icons/Icons';
+import { makeRedirectUri, useAuthRequest } from 'expo-auth-session';
+import * as WebBrowser from 'expo-web-browser';
+import * as QueryParams from "expo-auth-session/build/QueryParams";
+import { useAuth } from "@/ctx/AuthContext";
+
+export function Auth() {
+  const { theme } = useContext(ThemeContext);
+
+  WebBrowser.maybeCompleteAuthSession();
+const redirectTo = makeRedirectUri({
+  native: "com.medica://",
+});
+console.log({ redirectTo });
+
+const createSessionFromUrl = async (url: string) => {
+  const { params, errorCode } = QueryParams.getQueryParams(url);
+
+  if (errorCode) throw new Error(errorCode);
+  const { access_token, refresh_token } = params;
+
+  if (!access_token) return;
+
+  const { data, error } = await supabase.auth.setSession({
+    access_token,
+    refresh_token,
+  });
+  if (error) throw error;
+  console.log("session", data.session);
+  return data.session;
+};
+const [loading, setLoading] = useState(false)
+const { signInWithApple } = useAuth();
+
+const handleSignInWithApple = async () => {
+  setLoading(true);
+  try {
+    await signInWithApple();
+    // Navigate to next screen upon successful sign-in if needed
+    router.push("/(app)/ActionMenu");
+  } catch (error) {
+    console.error('Error signing in with Apple:', error);
+    // Handle error (show alert, reset loading state, etc.)
+  } finally {
+    setLoading(false);
+  }
+};
+
+  if (Platform.OS === 'ios') {
+    return (
+      <TouchableOpacity onPress={signInWithApple}>
+        <View
+          style={[
+            styles.smallCont,
+            { backgroundColor: theme === 'dark' ? '#1F222A' : '#FFFFFF', borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE' },
+          ]}
+        >
+          <SvgXml xml={theme === 'dark' ? WhiteApple : BlackApple} />
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  return null;
+}
+
+const styles = StyleSheet.create({
+  smallCont: {
+    width: 80,
+    height: 60,
+    backgroundColor: '#FFFFFF',
+    borderColor: '#eeeeee',
+    borderWidth: 1,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

constants/Colors.ts

@@ -6,6 +6,12 @@ export default {
     tabIconDefault: "#ccc",
     input : "#EEEEEE"
   },
+  dark: {
+    text: '#FFFFFF',
+    background: '#000000',
+    tabIconDefault: '#555',
+    input: '#333333',
+  },
 };
 
 export const Colors = {

constants/Types.ts

@@ -24,6 +24,7 @@ export interface AuthType {
   refreshSession: () => void;
   logout: () => void;
   login: ( email: string, password: string) => Promise<void>;
+  signInWithApple: () => Promise<void>; 
 }
 
 export interface Countries extends TCountries {