Google OAuth

Learn how to configure Google OAuth.

Go to the Google Developer Console and login.

Create a new project

In the top left corner, click on the project dropdown and select "New Project".

Choose a project name and click on "Create".

Wait a bit until the project is created.

Once the project is created click on "Select project" and choose the project you just created.

Click on the "OAuth consent screen" tab on the left navigation menu.

Hover over the APIs & Services tab and click on OAuth consent screen.

Choose "External" and click on "Create".

Fill in the App information

Fill in the App name, user support email, and developer contact information. Optionally you can upload a logo as well.

Fill in the App domain (optional)

If you have a domain already, fill in the application home page url, privacy policy url, and terms of service url.

This step is optional and can be skipped. You can fill in the domain information later once you have a domain.

Authorized domains (optional)

Add the domain of your application to the authorized domains list.

This step is optional and can be skipped. You can fill in the domain information later once you have a domain.

Developer contact information

Fill in the developer contact information and click on "Save and continue".

Add Scopes

Click on "Add or remove scopes" and check the .../auth/userinfo.email and .../auth/userinfo.profile scopes.

You can also add additional scopes if needed.

Click on "Update" and then "Save and continue".

Add Test Users

While the app is in testing, you can add test users to the app. Go ahead and add yourself as a test user.

Click on "Add users" and add the email addresses of the test users.

Click on "Save and continue".

Once you are ready to go live, you can remove the test users and submit the app for verification. This way anyone will be able to login with their google account, even if they are not a test user.

Summary

Read the summary and click on "Back to dashboard".

Create a Google OAuth App

Create OAuth Client ID

Under the APIs & Services tab, click on "Credentials".

Click on "Create Credentials" and select "OAuth client ID".

Choose "Web application" as the application type.

Write the name of the application under "Name".

Add Authorized JavaScript Origins

Under "Authorized Javascript origins" add the following URI:

http://localhost:3000

Additionally, you can add the production URL as well like so.

https://app.your-url.com

Note that I am using the app subdomain in the production URL.

Make sure to include the correct production URL of your application.

Add Authorized redirect URIs

Under "Authorized redirect URIs" add the following redirect URI:

http://localhost:3000/api/auth/callback/google

Additionally, you can add the production URL as well like so:

https://app.your-url.com/api/auth/callback/google

Note that I am using the app subdomain in the production URL.

Make sure to include the correct production URL of your application.

Click on "Create" and you will get the client ID and client secret.

Copy the Client ID and Client Secret

Copy the client ID and paste it beside GOOGLE_CLIENT_ID in the .env file.

Copy the client secret and paste it beside GOOGLE_CLIENT_SECRET in the .env file.

Restart the server

Congratulations! You can now use Google OAuth in your application.

Navigate to http://localhost:3000/signin and click on "Sign in with Google" to test the authentication.

Make sure to restart the server after adding the client ID and client secret in the .env.

It may take a few minutes for the Google OAuth to work after creating the Google OAuth app.

After a successful login, we won't be able to move past the onboarding screen until either Stripe or Lemon Squeezy is configured. Alternatively, you can temporarly disable the onboarding flow in the packages/utils/src/constants/featureFlags.ts file.