InstantDB magic code login in React

Use it in Next.js

app/login/page.tsx

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { StepUpGate } from "@/components/StepUpGate";
import { db } from "@/lib/db";

type InstantError = { body?: { message?: string } };

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [codeSent, setCodeSent] = useState(false);
  const [error, setError] = useState("");

  async function sendCode() {
    setError("");
    try {
      await db.auth.sendMagicCode({ email });
      setCodeSent(true);
    } catch (err) {
      setError((err as InstantError).body?.message ?? "Couldn't send the code. Try again.");
    }
  }

  if (codeSent) {
    return (
      <StepUpGate
        title="Check your email"
        description={`Enter the 6-digit code we sent to ${email}.`}
        successTitle="You're in"
        successDescription="Opening your app."
        onVerify={async (code) => {
          try {
            await db.auth.signInWithMagicCode({ email, code });
            return true;
          } catch {
            return false; // wrong or expired code: the cells shake and the user types again
          }
        }}
        onResend={() => void db.auth.sendMagicCode({ email })}
        onCancel={() => setCodeSent(false)}
        onVerified={() => router.push("/app")}
      >
        {/* whatever should sit blurred behind the code card */}
        <div className="grid min-h-dvh place-items-center bg-[#0b0c10] text-white/40">Your app</div>
      </StepUpGate>
    );
  }

  return (
    <main className="grid min-h-dvh place-items-center bg-[#0b0c10] text-white">
      <form
        onSubmit={(e) => {
          e.preventDefault();
          void sendCode();
        }}
        className="grid w-80 gap-3"
      >
        <label htmlFor="email" className="text-sm text-white/70">Email</label>
        <input id="email" type="email" autoComplete="email" required value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="rounded-lg bg-white/10 px-3 py-2 outline-none focus:ring-2 focus:ring-[#C6F432]" />
        <button className="rounded-lg bg-[#C6F432] px-3 py-2 font-medium text-black">Email me a code</button>
        {error ? <p role="alert" className="text-sm text-red-400">{error}</p> : null}
      </form>
    </main>
  );
}

import { init } from "@instantdb/react";

export const db = init({ appId: process.env.NEXT_PUBLIC_INSTANT_APP_ID! });