This step uses Google Cloud Platform as an auth provider as an example. We'll configure the consent screen, create an OAuth2 client, and set up the scopes that our app will request from Google. You can follow a similar process with other providers like GitHub, Facebook, or Twitter.

Head to the Google Cloud Platform Console. The Google Cloud service that we'll want is the "APIs and Services" product. Once there, head to the "Credentials" section.

Configure the consent screen

If you've never created an OAuth client on Google Cloud before, you'll need to set up a consent screen. This is the page that the user will see when they sign in to our Todo app and give it permission to access their Google account.

Google will prompt you to select "Internal" or "External" for the user type. For this exercise, select "External" to enable your application to reach anyone with a Google email. We will deploy our "External" application in "Testing" mode so we won't need to verify it.

Next, Google's consent form will ask for a few pieces of information to display. The "home page" value should look like https://<shareHandle> For now, feel free to enter "" and "" as the values for your privacy policy and terms of service. If you wanted to submit your app for verification, these would need to be real pages associated with your app's domain.

Selecting OAuth Scopes

Scopes describe the kinds of user data our todo app is asking to use on behalf of the user. For example, we might request read/write access to the user's calendar if we wanted our todo app to be able to schedule tasks.

There are many options to choose from, but for the purpose of this exercise, we only need to request the "openid" scope from Google. The OpenID scope verifies the user's identity but provides no other user information. Picking this scope ensures that the auth provider will return a value in the TokenResponse that contains a field called sub which represents a unique identifier for the authenticated user.

📓 Instructions

"openid" is already included in the list of scopes provided by the defaultCloud config helper, so our oauthScopes field can be left as Optional.None.

Fill that out now in the ex4_oauth.deploy function.

oauthScopes = Optional.None

If you were to select more scopes for this consent screen, they should be added to the the "oauthScopes" field in a space-delimited string.

Common scope requests include "email" and "profile" values. Here's what it would look like to request email, profile, and calendar management scopes:

oauthScopes = Some "email profile"

Finally, Google will ask you to create some "Test Users" for the app. Add your own email address to test the todo app's OAuth flow.

Create the Google OAuth2 Client

Select "Create Credentials" and then "OAuth Client ID". You'll be prompted to select the application type. For this exercise, select "Web Application" and give your client a name.

Your authorized javascript origins should look something like https://<shareHandle>

The "Authorized redirect URI" is where Google will send the user after they've successfully logged in. The Auth library provides an "oauth/redirect" endpoint for this purpose, so this value should follow the pattern:


Click "Create Client" to see the values for your client id and secret. You'll need them to configure your defaultCloud function.

📓 Instructions

Save the client id and secret to environment variables. Next, change the ex4_oauth.deploy function to read the client id and secret from your environment variables and pass them to the google : ClientId -> ClientSecret -> Oauth2Client IdToken helper function from the OAuth2 library.

The first three values for your constructing your AuthConfig are done! 🎉 Your code should look something like this:

hmacKey : HMACKey
hmacKey = HMACKey (Text.toUtf8 (IO.getEnv "HMAC_KEY"))
clientId = getEnv "GOOGLE_CLIENT_ID"
clientSecret = getEnv "GOOGLE_CLIENT_SECRET"
oauthClient : Oauth2Client IdToken
oauthClient = google (ClientId clientId) (ClientSecret clientSecret)
oauthScopes : Optional Text
oauthScopes = None