Supabase does not append code parameter to the redirect URL after OAuth login

Question

Problem Description

I am implementing Google social login using Next.js and Supabase. The setup works until the point where the user is redirected to the callback URL after authenticating with the provider. However, the code parameter is not included in the query string of the redirect URL, which prevents me from exchanging it for a session.

Here is the relevant code for triggering the OAuth login:

const handleAuth = async (provider: 'google') => {
  try {
    setIsLoading(provider)
    const { error } = await supabase.auth.signInWithOAuth({
      provider,
      options: {
        redirectTo: 'http://localhost:3000/auth/callback',
      },
    })
    if (error) throw error
  } catch (error) {
    console.error('Error:', error)
  } finally {
    setIsLoading(null)
  }
}

In my Supabase settings, I have configured the authorized redirect URI as http://localhost:3000/auth/callback. When I debug the network requests, I observe the following flow: 1. The user is redirected to the provider’s login page (e.g., Google). 2. After login, the provider redirects to Supabase’s endpoint, which successfully generates a session. 3. Supabase redirects the user to my application but without the expected code parameter.

My Configuration

• Google OAuth Redirect URI (in Google Cloud Console): https://<supabase-project-id>.supabase.co/auth/v1/callback
• Supabase Redirect URI: http://localhost:3000/auth/callback
• Supabase Initialization:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

Environment

•   Framework: Next.js 14.2.23
•   Supabase SDK: @supabase/supabase-js v2.26.0
•   OAuth Provider: Google
•   Environment: Localhost (http://localhost:3000)

What I Expect

The redirect URL should include the code parameter so that it can be exchanged for a session in the callback handler. For example:

http://localhost:3000/auth/callback?code=<authorization_code>

What Happens

The redirect URL does not include the code parameter. Instead, the user is redirected as follows:

http://localhost:3000/auth/callback

As a result, my callback handler cannot process the session.

What I Tried

1. Verifying that the redirect URI in Supabase matches the one configured in the Google Cloud Console.
2. Confirming that Supabase correctly forwards requests between the provider and my app.
3. Debugging the /auth/callback handler to ensure it is properly extracting query parameters.
4. Using @supabase/auth-helpers-nextjs for session handling.

Questions

1. Why is the `code` parameter not included in the redirect URL?
2. Is there a configuration I am missing in Supabase or the provider settings?
3. How can I retrieve the `code` parameter properly for session exchange?

---

Callback Code

// app/auth/callback/route.ts
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get('code')

  if (code) {
    const supabase = createRouteHandlerClient({ cookies })
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (error) {
      console.error('Session exchange error:', error)
      return NextResponse.redirect(new URL('/auth/error', requestUrl.origin))
  } else {
    console.error('No authorization code found')
  }

  return NextResponse.redirect(new URL('/mypage', requestUrl.origin))
}

Answer 1

The code you have mentioned is correct to initiate a Google OAuth signin, and the redirectTo is correct. That is definitely not the problem. Can you paste what your callback code is? I suspect there is an issue with how its handling the callback on your end.

Also, @supabase/auth-helpers-nextjs is depreciated and is not recommended to be used. If you want to quickly add Supabase authentication to a Next.js project, just run npx next-mods and you can use this tool now to properly add Supabase to next.js. This uses the newer @supabase/ssr package and works flawlessly.

Hope this helps!