I was trying to add a button that runs a function that handles oauth login with supabase :

Button:

<div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
   <button onClick={() => LoginWithAuth("google")}>Google!</button>
</div>

To use this I had to add "use client"; for it to render the page

LoginWithAuth function:

export const loginWithOauth = async (provider: "google" | "discord") => {
  const supabase = await createClient();

  supabase.auth.signInWithOAuth({
    provider,
  })
  return redirect("/protected");
}

with the way createClient() works, I am having to use async and await. but when I try to use the async function it just tells me:
async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding'use client'to a module that was originally written for the server.

I am new to next js. I was looking for some documentation on how this can be achieved and what are the best practices failed to find some (don't know what I was supposed to look for). redirecting to some documentation will be helpful.

Thanks in advance! (: