supabase / auth-helpers

A collection of framework specific Auth utilities for working with Supabase.
https://supabase.github.io/auth-helpers/
MIT License
908 stars 232 forks source link

Google OAuth Login Fails with "Invalid Flow State" on Production Server #806

Closed layonelLeal closed 2 months ago

layonelLeal commented 2 months ago

Bug Report: Google OAuth Login Fails with "Invalid Flow State" on Production Server

Describe the Bug

I'm encountering an issue with Google OAuth login on my production server (Ubuntu). When users attempt to sign in, the process fails with the following error:

This issue only occurs in production. In my local development environment, everything works fine, including when using a custom tunneling URL (e.g., DevTunnels). I suspect the issue might be related to how the production server handles OAuth redirections or Supabase's flow state management.

Steps to Reproduce

  1. Set up Google OAuth with Supabase, using the following configuration:
    • access_type: "offline"
    • prompt: "consent"
    • Redirect URL: /auth/callback
  2. Deploy the app to an Ubuntu server.
  3. Attempt to log in with Google.
  4. The error occurs during the process of exchanging the authorization code for a session.

Code Example

Google login handler:

const handleGoogleLogin = async () => {
  const supabase = await createClient();
  const response = await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
      queryParams: {
        access_type: "offline",
        prompt: "consent",
      },
    },
  });
};

OAuth Callback API (/auth/callback)

import { NextResponse } from "next/server";
import { createClient } from "@/utils/supabase/server";

export async function GET(request) {
  const { searchParams, origin } = new URL(request.url);
  const code = searchParams.get("code");
  const next = searchParams.get("next") ?? "/";

  if (code) {
    const supabase = createClient();
    const { error } = await supabase.auth.exchangeCodeForSession(code);
    if (!error) {
      const forwardedHost = request.headers.get("x-forwarded-host"); 
      const isLocalEnv = process.env.NODE_ENV === "development";
      if (isLocalEnv) {
        return NextResponse.redirect(`${origin}${next}`);
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`);
      } else {
        return NextResponse.redirect(`${origin}${next}`);
      }
    }
  }

  return NextResponse.redirect(`${origin}/auth/auth-code-error`);
}

Expected Behavior

Users should be able to log in with Google OAuth on the production server, just like in the local development environment. The OAuth flow should correctly exchange the authorization code for a session without throwing the flow_state_not_found error.

Additional Context

The redirection settings in Supabase are correctly configured. The issue does not occur locally, only on the production server. I suspect the problem may be related to how OAuth states are managed on the server or how headers are being forwarded during redirection.

layonelLeal commented 2 months ago

el problema se debe al límite de memoria para los headers que no permitió que toda la información se suministrase correctamente