How to Integrate Google OAuth and Analytics with the Awesome-GPT-Image-2 Website

The Awesome-GPT-Image-2 website integrates Google OAuth for user authentication via Supabase and Google Analytics 4 (GA4) for server-side data tracking by storing OAuth credentials in environment variables and running a dedicated OAuth flow script to generate refresh tokens.

This guide walks you through the complete implementation found in the freestylefly/awesome-gpt-image-2 repository, covering both the authentication layer and the analytics data pipeline. You will learn how to configure the Google OAuth client, obtain a secure refresh token for GA4 access, and wire everything together through Supabase and Vercel environment variables.

Setting Up Google OAuth Credentials

Before writing any code, you must create a Google OAuth 2.0 Web Application client in the Google Cloud Console. This client handles both user sign-in through Supabase and server-to-server authentication for Analytics data.

1. Navigate to Google Cloud Console → APIs & Services → Credentials.
2. Click Create Credentials → OAuth client ID and select Web application.
3. Add http://localhost:8080/oauth2callback to the authorized redirect URIs for local development.
4. Copy the generated Client ID and Client Secret.

Store these values in your environment configuration:

GOOGLE_ANALYTICS_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_ANALYTICS_CLIENT_SECRET=your-client-secret

According to the source code in scripts/google-analytics-oauth.mjs, these variables initialize the OAuth2Client from the google-auth-library package.

Obtaining a GA4 Refresh Token

The integration requires a refresh token to query Google Analytics 4 data without user intervention. The repository provides an automated script to handle the OAuth consent flow.

Run the provided npm script:

npm run ga4:oauth

This command executes scripts/google-analytics-oauth.mjs, which performs the following actions:

• Loads environment variables from .env.local and .env.
• Constructs an OAuth2Client instance using your GOOGLE_ANALYTICS_CLIENT_ID and GOOGLE_ANALYTICS_CLIENT_SECRET.
• Generates an authorization URL with the scope https://www.googleapis.com/auth/analytics.readonly.
• Opens the Google consent screen and waits for the callback code.
• Exchanges the authorization code for a refresh token.

The script implementation looks like this:

// scripts/google-analytics-oauth.mjs
import { OAuth2Client } from 'google-auth-library';

const clientId = process.env.GOOGLE_ANALYTICS_CLIENT_ID;
const clientSecret = process.env.GOOGLE_ANALYTICS_CLIENT_SECRET;
const redirectUri = process.env.GOOGLE_ANALYTICS_REDIRECT_URI || 'http://localhost:8080/oauth2callback';

const oauth = new OAuth2Client(clientId, clientSecret, redirectUri);

const authUrl = oauth.generateAuthUrl({
  access_type: 'offline',
  prompt: 'consent',
  scope: ['https://www.googleapis.com/auth/analytics.readonly'],
});

console.log('Open this URL →', authUrl);

After authenticating, the script prints a refresh token. Copy this value into your Vercel environment variables as GOOGLE_ANALYTICS_REFRESH_TOKEN. This token grants the application offline access to GA4 data.

Enabling Google Sign-In with Supabase

The Awesome-GPT-Image-2 website uses Supabase Auth to handle Google OAuth for end-user authentication. The configuration in src/supabaseClient.js automatically picks up environment variables to enable the Google provider.

First, enable the Google provider in your Supabase Dashboard:

1. Go to Authentication → Settings → Providers.
2. Toggle the Google provider to enabled.
3. Paste the same GOOGLE_ANALYTICS_CLIENT_ID and GOOGLE_ANALYTICS_CLIENT_SECRET used for analytics.

The Supabase client initialization in src/supabaseClient.js references these environment variables:

// src/supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = supabaseUrl && supabaseAnonKey
  ? createClient(supabaseUrl, supabaseAnonKey, {
      auth: { 
        autoRefreshToken: true, 
        detectSessionInUrl: true, 
        persistSession: true 
      },
    })
  : null;

When users click "Sign in with Google," Supabase handles the OAuth redirect flow using the configured client credentials. The detectSessionInUrl option ensures the client automatically processes the OAuth callback.

Querying Google Analytics 4 Data

With the refresh token stored securely in your environment, you can instantiate a GoogleAnalyticsDataClient from the @google-analytics/data package on the server side. This allows you to fetch metrics like active users, page views, or custom events for dashboard display or usage-based billing.

Include the measurement ID and property ID in your environment:

VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX
GA4_PROPERTY_ID=123456789

Then query the API in any server-side route:

import { GoogleAnalyticsDataClient } from '@google-analytics/data';

const analytics = new GoogleAnalyticsDataClient({
  credentials: {
    client_email: process.env.GOOGLE_ANALYTICS_CLIENT_ID,
    private_key: process.env.GOOGLE_ANALYTICS_REFRESH_TOKEN,
  },
});

const [report] = await analytics.runReport({
  property: `properties/${process.env.GA4_PROPERTY_ID}`,
  dateRanges: [{ startDate: '7daysAgo', endDate: 'today' }],
  metrics: [{ name: 'activeUsers' }],
});

console.log('Active users last week:', report.metricValues?.[0]?.value);

This implementation fetches the last seven days of active user data using the offline credentials established during the OAuth flow.

Environment Variables Reference

All sensitive configuration lives in Vercel's environment variables (or .env.local for development) and never commits to the repository. The complete list of required variables includes:

• VITE_SUPABASE_URL – Your Supabase project URL.
• VITE_SUPABASE_ANON_KEY – The anonymous key for client-side Supabase operations.
• VITE_GA_MEASUREMENT_ID – The GA4 measurement ID (starts with G-).
• GA4_PROPERTY_ID – The numeric property ID from Google Analytics.
• GOOGLE_ANALYTICS_CLIENT_ID – The OAuth 2.0 Client ID from Google Cloud.
• GOOGLE_ANALYTICS_CLIENT_SECRET – The OAuth 2.0 Client Secret.
• GOOGLE_ANALYTICS_REFRESH_TOKEN – The long-lived refresh token generated by npm run ga4:oauth.

The file .env.example in the repository root provides a template for these values.

Summary

• Google OAuth setup requires creating a Web Application client in Google Cloud Console and configuring GOOGLE_ANALYTICS_CLIENT_ID and GOOGLE_ANALYTICS_CLIENT_SECRET environment variables.
• Refresh token generation is handled by scripts/google-analytics-oauth.mjs, which runs the OAuth flow offline and outputs a token for the analytics.readonly scope.
• Supabase integration uses the same OAuth credentials to enable Google sign-in, configured in src/supabaseClient.js with detectSessionInUrl enabled.
• GA4 data access requires storing VITE_GA_MEASUREMENT_ID and GA4_PROPERTY_ID, then instantiating GoogleAnalyticsDataClient with the refresh token for server-side reporting.
• Security mandates keeping all tokens and secrets in Vercel environment variables, never in the codebase.

Frequently Asked Questions

How do I obtain the Google Analytics refresh token for production?

Run npm run ga4:oauth locally after setting GOOGLE_ANALYTICS_CLIENT_ID and GOOGLE_ANALYTICS_CLIENT_SECRET in your .env.local file. The script in scripts/google-analytics-oauth.mjs generates an authentication URL, opens the consent screen, and exchanges the returned code for a refresh token. Copy the printed token into your production environment variables as GOOGLE_ANALYTICS_REFRESH_TOKEN.

Can I use the same Google OAuth credentials for both user sign-in and analytics?

Yes. The Awesome-GPT-Image-2 repository uses the same OAuth 2.0 Client ID and Secret for both Supabase Google Auth (user sign-in) and the GA4 data API (server-side analytics). You configure the client once in Google Cloud Console, then paste the credentials into both the Supabase Dashboard (Authentication → Providers) and your environment variables for the analytics script.

Which npm packages handle the Google OAuth and Analytics integration?

The implementation relies on two primary dependencies declared in package.json: google-auth-library for the OAuth 2.0 flow in scripts/google-analytics-oauth.mjs, and @google-analytics/data for querying GA4 reports server-side. Supabase authentication requires @supabase/supabase-js.

Where is the Supabase client configured to support Google sign-in?

The Supabase client is instantiated in src/supabaseClient.js using createClient from @supabase/supabase-js. It reads VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY from the environment. Google sign-in works automatically when you enable the Google provider in the Supabase Dashboard and supply the same OAuth credentials used for analytics, as Supabase handles the provider configuration independently of the client code.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}