final steps

app/(root)/(tabs)/rides.tsx

@@ -1,14 +1,57 @@
-import { View, Text } from "react-native"
-import { SafeAreaView } from "react-native-safe-area-context"
+import { useUser } from "@clerk/clerk-expo";
+import { ActivityIndicator, FlatList, Image, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import RideCard from "@/components/RideCard";
+import { images } from "@/constants";
+import { useFetch } from "@/lib/fetch";
+import { Ride } from "@/types/type";
 
 const Rides = () => {
-    return(
-        <SafeAreaView>
-            <Text>
-                Rides
-            </Text>
-        </SafeAreaView>
-    )
-}
+  const { user } = useUser();
+
+  const {
+    data: recentRides,
+    loading,
+    error,
+  } = useFetch<Ride[]>(`/(api)/ride/${user?.id}`);
+
+  return (
+    <SafeAreaView className="flex-1 bg-white">
+      <FlatList
+        data={recentRides}
+        renderItem={({ item }) => <RideCard ride={item} />}
+        keyExtractor={(item, index) => index.toString()}
+        className="px-5"
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{
+          paddingBottom: 100,
+        }}
+        ListEmptyComponent={() => (
+          <View className="flex flex-col items-center justify-center">
+            {!loading ? (
+              <>
+                <Image
+                  source={images.noResult}
+                  className="w-40 h-40"
+                  alt="No recent rides found"
+                  resizeMode="contain"
+                />
+                <Text className="text-sm">No recent rides found</Text>
+              </>
+            ) : (
+              <ActivityIndicator size="small" color="#000" />
+            )}
+          </View>
+        )}
+        ListHeaderComponent={
+          <>
+            <Text className="text-2xl font-JakartaBold my-5">All Rides</Text>
+          </>
+        }
+      />
+    </SafeAreaView>
+  );
+};
 
 export default Rides;

app/_layout.tsx

@@ -8,7 +8,8 @@ import { ClerkProvider, ClerkLoaded } from '@clerk/clerk-expo'
 import { Slot } from 'expo-router'
 import { tokenCache } from '@/lib/auth';
 import 'react-native-get-random-values';
-
+import{LogBox}from"react-native"
+LogBox.ignoreLogs(["Warning:..."])
 
 const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!
 

components/OAuth.tsx

@@ -1,12 +1,27 @@
-import { View, Text, Image } from "react-native"
+import { View, Text, Image, Alert } from "react-native"
 import CustomButton from "./CustomButton"
 import { icons } from "@/constants"
+import { useOAuth } from "@clerk/clerk-expo"
+import { useCallback } from "react"
+import { googleOAuth } from "@/lib/auth"
+import { router } from "expo-router"
 
 const OAuth = () => {
-    const handleGoogleSignIn = async () => {
-
-    }
-    return(
+    const { startOAuthFlow } = useOAuth({ strategy: "oauth_google" })
+    const handleGoogleSignIn = useCallback(async () => {
+        try {
+            const result = await googleOAuth(startOAuthFlow)
+            if (result.code === "session_exists"||result.code==="success") {
+                Alert.alert("Success", "Session Exist. Redirect to home page")
+                router.push("/(root)/(tabs)/home")
+            }
+            Alert.alert(result.success ? "Sucess" : "Error", result.message)
+        }
+        catch (err) {
+            console.error("OAuth error", err)
+        }
+    }, [])
+    return (
         <View>
             <View className="flex flex-row justify-center items-center mt-4 gap-x-3">
                 <View className="flex-1 h-[1px] bg-general-100" />

lib/auth.ts

@@ -1,33 +1,77 @@
 
 import * as SecureStore from 'expo-secure-store'
+import * as Linking from "expo-linking"
+import { fetchAPI } from './fetch'
+
 
 export interface TokenCache {
-    getToken: (key: string) => Promise<string | undefined | null>
-    saveToken: (key: string, token: string) => Promise<void>
-    clearToken?: (key: string) => void
-  }
+  getToken: (key: string) => Promise<string | undefined | null>
+  saveToken: (key: string, token: string) => Promise<void>
+  clearToken?: (key: string) => void
+}
 
-  export const tokenCache = {
-    async getToken(key: string) {
-      try {
-        const item = await SecureStore.getItemAsync(key)
-        if (item) {
-          console.log(`${key} was used 🔐 \n`)
-        } else {
-          console.log('No values stored under key: ' + key)
-        }
-        return item
-      } catch (error) {
-        console.error('SecureStore get item error: ', error)
-        await SecureStore.deleteItemAsync(key)
-        return null
+export const tokenCache = {
+  async getToken(key: string) {
+    try {
+      const item = await SecureStore.getItemAsync(key)
+      if (item) {
+        console.log(`${key} was used 🔐 \n`)
+      } else {
+        console.log('No values stored under key: ' + key)
       }
-    },
-    async saveToken(key: string, value: string) {
-      try {
-        return SecureStore.setItemAsync(key, value)
-      } catch (err) {
-        return
+      return item
+    } catch (error) {
+      console.error('SecureStore get item error: ', error)
+      await SecureStore.deleteItemAsync(key)
+      return null
+    }
+  },
+  async saveToken(key: string, value: string) {
+    try {
+      return SecureStore.setItemAsync(key, value)
+    } catch (err) {
+      return
+    }
+  },
+}
+export const googleOAuth = async (startOAuthFlow: any) => {
+  try {
+    const { createdSessionId, signIn, signUp, setActive } = await startOAuthFlow({
+      redirectUrl: Linking.createURL("/(root)/(tabs)/home")
+    })
+    if (createdSessionId) {
+      if (setActive) {
+        await setActive!({
+          session: createdSessionId
+        })
+        if (signUp.createdSessionId) {
+          await fetchAPI("/(api)/user",
+            {
+              method: "POST",
+              body: JSON.stringify({
+                name: `${signUp.firstName} ${signUp.lastName}`,
+                email: signUp.email,
+                clerkId: signUp.createdUserId
+              })
+            })
+        }
+        return {
+          success: true,
+          code: "success",
+          message: "You have successfully authenticated"
+        }
       }
-    },
-  }
+
+    }
+    return {
+      success: false,
+      message: "An error occurred"
+    }
+
+  } catch (error: any) {
+    return {
+      success: false,
+      message: error?.errors[0]?.longMessage
+    }
+  }
+}