Sign in

"use client"
import { usePandaAuthForm } from "@pandaidx/widgets/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export const LoginCard = () => {
  const auth = usePandaAuthForm({ redirectTo: "/account" })
  if (auth.mode !== "login") return null // or render the other steps from auth.fields
  return (
    <form onSubmit={auth.submit} className="flex flex-col gap-4">
      <h2>Welcome back</h2>
      <Button type="button" variant="outline" onClick={auth.loginWithGoogle}>Continue with Google</Button>
      <p className="text-center text-sm">or</p>
      <Input type="email" placeholder="Email" {...auth.field("email")} />
      {auth.errors.email ? <p role="alert">{auth.errors.email}</p> : null}
      <Input type="password" placeholder="Password" {...auth.field("password")} />
      {auth.errors.form ? <p role="alert">{auth.errors.form}</p> : null}
      <Button type="submit" disabled={auth.pending}>Sign in</Button>
      <Button type="button" variant="ghost" onClick={auth.forgotPassword}>Forgot password?</Button>
    </form>
  )
}

<PandaSignIn title="Welcome back" modes={["login"]} parts={{ tabs: false, google: "top", divider: "or with email", forgot: "below-password", legal: "compact" }} />

"use client"
import { usePandaAuth } from "@pandaidx/widgets/client"

export const AccountLink = () => {
  const { signedIn, user, openAuth, openDrawer } = usePandaAuth()
  return signedIn ? (
    <button type="button" onClick={() => openDrawer("collections")}>{user?.name ?? "My account"}</button>
  ) : (
    <button type="button" onClick={() => openAuth("login")}>Sign in</button>
  )
}

// app/layout.tsx: <PandaProvider … open={{ auth: { mode: "page", href: "/sign-in" } }}>
// app/sign-in/page.tsx
export default async function SignIn({ searchParams }: { searchParams: Promise<{ mode?: string; redirectTo?: string }> }) {
  const { mode, redirectTo } = await searchParams
  return <PandaSignIn defaultMode={mode === "signup" ? "signup" : "login"} signedIn="redirect" redirectTo={redirectTo ?? "/"} />
}

<PandaAuthRoot redirectTo="/account" design={{ providers: "bottom", fieldVariant: "underline" }}>
  <div className="grid gap-12 md:grid-cols-2">
    <section>
      <h2>Welcome back</h2>
      <AuthWhen mode={["login", "signup"]}><AuthLogin /></AuthWhen>
      <AuthWhen mode={["forgot-password", "verify-token", "reset-password"]}><AuthStep /></AuthWhen>
    </section>
    <section><h2>New here?</h2><AuthSignup /><AuthLegal /></section>
  </div>
</PandaAuthRoot>

<PandaAuthRoot defaultMode="signup">
  <AuthWhen mode="signup"><h1>Create your account</h1></AuthWhen>
  <AuthWhen mode="login"><h1>Sign in</h1></AuthWhen>
  <AuthWhen mode={["forgot-password", "verify-token", "reset-password"]}><h1>Reset your password</h1></AuthWhen>
  <AuthStep />
  <AuthLegal />
</PandaAuthRoot>

<PandaAuthRoot design={{ providers: "none", dividerLabel: "or" }}>
  <AuthWhen mode={["login", "signup"]}>
    <AuthGoogle />
    <AuthDivider />
  </AuthWhen>
  <AuthStep />
  <AuthLegal />
</PandaAuthRoot>