> ## Documentation Index
> Fetch the complete documentation index at: https://docs.viral-app.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Google OAuth

> Set up Google Sign-In for your app

# Google OAuth

Google Sign-In lets users authenticate with their Google account. It's widely trusted and many users prefer it for its convenience.

<Warning>
  **App Store Requirement:** If you add Google Sign-In, you **must** also add Apple Sign In. Your app will be rejected without it. See [Apple Sign In](/modules/auth-apple) for setup and important App Store guidelines.
</Warning>

***

## Overview

Setting up Google OAuth requires configuration in three places:

1. **Google Cloud Console** — Create OAuth credentials
2. **Supabase Dashboard** — Enable Google as an auth provider
3. **Your App** — Configure the redirect URI and use the auth function

**Time required:** \~20 minutes

***

## Part 1: Google Cloud Console

### Step 1: Create a Project (if needed)

<Steps>
  <Step title="Open Google Cloud Console">
    Go to [console.cloud.google.com](https://console.cloud.google.com/)

    Sign in with your Google account
  </Step>

  <Step title="Create or select a project">
    Click the project dropdown at the top

    Click **New Project** or select an existing one

    Give it a name (e.g., "Your App Name")
  </Step>
</Steps>

### Step 2: Configure OAuth Consent Screen

Before creating credentials, you need to configure what users see when they sign in.

<Steps>
  <Step title="Open OAuth consent screen">
    Go to **APIs & Services → OAuth consent screen**

    [Direct link](https://console.cloud.google.com/apis/credentials/consent)
  </Step>

  <Step title="Select user type">
    Choose **External** (unless you're building for a Google Workspace organization)

    Click **Create**
  </Step>

  <Step title="Fill in app information">
    | Field                       | Value                     |
    | --------------------------- | ------------------------- |
    | **App name**                | Your app's name           |
    | **User support email**      | Your email                |
    | **App logo**                | Optional, but recommended |
    | **Developer contact email** | Your email                |

    Click **Save and Continue**
  </Step>

  <Step title="Scopes">
    Click **Add or Remove Scopes**

    Select:

    * `.../auth/userinfo.email`
    * `.../auth/userinfo.profile`
    * `openid`

    Click **Update**, then **Save and Continue**
  </Step>

  <Step title="Test users (optional)">
    While in testing mode, add your email as a test user

    Click **Save and Continue**
  </Step>

  <Step title="Summary">
    Review and click **Back to Dashboard**
  </Step>
</Steps>

### Step 3: Create OAuth Credentials

<Steps>
  <Step title="Open Credentials">
    Go to **APIs & Services → Credentials**

    [Direct link](https://console.cloud.google.com/apis/credentials)
  </Step>

  <Step title="Create OAuth client ID">
    Click **+ Create Credentials → OAuth client ID**
  </Step>

  <Step title="Configure for iOS">
    | Field                | Value                                                  |
    | -------------------- | ------------------------------------------------------ |
    | **Application type** | iOS                                                    |
    | **Name**             | Your App (iOS)                                         |
    | **Bundle ID**        | Your app's bundle ID (e.g., `com.yourcompany.yourapp`) |

    Click **Create**
  </Step>

  <Step title="Save your Client ID">
    Copy the **Client ID** — you'll need this for Supabase

    It looks like: `123456789-abc123def456.apps.googleusercontent.com`
  </Step>

  <Step title="Create Web client (for Supabase)">
    Click **+ Create Credentials → OAuth client ID** again

    | Field                        | Value                                                   |
    | ---------------------------- | ------------------------------------------------------- |
    | **Application type**         | Web application                                         |
    | **Name**                     | Your App (Web)                                          |
    | **Authorized redirect URIs** | `https://YOUR_PROJECT_REF.supabase.co/auth/v1/callback` |

    Click **Create**

    Copy both the **Client ID** and **Client Secret**
  </Step>
</Steps>

<Warning>
  **Keep your Client Secret secure.** Never commit it to version control or expose it in client-side code.
</Warning>

***

## Part 2: Supabase Dashboard

### Enable Google Provider

<Steps>
  <Step title="Open Auth settings">
    Go to your Supabase project dashboard

    Navigate to **Authentication → Providers**
  </Step>

  <Step title="Enable Google">
    Find **Google** in the list and click to expand

    Toggle **Enable Sign in with Google**
  </Step>

  <Step title="Enter credentials">
    Use the **Web application** credentials (not iOS):

    | Field             | Value                        |
    | ----------------- | ---------------------------- |
    | **Client ID**     | Your Web OAuth Client ID     |
    | **Client Secret** | Your Web OAuth Client Secret |
  </Step>

  <Step title="Save">
    Click **Save**
  </Step>
</Steps>

***

## Part 3: App Configuration

### Step 1: Update App Config

Update `config/app.config.ts`:

```typescript theme={null}
auth: {
  mode: 'anonymous', // or 'required'
  providers: {
    apple: true,  // Required if you have Google
    google: true, // Enable Google Sign In
    email: false,
  },
}
```

### Step 2: Configure Redirect URI

In `lib/auth.ts`, update the scheme in `signInWithGoogle()` to match your app:

```typescript theme={null}
const redirectUri = makeRedirectUri({
  scheme: 'your-app-scheme', // Must match "scheme" in app.json
});
```

Your scheme is defined in `app.json`:

```json theme={null}
{
  "expo": {
    "scheme": "your-app-scheme"
  }
}
```

### Step 3: Use in Your App

```typescript theme={null}
import { signInWithGoogle } from '@/lib/auth';

try {
  const { user, session } = await signInWithGoogle();
  console.log('Signed in:', user.id);
} catch (error) {
  console.error('Google sign in failed:', error);
}
```

Or use the pre-built component:

```typescript theme={null}
import { SocialAuthButtons } from '@/components/auth';

<SocialAuthButtons
  showApple={true}
  showGoogle={true}
  onSuccess={() => router.replace('/(main)')}
  onError={(err) => Alert.alert('Error', err.message)}
/>
```

***

## Testing

### Development Build Required

Google OAuth requires a development build — it won't work in Expo Go.

```bash theme={null}
eas build --platform ios --profile development
```

### Testing Checklist

1. Build and install the development build
2. Tap "Sign in with Google"
3. Browser opens with Google's sign-in page
4. Sign in with a test user account
5. You're redirected back to the app
6. User is authenticated

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="'redirect_uri_mismatch' error">
    The redirect URI in Google Console must exactly match what your app sends.

    * Check the redirect URI in **Credentials → Web client → Authorized redirect URIs**
    * It should be: `https://YOUR_PROJECT_REF.supabase.co/auth/v1/callback`
    * No trailing slash, exact case match
  </Accordion>

  <Accordion title="'access_denied' error">
    * If using External user type, ensure your Google account is added as a test user
    * Or publish your OAuth consent screen to production
  </Accordion>

  <Accordion title="Browser opens but nothing happens">
    * Check your app scheme matches in `app.json` and the auth code
    * Ensure you're using a development build, not Expo Go
  </Accordion>

  <Accordion title="'invalid_client' error">
    * Verify you're using the Web client credentials in Supabase (not iOS)
    * Double-check the Client ID and Client Secret are correct
  </Accordion>
</AccordionGroup>

***

## Publishing to Production

Before launching your app:

<Steps>
  <Step title="Publish OAuth consent screen">
    Go to **OAuth consent screen** in Google Cloud Console

    Click **Publish App**

    This removes the "test user" restriction
  </Step>

  <Step title="Verify your app (optional)">
    If you're requesting sensitive scopes, Google may require verification

    For basic profile/email scopes, this is usually not required
  </Step>
</Steps>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Apple Sign In" icon="apple" href="/modules/auth-apple">
    Required if you offer Google Sign-In
  </Card>

  <Card title="Email + Password" icon="envelope" href="/modules/auth-email">
    Add traditional email authentication
  </Card>
</CardGroup>