Step 1: Set up Google Cloud Account
Sub-step 1: Create a Google Cloud account
To get started, follow these steps:
- Visit Google Cloud Console.
- Click on "Create account" and follow the registration process.
Sub-step 2: Set up a new project
Once you have your Google Cloud account, create a new project for your Next.js app. Here's how:
- Go to the Google Cloud Console.
- Click on the project drop-down and select "New Project".
- Enter a project name and click "Create".
Sub-step 3: Set up OAuth consent screen
Follow these steps to set up the OAuth consent screen:
- Navigate to "APIs & Services" > "OAuth consent screen".
- Set user type to external, then create.
- Fill in app information, set the app domain to http://localhost:3000 for all 3 fields.
- Set email to your email.
- For Scopes, click "Add or remove scopes" and select the top 3 for the bare minimum user data. Click update at the bottom.
- Save and continue.
Sub-step 4: Create Credentials
Follow these steps to set up the OAuth consent screen:
- Navigate to "APIs & Services" > "Credentials".
- Set user type to external, then create.
- Click the "+ CREATE CREDENTIALS" button at the top of the page.
- Select OAuth client ID
- Set Application type to web application then fill in app name.
- Add an Authorized JavaScript origins URI. This will be http://localhost:3000 for now.
- Add Authorized redirect URI. This will be http://localhost:3000/api/auth/callback/google for now
- Click create
- You can copy the client ID and the Client secret to the .env.example file.
For more detailed instructions, refer to the Google Cloud Getting Started Guide.