Enabling Google as an OAuth provider

For Google, we need to collect the following two environment variables:

• GOOGLE_CLIENT_ID
• GOOGLE_CLIENT_SECRET

Prerequisites

1. Create a Google Developer account
2. Sign into the Google Cloud console

Creating a new project

1. In the Google Cloud console, in the top bar, there's a dropdown next to the Google Cloud logo - it'll either say Select a project or the name of the currently selected project. Click it, and then create a new project. Call it whatever you want.
2. In your project, navigate to APIs & Services.
3. In the left navigation bar, select Credentials. Click CREATE CREDENTIALS, and then OAuth client ID. For Application type, select Web application.
4. In the Client ID for Web application page, give your client any name you like. You'll also see Client ID under Additional information - this is your GOOGLE_CLIENT_ID.
5. Under Client secrets, click ADD SECRET, and then copy the value it gives you. This is your GOOGLE_CLIENT_SECRET.
6. Under Authorized redirect URIs, add the following, filling in your API URL so that these are complete URLs:
   • {your API url}/auth/oauth?method=signupWithGoogle
   • {your API url}/auth/oauth?method=loginWithGoogle
   • {your API url}/auth/oauth?method=linkGoogleAccount
7. Now, in the left navigation bar, select OAuth consent screen. Here's where you'll actually enable your Sign in with Google page. Add yourself as a test user, and hit PUBLISH APP when you're ready to go live - note that they generally have verification requirements for you to do this, and they'll show you what those are once you hit that button.

Using the Google environment variables

Go ahead and add the two environment variables that you just collected to your environment. You'll do this in your .env file while working locally, and in your deployment settings for your hosting provider in production.

You'll also need to update redwood.toml's includeEnvironmentVariables parameter to include your GOOGLE_CLIENT_ID, otherwise it won't be available to your client, and your client won't be able to kick off the OAuth flow.

Enable Google as a provider

Now, you can finally enable Google as an OAuth provider!

Go to web/src/auth.ts, and make the following change:

 const oAuthClient = createOAuthClient({
   enabledProviders: {
+    google: true
   },
 })

Then, go to api/src/functions/auth.ts, and make the following change:

  const oAuthHandler = new OAuthHandler(event, context, authHandler, {
    oAuthModelAccessor: 'oAuth',
    enabledProviders: {
+     google: true,
    },
  })