Adding OAuth providers (Google, GitHub) to v0 a...

TL;DR

Adding OAuth providers like Google or GitHub to a V0 Next.js app requires configuring NextAuth.js (or Auth.js) with provider credentials stored in the Vars panel, creating an API route handler at app/api/auth/[...nextauth]/route.ts, and setting the correct callback URL. The most common failure is a redirect_uri_mismatch error caused by the callback URL in your OAuth provider console not matching your V0 deployment domain.

Why OAuth setup fails in V0 apps

V0 generates authentication UI quickly but does not automatically configure the backend OAuth flow. OAuth requires exact URL matching between your provider console (Google Cloud, GitHub Settings) and your application's callback endpoint. V0 projects have multiple URLs — the preview sandbox URL, the production Vercel URL, and potentially a custom domain — and each needs its own callback entry. Missed entries cause the infamous redirect_uri_mismatch error that blocks the entire login flow.

Callback URL in the OAuth provider console does not match the V0 deployment URL
Environment variables (client ID, client secret) not set in the Vars panel
Missing NEXTAUTH_URL environment variable causing Auth.js to generate incorrect callback paths
V0 preview URL differs from production URL — both need separate OAuth callback entries
Using the deprecated pages/ directory pattern instead of App Router route handlers

Error messages you might see

Error 400: redirect_uri_mismatch. The redirect URI in the request does not match the ones authorized for the OAuth client.

The callback URL registered in Google Cloud Console or GitHub OAuth App settings does not match your app's actual callback URL. You need to add the exact URL including the /api/auth/callback/google path.

[next-auth][error][OAUTH_CALLBACK_ERROR] - Error: Callback URL mismatch

NextAuth.js received a callback at a URL that does not match NEXTAUTH_URL. Set this variable in the Vars panel to your deployment's root URL.

TypeError: Cannot read properties of undefined (reading 'clientId')

The OAuth provider credentials are not available at runtime. The environment variables GOOGLE_CLIENT_ID or GITHUB_CLIENT_ID are not set in the Vars panel.

Error: This action with GET /api/auth/signin could not be found

The NextAuth.js route handler file is missing or placed in the wrong directory. It must be at app/api/auth/[...nextauth]/route.ts for App Router.

Before you start

A V0 project with a login page or authentication requirement
A Google Cloud Console project with OAuth 2.0 credentials or a GitHub OAuth App
Access to the Vars panel in V0 to store secrets

How to fix it

Create OAuth credentials in the provider console

OAuth requires registered client credentials that identify your application to the provider. Without these, the provider rejects authentication requests.

Create OAuth credentials in the provider console

OAuth requires registered client credentials that identify your application to the provider. Without these, the provider rejects authentication requests.

For Google: Go to Google Cloud Console, create OAuth 2.0 credentials, set the authorized redirect URI to https://your-v0-project.vercel.app/api/auth/callback/google. For GitHub: Go to Settings, Developer Settings, OAuth Apps, create a new app with callback URL https://your-v0-project.vercel.app/api/auth/callback/github.

Expected result: You have a Client ID and Client Secret for your chosen provider, with the correct callback URL registered.

Store credentials in the V0 Vars panel

Secrets like client IDs and secrets must never be hard-coded in source files. The Vars panel encrypts them and makes them available as environment variables at runtime.

Store credentials in the V0 Vars panel

Secrets like client IDs and secrets must never be hard-coded in source files. The Vars panel encrypts them and makes them available as environment variables at runtime.

Open the Vars panel in V0. Add the following variables: GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET (for Google) or GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET (for GitHub). Also add NEXTAUTH_URL set to your deployment URL and NEXTAUTH_SECRET set to a random 32-character string.

Before

typescript

// WRONG — hard-coded credentials in source
const googleProvider = GoogleProvider({
  clientId: 'abc123.apps.googleusercontent.com',
  clientSecret: 'GOCSPX-secret-here',
});

After

typescript

// CORRECT — credentials from environment variables
const googleProvider = GoogleProvider({
  clientId: process.env.GOOGLE_CLIENT_ID!,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
});

Expected result: Environment variables appear in the Vars panel and are accessible via process.env in your application code.

Create the NextAuth.js route handler

Next.js App Router uses route handlers instead of API routes in the pages/ directory. The catch-all route at app/api/auth/[...nextauth]/route.ts handles all auth endpoints.

Create the NextAuth.js route handler

Next.js App Router uses route handlers instead of API routes in the pages/ directory. The catch-all route at app/api/auth/[...nextauth]/route.ts handles all auth endpoints.

Create the auth configuration file and the route handler. Install next-auth if not already present in your V0 project.

Before

typescript

// pages/api/auth/[...nextauth].ts — WRONG (pages directory pattern)
import NextAuth from 'next-auth';
export default NextAuth({ providers: [] });

After

typescript

// app/api/auth/[...nextauth]/route.ts — CORRECT (App Router)
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import GitHubProvider from 'next-auth/providers/github';
const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});
export { handler as GET, handler as POST };

Expected result: Visiting /api/auth/signin shows the NextAuth.js sign-in page with Google and GitHub buttons.

Wrap the application with SessionProvider

NextAuth.js requires a SessionProvider to make session data available throughout your component tree. In App Router, this must be a client component wrapping the children in layout.tsx.

Wrap the application with SessionProvider

NextAuth.js requires a SessionProvider to make session data available throughout your component tree. In App Router, this must be a client component wrapping the children in layout.tsx.

Create a providers component and add it to your root layout. The SessionProvider must be a client component.

Before

typescript

// app/layout.tsx — missing session provider
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

After

typescript

// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';
export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}
// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Expected result: useSession() hook works in any client component throughout the application.

