Added google sign in and refactored app config and .env and component…

.env.example

@@ -1,20 +1,31 @@
 # Clerk Configuration
 # Visit https://dashboard.clerk.com to find your API Keys
-EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=
+EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_bmF0dXJhbC1vcmlvbGUtNDYuY2xlcmsuYWNjb3VudHMuZGV2JA
 
 # EAS Build Configuration (Optional)
 # Find your Team ID at: https://developer.apple.com/account/
 # After running: eas build:configure
-APPLE_TEAM_ID=
+APPLE_TEAM_ID=L8SD6SB282
 EAS_PROJECT_ID=
 APP_NAME=My Clerk App
 APP_SLUG=my-clerk-app
 APP_SCHEME=myapp
 
 # iOS Configuration (Optional)
 # Change this to your own bundle identifier
-IOS_BUNDLE_IDENTIFIER=com.yourcompany.yourapp
+IOS_BUNDLE_IDENTIFIER=com.clerk.clerkexpoquickstart
 
 # Android Configuration (Optional)
 # Change this to your own package name
-ANDROID_PACKAGE=com.yourcompany.yourapp
+ANDROID_PACKAGE=com.clerk.clerkexpoquickstart
+
+# Google Sign-In Configuration
+# Visit https://console.cloud.google.com/apis/credentials to create OAuth credentials
+# iOS Client ID from Google Cloud Console
+EXPO_PUBLIC_CLERK_GOOGLE_IOS_CLIENT_ID=420964131326-2ft1aon54sedi68v22beo68e16h8ispn.apps.googleusercontent.com
+# iOS URL Scheme (format: com.googleusercontent.apps.YOUR_IOS_CLIENT_ID_PREFIX)
+EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME=com.googleusercontent.apps.420964131326-2ft1aon54sedi68v22beo68e16h8ispn
+# Android Client ID from Google Cloud Console
+EXPO_PUBLIC_CLERK_GOOGLE_ANDROID_CLIENT_ID=420964131326-pjhkh5k9tmi2ttbu5fghq1kfk62fhgrq.apps.googleusercontent.com
+# Web Client ID from Google Cloud Console
+EXPO_PUBLIC_CLERK_GOOGLE_WEB_CLIENT_ID=420964131326-mi36gfvjkd0dr0sltrg2hsvbrr9gdmvh.apps.googleusercontent.com

.gitignore

@@ -24,4 +24,16 @@ expo-env.d.ts
 ios/
 
 # android
-android/
+android/
+
+# yalc
+.yalc
+yalc.lock
+
+# metro
+metro.config.js
+
+# artifacts
+*.ipa
+*.apk
+*.aab

README.md

@@ -39,6 +39,7 @@ After following the quickstart you'll have learned how to:
 - Conditionally show content based on your auth state
 - Build your sign-in and sign-up pages
 - **(Optional)** Enable native Apple Sign-In on iOS
+- **(Optional)** Enable native Google Sign-In on iOS and Android
 
 ## Quick Start
 
@@ -122,7 +123,7 @@ Native Apple Sign-In is **disabled by default** and requires additional setup:
 
 **To enable:**
 
