multiple signin buttons, signout, and credential signin.

[AaronNGray]

I am wondering do I have to use the "use server" form submit pattern :-

import { signIn } from "@/auth"
 
export default function SignIn() {
  return (
    <form
      action={async () => {
        "use server"
        await signIn("github")
      }}
    >
      <button type="submit">Signin with GitHub</button>
    </form>
  )
} 

Can I use a "use client" based pattern.

I am not fond of having to wrap multiple multiple buttons each in their separate HTML Form Element.

I am not at all familiar with the Next.js "use server" verses the "use client" which seems to be exercise in hidden templating on the server side.

I ideally want a pattern that I can use HTML Buttons to invoke OAuth providers, and also provide a credential email and password based sign in with a database adapter such as TypeORM or Pirisma.

Hope someone can enlighten me as to what is going on here and hopefully provide some sane code example pattern I may follow.

[AaronNGray]

Okay got it !

@/component/auth.tsx

import { signIn, signOut } from "@/auth"

export function SignIn({server}:{server:string}) {
  return (
    <form
      action={async () => {
        "use server"
        await signIn(server)
      }}
    >
      <button type="submit">Signin with GitHub</button>
    </form>
  )
} 
export function SignOut() {
  return (
    <form
      action={async () => {
        "use server"
        await signOut()
      }}
    >
      <button type="submit">Sign Out</button>
    </form>
  )
}

app/page.tsx

import { auth } from "@/auth"
import {SignIn, SignOut} from "@/components/auth"

export default async function Page() {
  const session = await auth()
  return (
    <div>
      <p>Welcome {session?.user?.name}!</p>
      <SignIn server={"github"} />
      <SignOut />
    </div>
  )
}

Working example code :-

https://github.com/AaronNGray/nextauth-js-5-beta-example