Next.js Discord

Discord Forum

Error: Only plain objects, and a few built-ins, can be passed to Client Components

Unanswered
American Pipit posted this in #help-forum
Open in Discord
American PipitOP
I have an issue during supabase auth, this is thrown from a server action on line: return NextResponse.redirect(data.url).
I call the server action from a server component, and the server action redirects to a route /auth/callback. The app never makes it to that route, because this error is being thrown on function return. This is the whole server action: 
export const signUpWithGoogle = async () => {
    'use server';
    const cookieStore = cookies();

    const serverSupabase = createServerClient<Database>(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                get(name: string) {
                    return cookieStore.get(name)?.value;
                },
                set(name: string, value: string, options: CookieOptions) {
                    cookieStore.set({ name, value, ...options });
                },
                remove(name: string, options: CookieOptions) {
                    cookieStore.delete({ name, ...options });
                },
            },
        }
    );

    const { data } = await serverSupabase.auth.signInWithOAuth({
        provider: 'google',
    });

    if (!data.url) {
        throw new Error('No URL returned from Supabase');
    }

    return NextResponse.redirect(`${data.url}`);
};

15 Replies

American PipitOP
this is the data type: 
{
url: string,
provider: string
}
American PipitOP
I tried return NextResponse.redirect(JSON.parse(JSON.stringify(data.url)));
same error
Ray
can you show the code how to call this function?
@Ray can you show the code how to call this function?
American PipitOP
            <form
                className='flex-1 flex flex-col w-full justify-center gap-2 text-foreground'
                action={signUpWithGoogle}
            >
                <Button
                    type='submit'
                    className='bg-green-700 rounded px-4 py-2 text-white mb-2'
                >
                    Sign In With Google
                </Button>
            </form>
the actual component is a page
Ray
use redirect from 'next/navigation' instead of NextResponse.redirect(${data.url});
NextResponse should be used in route handler
American PipitOP
oh
I see
American PipitOP
I know about the function, I was just looking at some answers at stackoverflow and forgot about that
I have another problem now, but I guess it's regarding supabase
the google auth ends up in a loop when I select an account
and never finishes