-1. Follow the complete setup guide: TODO: link docs here.
+1. Follow the [Sign in with Apple setup guide](https://clerk.com/docs/guides/configure/auth-strategies/sign-in-with-apple).
 
 2. Uncomment the Apple Sign-In button in:
 
@@ -131,8 +132,6 @@ Native Apple Sign-In is **disabled by default** and requires additional setup:
 
 3. Build with EAS or local prebuild (Apple Sign-In doesn't work in Expo Go)
 
-For detailed instructions, see [APPLE_SIGNIN_SETUP.md](./APPLE_SIGNIN_SETUP.md).
-
 ## Building for Production
 
 ### Using EAS Build (Recommended)
@@ -192,16 +191,15 @@ npx expo run:android --variant release
 ```
 ├── app/
 │   ├── (auth)/
-│   │   ├── sign-in.tsx          # Sign-in screen
-│   │   └── sign-up.tsx          # Sign-up screen
+│   │   ├── sign-in.tsx             # Sign-in screen
+│   │   └── sign-up.tsx             # Sign-up screen
 │   ├── (home)/
-│   │   └── index.tsx            # Home screen (protected)
+│   │   └── index.tsx               # Home screen (protected)
 │   ├── components/
 │   │   └── AppleSignInButton.tsx # Optional Apple Sign-In component
 │   └── _layout.tsx              # Root layout with ClerkProvider
 ├── .env.example                 # Environment variables template
-├── eas.json                     # EAS Build configuration
-└── APPLE_SIGNIN_SETUP.md       # Apple Sign-In setup guide
+└── eas.json                     # EAS Build configuration
 ```
 
 ## Environment Variables
@@ -241,7 +239,7 @@ To learn more about Clerk and Expo, check out the following resources:
 
 ### Apple Sign-In not working
 
-- Verify you've followed all steps in [APPLE_SIGNIN_SETUP.md](./APPLE_SIGNIN_SETUP.md)
+- Verify you've followed all steps in the [Sign in with Apple setup guide](https://clerk.com/docs/guides/configure/auth-strategies/sign-in-with-apple)
 - Apple Sign-In requires a native build (doesn't work in Expo Go)
 - Check that the capability is enabled in your Apple Developer account
 

app.config.ts

@@ -1,4 +1,5 @@
 import { ExpoConfig, ConfigContext } from "expo/config";
+import "dotenv/config";
 
 export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
@@ -17,7 +18,8 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   ios: {
     supportsTablet: true,
     bundleIdentifier:
-      process.env.IOS_BUNDLE_IDENTIFIER || "com.yourcompany.yourapp",
+      process.env.EXPO_PUBLIC_IOS_BUNDLE_IDENTIFIER ||
+      "com.clerk.clerkexpoquickstart",
     ...(process.env.APPLE_TEAM_ID && {
       appleTeamId: process.env.APPLE_TEAM_ID,
     }),
@@ -30,7 +32,8 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       foregroundImage: "./assets/images/adaptive-icon.png",
       backgroundColor: "#ffffff",
     },
-    package: process.env.ANDROID_PACKAGE || "com.yourcompany.yourapp",
+    package:
+      process.env.EXPO_PUBLIC_ANDROID_PACKAGE || "com.yourcompany.yourapp",
   },
   web: {
     bundler: "metro",
@@ -42,16 +45,23 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     "expo-secure-store",
     "expo-font",
     "expo-apple-authentication",
+    "@clerk/expo",
   ],
   experiments: {
     typedRoutes: true,
   },
   extra: {
     router: {},
-    ...(process.env.EAS_PROJECT_ID && {
-      eas: {
-        projectId: process.env.EAS_PROJECT_ID,
-      },
-    }),
+    eas: {
+      projectId: process.env.EAS_PROJECT_ID || "Your Project ID",
+    },
+    EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME:
+      process.env.EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME,
+    EXPO_PUBLIC_CLERK_GOOGLE_IOS_CLIENT_ID:
+      process.env.EXPO_PUBLIC_CLERK_GOOGLE_IOS_CLIENT_ID,
+    EXPO_PUBLIC_CLERK_GOOGLE_ANDROID_CLIENT_ID:
+      process.env.EXPO_PUBLIC_CLERK_GOOGLE_ANDROID_CLIENT_ID,
+    EXPO_PUBLIC_CLERK_GOOGLE_WEB_CLIENT_ID:
+      process.env.EXPO_PUBLIC_CLERK_GOOGLE_WEB_CLIENT_ID,
   },
 });

app.json

@@ -29,10 +29,15 @@
     "plugins": [
       "expo-router",
       "expo-secure-store",
-      "expo-font"
+      "expo-font",
+      "expo-apple-authentication",
+      "@clerk/expo"
     ],
     "experiments": {
       "typedRoutes": true
+    },
+    "extra": {
+      "EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME": ""
     }
   }
 }

app/(auth)/_layout.tsx

@@ -1,5 +1,5 @@
 import { Redirect, Stack } from 'expo-router'
