Google OAuth

This page details how to add and configure Google OAuth for Authverse projects.

Install the Google Provider

Execute the following command to add the Google provider to your project:

npx authverse@latest add google

Configure Authorized Redirect URIs

Navigate to the Google Cloud Console (APIs & Services → Credentials) and configure the Authorized Redirect URIs for your OAuth 2.0 Client ID:

• Local development:
  • http://localhost:3000/api/auth/callback/google
• Production:
  • https://example.com/api/auth/callback/google

[!NOTE] If you modify your auth base path (default: /api/auth), ensure these redirect URIs are updated to match.

Environment Setup

Add the following variables to your project's .env file:

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

Replace the values with the Client ID and Client Secret obtained from the Google Cloud Console.

[!TIP] Adjust this configuration to use your preferred method for securely storing secrets in CI/CD pipelines.

Import and Use the Google Provider Component

Import the prebuilt provider component and integrate it into your UI:

import GoogleProviders from "@/components/authverse/GoogleProviders";

<GoogleProviders />;

This component renders the Google sign-in option at its location.

Notes & Troubleshooting

• Consent Screen: Ensure your OAuth consent screen is fully configured and published in the Google Cloud Console.
• Production Domain: For production environments, replace https://example.com with your authenticated domain.
• Proxies: If changing the auth callback path or deploying behind proxies, verify that the redirect URI and host settings in Google Cloud Console match your deployment configuration.