Next.js Adding Port 80 to redirect URL after Google Aunthetication

Question

I'm creating a web app using Nextjs 14 with a Supabase backend. However, after successful authentication, there's port 80 being appended on my URL which causes an error to be thrown.

The URL after authentication looks like so:

https://production-url.com:80/?code=randomcode

This leads Chrome to throw an error:

This site can’t provide a secure connection

production-url.com sent an invalid response.

ERR_SSL_PROTOCOL_ERROR

However, everything works fine in my local development environment. The web app is deployed on Netlify.

I've tried manually replacing 80 with 443 in the url and the flow proceeds without an error.

How can I address this?

Important files:

middleware.ts:

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();

  // Create a Supabase client configured to use cookies
  const supabase = createMiddlewareClient({ req, res });

  // Refresh session if expired - required for Server Components
  await supabase.auth.getSession();

  return res;
}

Aunthetication logic:

  const [session, setSession] = useState("");

  const supabase = createClientComponentClient();
  const router = useRouter();

  useEffect(() => {
    const getSession = async () => {
      const { data } = await supabase.auth.getSession();
      setSession(data.session);
    };
    getSession();
  }, []);

  const handleGoogleAuthLogin = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: `${location.origin}/auth/callback`,
      },
    });
  };

  const handleGoogleAuthLogout = async () => {
    const { error } = await supabase.auth.signOut();
    // refresh page after user logout
    router.refresh();
    setSession("");
    // redirect user to the home page
    router.push("/");
  };

auth/callback:

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";
import { cookies } from "next/headers";
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";

export async function GET(request: NextRequest) {
  const requestUrl = new URL(request.url);
  const code = requestUrl.searchParams.get("code");

  if (code) {
    const supabase = createRouteHandlerClient({ cookies });
    await supabase.auth.exchangeCodeForSession(code);

    console.log("Url origin ==>", requestUrl.origin);

    return NextResponse.redirect(requestUrl.origin);
    // redirect user to the page they were before login
    // return NextResponse.redirect(new URL("/dashboard", requestUrl.origin));
    // redirects user to the dashboard page after login
    // return NextResponse.redirect(new URL("/dashboard", requestUrl));
  }
}

In supabase, Site URL is set to https://production-url.com

Redirect URLs:

http://localhost:3000/**

https://--my_org.netlify.app/

https://production-url.com/

Next.js Adding Port 80 to redirect URL after Google Aunthetication

Answers (1)

Related Questions