Setup Google Sign-in

CloudNua Mobile uses environment variables to securely store OAuth credentials. This guide covers configuring Google sign-in functionality.

Create a GCP Project

• Log into GCP console with your Google account
• Click "Select a project" dropdown and choose "Create project"
• Enter a unique project name (e.g., "your-app-name")
• Click "Create" button
• Select the newly created project

Configure OAuth Consent Screen

• In the left navigation, click "OAuth consent screen"
• Choose how to configure and register your app, including target users
• Provide required details and click "Save and Continue"

Create OAuth Client IDs

• In the left navigation, click "Credentials"
• Click "Create credentials" and select "OAuth client ID"
• Create credentials for all target platforms

Note: These details are required to configure client applications and Supabase server.

Configure Supabase to Enable Google Sign-In

Local Setup:

• Find config.toml in apps/supabase/supabase directory
• Search for [auth.external.google]
• Change enabled = false to enabled = true

Deployed:

• Go to Supabase dashboard
• Select "Authentication" in sidebar
• Click "Providers" in Configuration section
• Enable Google provider and add environment variables

Configuring Environment Variables

For Expo app (.env.development):

EXPO_PUBLIC_GOOGLE_CLIENT_ID_IOS=
EXPO_PUBLIC_GOOGLE_CLIENT_ID_IOS_REVERSED=
EXPO_PUBLIC_GOOGLE_CLIENT_ID_ANDROID=
EXPO_PUBLIC_GOOGLE_CLIENT_ID_WEB=

For Next.js app (.env.development):

NEXT_PUBLIC_GOOGLE_CLIENT_ID_WEB=

Codebase Changes

1. Search for and uncomment <GoogleSignInButton /> in:

   • packages/components/custom/auth/SignInForm.tsx
   • packages/components/custom/auth/SignUpForm.tsx

2. In app.json, add this plugin:

[
  "@react-native-google-signin/google-signin",
  {
    "iosUrlScheme": "<YOUR_IOS_URL_SCHEME>"
  }
]

3. Uncomment required options in custom/auth/GoogleSignInButton.tsx

4. Enable Google provider in Supabase dashboard

Conclusion

Upon completion, Google login buttons appear on /signup and /signin routes.

Note: Google sign-in doesn't work with ExpoGO. Use development build mode for local testing.