src/app/demo-switch/page.tsx

Linked repository file from this build.

"use client";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { useSignIn, useUser } from "@clerk/nextjs";
export default function DemoSwitchPage() {
  const { signIn } = useSignIn();
  const { isLoaded, isSignedIn } = useUser();
  const started = useRef(false);
  const [error, setError] = useState("");
  useEffect(() => {
    if (!isLoaded || !signIn || started.current) return;
    started.current = true;
    void (async () => {
      if (isSignedIn) {
        setError("Sign out before switching demo accounts.");
        return;
      }
      const ticket = sessionStorage.getItem("qccrm.demo-ticket");
      sessionStorage.removeItem("qccrm.demo-ticket");
      if (!ticket) {
        setError("The demo switch expired. Sign in to try again.");
        return;
      }
      try {
        const result = await signIn.ticket({ ticket });
        if (result.error) throw result.error;
        const done = await signIn.finalize();
        if (done.error) throw done.error;
        window.location.assign("/dashboard");
      } catch {
        setError("Unable to complete the demo switch. Sign in to try again.");
      }
    })();
  }, [isLoaded, isSignedIn, signIn]);
  return (
    <main className="mx-auto max-w-md space-y-4 p-8">
      <h1 className="text-xl font-semibold">Switch demo account</h1>
      <p role={error ? "alert" : "status"}>{error || "Signing in…"}</p>
      {error && (
        <Link className="underline" href="/sign-in">
          Sign in
        </Link>
      )}
    </main>
  );
}