Next.js OAuth/Firebase Starter Kit

AboutDeveloperUI?

Step 1: Set up Google Cloud Account

HomeNext Step

Sub-step 1: Create a Google Cloud account

To get started, follow these steps:

  1. Visit Google Cloud Console.
  2. 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:

  1. Go to the Google Cloud Console.
  2. Click on the project drop-down and select "New Project".
  3. 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:

  1. Navigate to "APIs & Services" > "OAuth consent screen".
  2. Set user type to external, then create.
  3. Fill in app information, set the app domain to http://localhost:3000 for all 3 fields.
  4. Set email to your email.
  5. For Scopes, click "Add or remove scopes" and select the top 3 for the bare minimum user data. Click update at the bottom.
  6. Save and continue.

Sub-step 4: Create Credentials

Follow these steps to set up the OAuth consent screen:

  1. Navigate to "APIs & Services" > "Credentials".
  2. Set user type to external, then create.
  3. Click the "+ CREATE CREDENTIALS" button at the top of the page.
  4. Select OAuth client ID
  5. Set Application type to web application then fill in app name.
  6. Add an Authorized JavaScript origins URI. This will be http://localhost:3000 for now.
  7. Add Authorized redirect URI. This will be http://localhost:3000/api/auth/callback/google for now
  8. Click create
  9. 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.