So

where is Signout function being used?

in the guestbook page:

So GuestBook is a server component right

guestbook/page.tsx is

the button is a client component

and the function the button is connected to is also a client componenet

No, its not a client component. Its just a function

If you move the <Button> to a file with "use client" only then it will be a client component

thats how it is

allright so there you go

I'm confused, the button is part of a client component, and the onClick function is also part of the same client component

Yes that means you don't need to put the SIgnout inside the onClick callback

just use <Signout /> in your Guestbook page

How do I make the button trigger the fetch call if not with onClick

with the onClick you defined inside Signout

you can only use onClick in Client component

so do i have it right then?

well try it out, and tell me if it works. Im not a compiler so don't waste time asking me if it works 🤣

my bad haha

no it does not

where is Signout being used?

oh

you have to define what happen when the button is clicked.

as of now ure just referencing itself

It fires the API fetch right?

you would only want to fetch when the button is clicked right?

then don't put it outside a callback

the way you set it up right now is that the fetch will be instantly called the moment the <SignOut> component is rendered.

ok I see. can I extract it to a async function inside the same file?

like this:

jk i cannot

well

thats better

1. put the logout function inside the Signout component
2. onClick={async () => await logout()} IF just logout doesn't work
3. put useRouter() in a top-level react component, on the same level as the return() and below Signout(). Really look up the [do's and don'ts of hooks](https://react.dev/warnings/invalid-hook-call-warning)

looks like it works! thanks

theres a lucia thing where it isn't invalidating the session but that's beyond the scope of next