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

> Learn to integrate Google OAuth and GA4 analytics with Awesome-GPT-Image-2. Secure user authentication with Supabase and track server-side data effectively. Get started now!

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-09-11

---

**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:

```text
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:

```bash
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:

```javascript
// 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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) references these environment variables:

```javascript
// 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:

```text
VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX
GA4_PROPERTY_ID=123456789

```

Then query the API in any server-side route:

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.