Google OAuth
Learn how to configure Google OAuth.
Configure The OAuth Consent Screen
Login to Google Developer Console
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.
Create a OAuth consent screen
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:
Additionally, you can add the production URL as well like so.
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:
Additionally, you can add the production URL as well like so:
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 Stripe is configured.
Push to Production
Navigate to the OAuth consent screen
On the left navigation menu, click on "OAuth consent screen".
Submit for verification
Click on "Submit for verification" and fill in the required information.
Once the app is verified, anyone will be able to login with their google account.
Last updated on