Next.js Discord

Discord Forum

Failed to fetch RSC payload on redirect

Unanswered
! AlexNotTheLion posted this in #help-forum
Open in Discord
! AlexNotTheLionOP
I'm setting up supabase auth and have setup a simple login with google, it works perfectly fine on chrome and opera but not on firefox, this is the simple login button 
'use client'
import { Button } from '@/components/ui/button'

import { createClient } from '@/utils/supabase/client'

export default function LoginButton() {
    const supabase = createClient();

    const handleGoogleLogin = async () => {
        await supabase.auth.signInWithOAuth({
            provider: 'google',
            options: {
                redirectTo: `${location.origin}/auth/callback?next=/private`,
            },
        })
    }

    return (
        <Button onClick={handleGoogleLogin}>Login</Button>
    )
}
and attached is a video of the two brower flows site by side, left is chrome, right is firefox both cleared browers, no cookies or cache

6 Replies

American Crow
Well what's in the console and network tab for firefox any errors when clicking login?
! AlexNotTheLionOP
joulev
Please do not repost, I will delete the other post
Argente Brun
Hello friends. I found out that its easier to just turn your route into a client-side redirect after you set your cookies.

Here is an example:

(using Next 15.0.1)

import { cookies } from "next/headers";
import { generateState } from "arctic";
import { discord } from "@/lib/auth";
import { env } from "@/env";

export async function GET(): Promise<Response> {
  const sessionCookies = await cookies();
  const state = generateState();
  const url = discord.createAuthorizationURL(state, [
    "identify",
    "email"
  ]);

  sessionCookies.set("discord_oauth_state", state, {
    path: "/",
    secure: env.NODE_ENV === "production",
    httpOnly: true,
    maxAge: 60 * 10,
    sameSite: "lax",
  });

  // Return HTML that performs the redirect
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="refresh" content="0;url=${url.toString()}">
      </head>
    </html>
  `;

  return new Response(html, {
    headers: {
      "Content-Type": "text/html",
    },
  });
}


Hope this helps.
Another solution is to create a promise on your API route, and have your link/button wait for that promise then redirect.
  const handleDiscordLogin = async () => {
    setIsDiscordLoading(true);
    try {
      const response = await fetch('/login/discord');
      const data = await response.json();
      router.push(data.url);
    } catch (error) {
      setIsDiscordLoading(false);
    }
  };

Example promise and response I have set.