Set Up Provider

Overview

To enable Google OAuth authentication in your Next.js 14 SaaS application, you'll need to obtain credentials from the Google Developer Console. This guide will walk you through the process of creating a project in the Google Developer Console, configuring OAuth consent, and retrieving the necessary credentials.

Step 1: Create a Project in Google Developer Console

- Visit the Google Developer Console and sign in with your Google account.

- Click on the project dropdown at the top of the console and then click "New Project", after entering project name click "Create".

- Once your project is finished, click on the "APIs & Services" on the project home page.

- Select the user type for your application (usually "External"). Fill in the necessary details like the application name, user support email, and developer contact information.

- After finishing OAuth consent screen, click on the "Credentials", from there you should click on the "+ CREATE CREDENTIALS" that is located on the top of the screen.

- From the dropdown, select OAuth client ID, select "Web application".

Fill out the "Authorized JavaScript Origins" URI and "Authorized redirect URIs" URI.

- For testing in local environment, paste "http://localhost:3000" into the "Authorized JavaScript Origins".

- For testing in local environment, paste "http://localhost:3000/api/auth/callback/google" into the "Authorized redirect URIs".

- Once finished, click on the "CREATE" button.

- Then your Client ID and and Client Secret should pop up! With those in hand, edit the following lines in the .env file.

Step 2: Edit .env File