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

# Google OAuth Web

> Implement OAuth authentication for Web

# Sign in with Google on Expo React Native Web Client

First make sure you have completed the [Quickstart](/quickstart) page.

* We need Supabase to be setup.

<Steps>
  <Step>
    First of all, you need to create a new project in the Google Cloud Console if you don't have one already.

    * We created a new project in [RevenueCat Integration Android](/monetization/in-app-purchases/android) page.
      If you want you can follow this first.

    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/setup/googleoauth/web/step1.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=2487f74335ed638684f744cabe9b63fb" alt="Step 1" className="w-full h-full rounded-xl" width="868" height="720" data-path="images/setup/googleoauth/web/step1.png" />
    </Frame>
  </Step>

  <Step>
    Click the `APIs & Services` menu.

    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/setup/googleoauth/web/step2.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=432457949be9212218d7dd98f06397f1" alt="Step 2" className="w-full h-full rounded-xl" width="1128" height="720" data-path="images/setup/googleoauth/web/step2.png" />
    </Frame>
  </Step>

  <Step>
    Click the `Credentials` menu.

    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/setup/googleoauth/web/step3.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=9c281d424f09a4aee6c9a7f6e1bca9f7" alt="Step 3" className="w-full h-full rounded-xl" width="1153" height="669" data-path="images/setup/googleoauth/web/step3.png" />
    </Frame>
  </Step>

  <Step>
    Then click the `Create Credentials` button.

    * Please select `OAuth client ID`

    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/setup/googleoauth/web/step4.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=ed4fdaf191798fcf40a7e6d5cd1e0c77" alt="Step 4" className="w-full h-full rounded-xl" width="529" height="294" data-path="images/setup/googleoauth/web/step4.png" />
    </Frame>
  </Step>

  <Step>
    But you need to `Configure Consent Screen` first.

    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/setup/googleoauth/web/step5.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=c592d745cb6c73e86cdb14b45c569c42" alt="Step 5" className="w-full h-full rounded-xl" width="793" height="411" data-path="images/setup/googleoauth/web/step5.png" />
    </Frame>
  </Step>

  <Step>
    Go to Supabase Dashboard > Authentication > Providers

    * Select `Google`
          <Frame>
            <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/setup/googleoauth/web/step6.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=c7bc22c438c04cfaee9265e3c0e585f7" alt="Step 6" className="w-full h-full rounded-xl" width="1293" height="998" data-path="images/setup/googleoauth/web/step6.png" />
          </Frame>
  </Step>

  <Step>
    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/setup/googleoauth/web/step7.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=d9e0731100c1c8dbffec75a436418178" alt="Step 7" className="w-full h-full rounded-xl" width="722" height="886" data-path="images/setup/googleoauth/web/step7.png" />
    </Frame>
  </Step>

  <Step>
    1. Then you need to select `Web Application` first.
    2. Fill the form.
    3. Paste your `https://<project-ref>.supabase.co/auth/v1/callback` in the `Authorized redirect URIs` field.
    4. Click the `Save` button.

    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/setup/googleoauth/web/step8.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=92d8f26e1fd69b945a8ad633e98fe62f" alt="Step 8" className="w-full h-full rounded-xl" width="609" height="492" data-path="images/setup/googleoauth/web/step8.png" />
    </Frame>
  </Step>

  <Step>
    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/setup/googleoauth/web/step9.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=9d3b9fe057f4b3e67b76db54444d44ae" alt="Step 9" className="w-full h-full rounded-xl" width="867" height="966" data-path="images/setup/googleoauth/web/step9.png" />
    </Frame>
  </Step>

  <Step>
    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/setup/googleoauth/web/step10.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=b368fc8d1d34cf8f822fa8a0d60cf917" alt="Step 10" className="w-full h-full rounded-xl" width="1008" height="913" data-path="images/setup/googleoauth/web/step10.png" />
    </Frame>
  </Step>

  <Step>
    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/setup/googleoauth/web/step11.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=7de7d0d716adc734739c650d03f62808" alt="Step 11" className="w-full h-full rounded-xl" width="707" height="842" data-path="images/setup/googleoauth/web/step11.png" />
    </Frame>
  </Step>

  <Step>
    End of the setup.

    * You need to add the `GOOGLE_OAUTH_CLIENT_ID` to the `.env` file.

    ```{2} theme={null}
    #* Google OAuth keys for the app
    EXPO_PUBLIC_GOOGLE_OAUTH_CLIENT_ID=some-id.apps.googleusercontent.com
    EXPO_PUBLIC_GOOGLE_OAUTH_IOS_CLIENT_ID=some-id.apps.googleusercontent.com             
    EXPO_PUBLIC_GOOGLE_OAUTH_ANDROID_CLIENT_ID=some-id.apps.googleusercontent.com
    ```
  </Step>

  <Check>
    You have successfully set up Google OAuth for your Expo React Native Web Client. 🎉
  </Check>
</Steps>

<CardGroup>
  <Card title="Google OAuth IOS" icon="apple" href="/auth/oauth/google/ios">
    Please click here for Google OAuth IOS.
  </Card>

  <Card title="Google OAuth Android" icon="android" href="/auth/oauth/google/android">
    Please click here for Google OAuth Android.
  </Card>
</CardGroup>