Add callback URLs for both preview and production domains

V0 preview and production have different URLs. The OAuth provider must allow callbacks from both, or login will fail in one environment.

Add callback URLs for both preview and production domains

V0 preview and production have different URLs. The OAuth provider must allow callbacks from both, or login will fail in one environment.

In your OAuth provider console, add both your V0 preview URL and your Vercel production URL as authorized redirect URIs. For complex setups with multiple environments, consider using RapidDev to manage OAuth configuration across staging and production.

Expected result: OAuth login works in both V0 preview and the deployed Vercel production URL.

Complete code example

app/api/auth/[...nextauth]/route.ts

1import NextAuth from 'next-auth';
2import GoogleProvider from 'next-auth/providers/google';
3import GitHubProvider from 'next-auth/providers/github';
4
5const handler = NextAuth({
6  providers: [
7    GoogleProvider({
8      clientId: process.env.GOOGLE_CLIENT_ID!,
9      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
10    }),
11    GitHubProvider({
12      clientId: process.env.GITHUB_CLIENT_ID!,
13      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
14    }),
15  ],
16  secret: process.env.NEXTAUTH_SECRET,
17  pages: {
18    signIn: '/auth/signin',
19    error: '/auth/error',
20  },
21  callbacks: {
22    async session({ session, token }) {
23      if (session.user) {
24        session.user.id = token.sub as string;
25      }
26      return session;
27    },
28    async redirect({ url, baseUrl }) {
29      if (url.startsWith('/')) return `${baseUrl}${url}`;
30      if (new URL(url).origin === baseUrl) return url;
31      return baseUrl;
32    },
33  },
34});
35
36export { handler as GET, handler as POST };

Best practices to prevent this

Always store OAuth credentials in the Vars panel — never commit client secrets to source code
Set NEXTAUTH_URL to your production domain in the Vars panel to prevent callback URL mismatches
Generate NEXTAUTH_SECRET with a cryptographically random string (at least 32 characters)
Register callback URLs for every environment: V0 preview, Vercel preview, and production
Use the App Router route handler pattern (app/api/auth/[...nextauth]/route.ts) not the pages/ pattern
Wrap your root layout with a client-side SessionProvider component
Test OAuth flow in an incognito window to avoid cached session conflicts
Add error handling pages at /auth/error to show user-friendly messages for OAuth failures

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

ChatGPT Prompt

I am building a Next.js App Router app in V0 and need to add Google and GitHub OAuth login using NextAuth.js. Walk me through the complete setup including the route handler, SessionProvider, environment variables, and callback URLs I need to register.

Frequently asked questions

Where do I set OAuth environment variables in V0?

Open the Vars panel in the V0 editor. Add GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, NEXTAUTH_URL, and NEXTAUTH_SECRET. These are encrypted and available as process.env variables at runtime.

Why do I get redirect_uri_mismatch when logging in with Google?

The callback URL registered in Google Cloud Console does not match your application's actual URL. Add https://your-domain.vercel.app/api/auth/callback/google as an authorized redirect URI. Include entries for both your preview and production URLs.

Can I use OAuth with V0's preview environment?

Yes, but you must add the V0 preview URL as an authorized redirect URI in your OAuth provider console. The preview URL differs from your production Vercel URL, so both need separate entries.

Should I use NextAuth.js or Supabase Auth for OAuth in V0?

NextAuth.js gives you full control over the auth flow within your Next.js app. Supabase Auth is simpler to configure if you are already using Supabase for your database. V0's Connect panel has built-in Supabase integration, which makes Supabase Auth the faster setup option.

How do I protect pages behind authentication in V0?

Use Next.js middleware at middleware.ts to check for a valid session and redirect unauthenticated users to the sign-in page. For individual components, use the useSession() hook from next-auth/react to conditionally render content.

Why does useSession return null in my Server Component?

useSession is a client-side hook. In Server Components, use getServerSession() from next-auth instead. Import your auth options and call it directly in the server component or in a server action.

Talk to an Expert

Our team has built 600+ apps. Get personalized help with your issue.

Book a free consultation

Adding OAuth providers (Google, GitHub) to v0 apps

Why OAuth setup fails in V0 apps

Error messages you might see

Before you start

How to fix it

Create OAuth credentials in the provider console

Create OAuth credentials in the provider console

Store credentials in the V0 Vars panel

Store credentials in the V0 Vars panel

Create the NextAuth.js route handler

Create the NextAuth.js route handler

Wrap the application with SessionProvider

Wrap the application with SessionProvider

Add callback URLs for both preview and production domains

Add callback URLs for both preview and production domains

Complete code example

Best practices to prevent this

Still stuck?

Frequently asked questions

Talk to an Expert

Need help with your Lovable project?

We put the rapid in RapidDev

Adding OAuth providers (Google, GitHub) to v0 apps

Why OAuth setup fails in V0 apps

Error messages you might see

Before you start

How to fix it

Create OAuth credentials in the provider console

Create OAuth credentials in the provider console

Store credentials in the V0 Vars panel

Store credentials in the V0 Vars panel

Create the NextAuth.js route handler

Create the NextAuth.js route handler

Wrap the application with SessionProvider

Wrap the application with SessionProvider

Add callback URLs for both preview and production domains

Add callback URLs for both preview and production domains

Complete code example

Best practices to prevent this

Still stuck?

Related error patterns

Fixing token expiration issues in v0 auth flows

Integrating Firebase or Supabase authentication with v0

Resolving redirect issues in v0 authentication flows

Explore related guides

Frequently asked questions

Talk to an Expert

Need help with your Lovable project?

We put the rapid in RapidDev