-import { useAuth } from '@clerk/clerk-expo'
+import { useAuth } from '@clerk/expo'
 
 export default function UnAuthenticatedLayout() {
   const { isSignedIn } = useAuth()

app/(auth)/sign-in.tsx

@@ -1,4 +1,4 @@
-import { useSignIn } from "@clerk/clerk-expo";
+import { useSignIn } from "@clerk/expo";
 import { Link, useRouter } from "expo-router";
 import {
   Text,
@@ -8,40 +8,41 @@ import {
   StyleSheet,
 } from "react-native";
 import React from "react";
-import AppleSignInButton from "../components/AppleSignInButton";
+// import AppleSignInButton from "../components/AppleSignInButton";
+// import GoogleSignInButton from "../components/GoogleSignInButton";
 
 export default function Page() {
-  const { signIn, setActive, isLoaded } = useSignIn();
+  const { signIn, fetchStatus } = useSignIn();
   const router = useRouter();
 
   const [emailAddress, setEmailAddress] = React.useState("");
   const [password, setPassword] = React.useState("");
 
   // Handle the submission of the sign-in form
   const onSignInPress = async () => {
-    if (!isLoaded) return;
+    if (fetchStatus === "fetching") return;
 
     // Start the sign-in process using the email and password provided
-    try {
-      const signInAttempt = await signIn.create({
-        identifier: emailAddress,
-        password,
-      });
+    const { error } = await signIn.password({
+      identifier: emailAddress,
+      password,
+    });
 
-      // If sign-in process is complete, set the created session as active
-      // and redirect the user
-      if (signInAttempt.status === "complete") {
-        await setActive({ session: signInAttempt.createdSessionId });
-        router.replace("/");
-      } else {
-        // If the status isn't complete, check why. User might need to
-        // complete further steps.
-        console.error(JSON.stringify(signInAttempt, null, 2));
-      }
-    } catch (err) {
+    if (error) {
       // See https://clerk.com/docs/custom-flows/error-handling
       // for more info on error handling
-      console.error(JSON.stringify(err, null, 2));
+      console.error(JSON.stringify(error, null, 2));
+      return;
+    }
+
+    // If sign-in process is complete, finalize and redirect the user
+    if (signIn.status === "complete") {
+      await signIn.finalize();
+      router.replace("/");
+    } else {
+      // If the status isn't complete, check why. User might need to
+      // complete further steps.
+      console.error("Sign-in status:", signIn.status);
     }
   };
 
@@ -55,14 +56,30 @@ export default function Page() {
         To enable Apple Sign-In:
         1. Uncomment the import at the top: import AppleSignInButton from '../components/AppleSignInButton'
         2. Uncomment the <AppleSignInButton /> component below
-        3. Follow the complete setup guide in APPLE_SIGNIN_SETUP.md
+        3. Follow the setup guide: https://clerk.com/docs/guides/configure/auth-strategies/sign-in-with-apple
 
         Note: Requires Apple Developer Account and additional configuration in:
         - Apple Developer Console
         - Clerk Dashboard
         - EAS Build or Xcode signing
       */}
-      <AppleSignInButton />
+      {/* <AppleSignInButton /> */}
+
+      {/*
+        OPTIONAL: Native Google Sign-In (iOS and Android)
+
+        To enable Google Sign-In:
+        1. Uncomment the import at the top: import GoogleSignInButton from '../components/GoogleSignInButton'
+        2. Uncomment the <GoogleSignInButton /> component below
+        3. Follow the setup guide: https://clerk.com/docs/guides/configure/auth-strategies/sign-in-with-google
+
+        Note: Requires Google Cloud Console setup and additional configuration in:
+        - Google Cloud Console (OAuth credentials)
+        - Clerk Dashboard
+        - Environment variables (EXPO_PUBLIC_CLERK_GOOGLE_*)
+        - iOS: @clerk/clerk-expo plugin in app.config.ts
+      */}
+      {/* <GoogleSignInButton /> */}
 
       <TextInput
         style={styles.input}