Next.js Discord

Discord Forum

How to resolve - Event handlers cannot be passed to Client Component props

Unanswered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
I'm starting with the sign-in page. I want to have a form for an email/password for signing-in in, but also a continue with Google button.

The login functionality is already working with the sign-in button acting as a submit button for the form and it works as expected. I tried creating another button under the sign-in for continuing with Google, but I can't use the onClick event handler since that is client code. The form submission works fine while the page is server-side so I'm wondering if there is something I am missing?

Most places I searched, just tell me to extract the client code, and make it a client component, but I'm wondering if there is a way to keep that on the server?

Here are a few things I looked into:
https://codechronicle.medium.com/how-to-resolve-error-event-handlers-cannot-be-passed-to-client-component-props-in-next-js-6af00d882fa0
https://stackoverflow.com/questions/74471642/nextjs-13-button-onclick-event-handlers-cannot-be-passed-to-client-componen
https://brainly.com/question/43022814

Maybe I'm just being silly and this just needs to be a client component, but I have a feeling that isn't needed... I could be totally wrong though!

12 Replies

West African LionOP
This solution works, but is it the right approach?
"use client"

import { createClient } from '@/utils/supabase/client';
import { Button } from 'flowbite-react'
import { redirect } from 'next/navigation';
import React from 'react'

const GoogleLoginButton = () => {

    const GoogleSignInAction = async () => {
        const supabase = createClient();
        const { data, error } = await supabase.auth.signInWithOAuth({
            provider: "google",
            options: {
                redirectTo: 'http://localhost:3000/auth/callback'
            },
        })

        if (data.url) {
            redirect(data.url) // use the redirect API for your server framework
        }
    }

    return (
        <Button onClick={GoogleSignInAction}>
            Signin with Google
        </Button>
    )
}

export default GoogleLoginButton
Tonkinese
I wouldn't even have the api call in the button
Have a simple button that has a onClick callback

'use client';

import { Button } from 'flowbite-react';
import React from 'react';

const Button = (onClick: any, ctaText: string) => {
  return <Button onClick={onClick}>{ctaText} </Button>;
};

export default GoogleLoginButton;
Then place this in a module, server- side and invoke it 


'use-server'

import { redirect } from 'next/navigation';
import { createClient } from '@/utils/supabase/client';


const GoogleSignInAction = async () => {
  const supabase = createClient();
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: 'http://localhost:3000/auth/callback',
    },
  });

  if (data.url) {
    redirect(data.url); // use the redirect API for your server framework
  }
};
either u do it via server actions or route handlers
Tonkinese
Yeah I meant a server action
u can programmatically invoke server actions on the client and send additional information even without using form elements
with that u can hide your actual 0Auth logic and other in your server action
but that will ofc prompt u into clientside rendering for your buttons
West African LionOP
I'm sorry I missed the response! Thanks, I'll look into it!