npx create-scute-app

pnpm add @scute/js-core @scute/react-hooks @scute/auth-ui-react @scute/nextjs-handlers

# .env.local
NEXT_PUBLIC_SCUTE_APP_ID=your-app-id
NEXT_PUBLIC_SCUTE_BASE_URL=https://api.scute.io
SCUTE_SECRET=your-app-secret

import { ScuteAuthGate } from "@scute/auth-ui-react";

<ScuteAuthGate>
  <App />
</ScuteAuthGate>

import { useScuteAuthFlow } from "@scute/auth-ui-react";

function Auth() {
  const auth = useScuteAuthFlow();

  if (auth.isAuthenticated) return <App />;

  if (auth.view === "login") {
    return (
      <form onSubmit={(e) => { e.preventDefault(); auth.submitIdentifier(); }}>
        <input
          value={auth.identifier}
          onChange={(e) => auth.setIdentifier(e.target.value)}
          placeholder="you@example.com"
        />
        <button>{auth.submitting ? "..." : "Continue"}</button>
      </form>
    );
  }

  if (auth.view === "magic_pending") {
    return <p>Check your email: {auth.identifier}</p>;
  }

  if (auth.view === "webauthn_register") {
    return (
      <div>
        <p>Register a passkey?</p>
        <button onClick={auth.registerPasskey}>Register</button>
        <button onClick={auth.skipPasskey}>Skip</button>
      </div>
    );
  }

  return <p>Loading...</p>;
}

[data-scute-view="login"] { }
[data-scute-view="webauthn_register"] { }
[data-scute-input] { }
[data-scute-button="primary"] { }
[data-scute-error] { }