Sign In to Google Cloud Console

1. Go to the Google Cloud Console
2. Sign in with your Google account

Create a New Project

1. Click on the "Select project" dropdown at the top left of the page
2. Click "New Project" in the popup window (located at the top right)
3. Enter a project name (e.g., "AI SaaS Platform")
4. Click "Create"
5. Once the project is created, click on the "Select project" dropdown again
6. Select your newly created project from the list

Access OAuth Consent Screen

1. In the Google Cloud Console, with your project selected, click on the navigation menu (three horizontal lines in the top left)
2. Navigate to "APIs & Services" > "OAuth consent screen"
3. You'll see a message: "Google Auth Platform not configured yet"
4. Click the "Get started" button

Configure App Information

1. App name: Enter your application name
2. User support email: Enter your email address
3. Click "Next"

Set Audience Type

1. Select "External" as the user type
2. Click "Next"

Add Developer Contact Information

1. Developer contact information: Enter your email address
2. Click "Next"

Complete Setup

1. Check "I agree to the Google API Services: User Data Policy."
2. Click "Continue"
3. Click "Create" to finalize the consent screen setup

Create Client ID

On the OAuth consent screen overview page, you'll see:

1. A message saying "You haven't configured any OAuth clients for this project yet."
2. Click the "Create OAuth client" button

Configure Client

1. Application type: Select "Web application"
2. Name: Enter a name for your client (this is only visible in the console, not to end users)

Add Authorized JavaScript Origins

First, retrieve your Amplify app URL, from your CDK directory run:

# Extract the app_name from cdk.json
APP_NAME=$(jq -r '.context.app_name' cdk.json)
echo "Using app_name from cdk.json: $APP_NAME"
 
# Set the export name pattern using the extracted APP_NAME
EXPORT_NAME="${APP_NAME}-${STAGE}-amplify-app-url"
 
# Retrieve the Amplify App URL by export name
AMPLIFY_APP_URL=$(aws cloudformation list-exports \
  --query "Exports[?Name=='$EXPORT_NAME'].Value" \
  --output text)
  
echo "Amplify App URL: $AMPLIFY_APP_URL"

Then, configure the authorized origins:

1. Click "Add URI" under Authorized JavaScript origins
2. Add your Amplify domain: https://dev.xxxxxxxxxxxx.amplifyapp.com (use the actual URL you retrieved)
3. Click "Add URI" again and add http://localhost:3000 for local development

Add Authorized Redirect URIs

First, retrieve your complete Cognito callback URL, from your CDK directory run:

# Extract the app_name from cdk.json
APP_NAME=$(jq -r '.context.app_name' cdk.json)
echo "Using app_name from cdk.json: $APP_NAME"
 
# Set the export name pattern using the extracted APP_NAME
EXPORT_NAME="${APP_NAME}-${STAGE}-userPool-domain"
 
# Retrieve the Cognito domain URL by export name
COGNITO_DOMAIN_URL=$(aws cloudformation list-exports \
  --query "Exports[?Name=='$EXPORT_NAME'].Value" \
  --output text)
  
# Create the complete callback URL by appending the oauth2/idpresponse path
COGNITO_CALLBACK_URL="${COGNITO_DOMAIN_URL}/oauth2/idpresponse"
  
echo "Cognito Callback URL: $COGNITO_CALLBACK_URL"

Then, add the complete callback URL to the authorized redirect URIs:

1. Click "Add URI" under Authorized redirect URIs
2. Paste the complete Cognito callback URL you retrieved

Create and Save Credentials

1. Click "Create"
2. A popup will appear with your credentials:
   • Client ID (looks like: xxxxxxx.apps.googleusercontent.com)
   • Client Secret
3. Copy both values or download the JSON file

Update Environment Variables

Navigate to the CDK directory (if you're not already there) and update your .env file with the Google OAuth variables:

cd cdk

Open your .env file and update these values:

# Google OAuth
GOOGLE_OAUTH_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_OAUTH_CLIENT_SECRET=your-client-secret

Redeploy Your Infrastructure

After updating the environment variables, redeploy your infrastructure to apply the changes:

cdk deploy --all --require-approval never

Access Your Application

Navigate to your application URL (the Amplify app URL you retrieved earlier).

Test Google Sign-In

1. Click on "Sign In" or navigate to the login page
2. You should see a "Sign in with Google" button alongside the email/password form
3. Click the "Sign in with Google" button
4. You should be redirected to Google's authentication page
5. Sign in with your Google account
6. After authenticating, you should be redirected back to your application and logged in

Verify User Creation

After signing in with Google for the first time:

1. Check that you're successfully logged in
2. Verify that your profile information (like name and email) is correctly populated
3. Navigate to the dashboard to confirm you have access to all features

Check Cognito User Pool

Verify that the user was created in your Cognito User Pool:

1. Go to the AWS Console
2. Navigate to Amazon Cognito > User Pools
3. Select your user pool (it will have your app name as a prefix)
4. Click on "Users"
5. Verify that a user with your Google email address exists
6. Note that the user should have "Google" listed as an identity provider