Google Authentication

Configure the OAuth Consent Screen

1. Create a New Project:

   • Go to the Google Cloud Console.
   • Click on the project dropdown in the top left corner and select "New Project."
   • Give your project a name.
   • Click "Create."

2. Set Up the OAuth Consent Screen:

   • Go to the OAuth consent screen.
   • Choose "External" as the user type
   • Click "Create."

3. Fill in the App Information:

   • App name: Enter your app's name.
   • User support email: Enter a contact email.
   • App logo: (Optional) Upload your app's logo.
   • App domain: Enter your domain if applicable.
   • Authorized domains: Add domains you will use.
   • Developer contact information: Enter your email address.
   • Click "Save and Continue."

4. Scopes:

   • Click "Add or Remove Scopes" and add the required scopes for your app. For basic Google authentication, you’ll need openid, email, and profile.
   • Click "Save and Continue."

5. Test Users:

   • If your app is in development, you can add test users here. These users will be able to use your app's OAuth functionality even if it's not yet verified.
   • Click "Save and Continue."

Create OAuth 2.0 Client IDs

Generate a Client ID for Web

1. Go to Credentials:

   • Navigate to the Credentials tab in the Google Cloud Console.
   • Click "Create Credentials" > "OAuth 2.0 Client IDs."

2. Configure OAuth Client ID:

   • Choose "Web application" as the application type.
   • Name your OAuth client (e.g., "Expo Web Client").

3. Set Authorized Redirect URIs:

   • Add the following redirect URIs:
     • For Expo development: http://localhost:8081
     • For production: Add your website’s domain (e.g., https://yourwebsite.com/).
   • Click "Create."

4. Save Client ID and Secret: Once created, save the Client ID you’ll need them later.

2. Generate a Client ID for Android

1. Create Another OAuth Client ID:
   • Click "Create Credentials" > "OAuth 2.0 Client IDs."
   • Choose "Android" as the application type.

2. Configure OAuth Client ID:
   • Name your OAuth client (e.g., "Expo Android Client").
   • Add your Android package name (e.g., com.yourcompany.yourapp).
   • Add your development SHA-1 signing certificate. You can find it by running:

     keytool -list -v -keystore ./apps/myapps/.android/debug.keystore \
            -alias androiddebugkey  \
            -storepass android -keypass android

• Click "Create."

3. Save Client ID and Secret:
   • Save the Client ID and Client Secret.

3. Generate a Client ID for iOS

1. Create Another OAuth Client ID:

   • Click "Create Credentials" > "OAuth 2.0 Client IDs."
   • Choose "iOS" as the application type.

2. Configure OAuth Client ID:

   • Name your OAuth client (e.g., "Expo iOS Client").
   • Add your iOS bundle identifier (e.g., com.yourcompany.yourapp).
   • Click "Create."

3. Save Client ID and Secret:

   • Save the Client ID.

Install and Configure the Expo Google Auth Package

authentification: {
   google: {
      iosUrlScheme: "com.googleusercontent.apps.xxxxx-xxxxxxxxxxxxx",
      webClientId: "xxxxx-xxxxxxxxxxxxx.apps.googleusercontent.com",
      iosClientId: "xxxxx-xxxxxxxxxxxxx.apps.googleusercontent.com"
   },
},  

Replace iosClientId, iosUrlScheme, and webClientId with the corresponding client IDs from the Google Cloud Console.

Update .env to add Google signin audience to validate the audience of the token on the server side :

GOOGLE_SIGNIN_AUDIENCE=your-iosUrlScheme,your-webClientId,your-androidClientId

It should be the same values as the webClientId, iosClientId and androidClientId separated by a comma.

Test Your Configuration

1. Run Your App:

   • For web: Use pnpm dev.
   • For Android: Use pnpm android.
   • For iOS: Use pnpm ios.

2. Sign In:

   • Click the "Login with Google" button and follow the sign-in process.

3. Check the Authentication Response:

   • Verify that you receive the user's information and authentication token.

Deploy Your App

Once you've successfully tested Google Authentication in your development environment, you can proceed to deploy your app to production. Ensure that you’ve set up the appropriate OAuth consent and client IDs for the production environment.