Custom Clerk sign-in page

Use it in Next.js

app/sign-in/[[...sign-in]]/page.tsx

"use client";
import { useRouter } from "next/navigation";
import { useSignIn } from "@clerk/nextjs";
import SpotlightLampLogin from "@/components/SpotlightLampLogin";

export default function SignInPage() {
  const router = useRouter();
  const { signIn } = useSignIn();

  return (
    <div className="h-dvh">
      <SpotlightLampLogin
        autoplayDemo={false}
        onSignIn={async (email, password) => {
          const { error } = await signIn.password({ emailAddress: email, password });
          if (error) return { ok: false, message: error.longMessage ?? error.message };

          if (signIn.status !== "complete") {
            // needs_second_factor or needs_client_trust: send these users to your code step.
            return { ok: false, message: "This account needs a verification code to finish signing in." };
          }

          await signIn.finalize({
            navigate: ({ decorateUrl }) => {
              const url = decorateUrl("/dashboard");
              if (url.startsWith("http")) window.location.href = url;
              else router.push(url);
            },
          });
          return { ok: true };
        }}
      />
    </div>
  );
}