A Clerk Elements alternative for Core 3

Use it in Next.js

app/sign-in/page.tsx

"use client";
// Before: <SignIn.Root> and <SignUp.Root> from @clerk/elements, each with its own
// steps, <Clerk.Field> inputs and <Clerk.Connection> buttons. Now: one card, two hooks.
import { useRef, useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import { useSignIn, useSignUp } from "@clerk/nextjs";
import GatewayDive from "@/components/gateway-dive/GatewayDive";

type Step = "verify-email" | "new-device";
type Err = { message: string; longMessage?: string } | null;
const say = (e: Err) => e?.longMessage ?? e?.message ?? "That didn't work. Try again.";

export default function AuthPage() {
  const router = useRouter();
  const { signIn } = useSignIn();
  const { signUp } = useSignUp();
  const pending = useRef<Step | null>(null);
  const target = useRef("/dashboard");
  const [step, setStep] = useState<Step | null>(null);
  const [code, setCode] = useState("");
  const [note, setNote] = useState("");

  const go = (url: string) => {
    if (url.startsWith("http")) window.location.href = url;
    else router.push(url);
  };
  const toApp = ({ decorateUrl }: { decorateUrl: (to: string) => string }) => go(decorateUrl("/dashboard"));

  async function submitCode(e: FormEvent) {
    e.preventDefault();
    const flow = step === "verify-email" ? signUp : signIn;
    const { error } =
      step === "verify-email"
        ? await signUp.verifications.verifyEmailCode({ code: code.trim() })
        : await signIn.mfa.verifyEmailCode({ code: code.trim() });
    if (error) return setNote(say(error));
    if (flow.status !== "complete") return setNote("Clerk wants one more step for this account.");
    await flow.finalize({ navigate: toApp });
  }

  if (step) {
    // Elements: <SignUp.Step name="verifications"> with <SignUp.Strategy name="email_code">
    return (
      <main className="grid min-h-dvh place-items-center bg-neutral-950 p-6 text-white">
        <form onSubmit={submitCode} className="w-full max-w-sm space-y-4">
          <h1 className="text-xl font-semibold">Check your email</h1>
          <p className="text-sm text-neutral-400">
            {step === "verify-email" ? "Type the code Clerk sent to confirm your address." : "New device. Type the code Clerk just emailed you."}
          </p>
          <input
            value={code}
            onChange={(e) => setCode(e.target.value)}
            inputMode="numeric"
            autoComplete="one-time-code"
            aria-label="Verification code"
            className="w-full rounded-lg bg-neutral-900 px-3 py-2 tracking-widest"
          />
          {note ? <p role="alert" className="text-sm text-red-400">{note}</p> : null}
          <button className="w-full rounded-lg bg-white py-2 font-medium text-black">Verify</button>
        </form>
      </main>
    );
  }

  return (
    <main style={{ height: "100dvh" }}>
      <GatewayDive
        autoplayDemo={false}
        brand="Acme"
        providers={[{ id: "google", label: "Google" }, { id: "github", label: "GitHub" }]}
        // Elements: <Clerk.Connection name="google">
        onProvider={(id) =>
          void signIn.sso({
            strategy: id === "github" ? "oauth_github" : "oauth_google",
            redirectCallbackUrl: "/sso-callback",
            redirectUrl: "/dashboard",
          })
        }
        onSubmit={async ({ mode, name, email, password }) => {
          pending.current = null;
          if (mode === "signup") {
            const { error } = await signUp.password({ emailAddress: email, password, firstName: name });
            if (error) return { ok: false, error: say(error) };
            const sent = await signUp.verifications.sendEmailCode();
            if (sent.error) return { ok: false, error: say(sent.error) };
            pending.current = "verify-email";
            return { ok: true };
          }

          const { error } = await signIn.password({ emailAddress: email, password });
          if (error) return { ok: false, error: say(error) };
          if (signIn.status === "needs_client_trust") {
            // Device Trust is on by default: a new device gets an email code
            const sent = await signIn.mfa.sendEmailCode();
            if (sent.error) return { ok: false, error: say(sent.error) };
            pending.current = "new-device";
            return { ok: true };
          }
          if (signIn.status !== "complete") {
            // needs_second_factor (TOTP, SMS, backup codes) needs a screen of its own
            return { ok: false, error: "This account uses two-step sign-in, which this page doesn't handle yet." };
          }
          await signIn.finalize({
            navigate: ({ decorateUrl }) => {
              target.current = decorateUrl("/dashboard"); // route after the dive instead of now
            },
          });
          return { ok: true };
        }}
        onSuccess={() => {
          if (pending.current) setStep(pending.current);
          else setTimeout(() => go(target.current), 1400);
        }}
      />
      {/* Needed for sign-up when the app still uses Clerk's legacy bot protection */}
      <div id="clerk-captcha" />
    </main>
  );
}

"use client";
import { HandleSSOCallback } from "@clerk/nextjs";
import { useRouter } from "next/navigation";

// Elements did this inside SignIn.Root. With the hooks it's its own route.
export default function SSOCallback() {
  const router = useRouter();
  return (
    <HandleSSOCallback
      navigateToApp={({ decorateUrl }) => {
        const url = decorateUrl("/dashboard");
        if (url.startsWith("http")) window.location.href = url;
        else router.push(url);
      }}
      navigateToSignIn={() => router.push("/sign-in")}
      navigateToSignUp={() => router.push("/sign-in")}
    />
  );
}