Change Password

import "@picocss/pico";
import { useState } from "react";
import { PrldSessionClient, PrldErrors } from "@prelude.so/js-sdk";

const client = new PrldSessionClient({ domain: `${import.meta.env.VITE_APP_ID}.session.prelude.dev` });

export default function App() {
  const [view, setView] = useState("login"); // login | logged | stepup-otp | new-password | done
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [otpCode, setOtpCode] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [challengeId, setChallengeId] = useState(null);
  const [error, setError] = useState(null);

  // ── Login ──────────────────────────────────────────────────

  const handleLogin = async (e) => {
    e.preventDefault();
    setError(null);
    try {
      await client.loginWithPassword({
        identifier: email,
        password,
      });
      await client.refresh();
      setView("logged");
    } catch (err) {
      setError(err.message);
    }
  };

  // ── Step-up for prld:pwd:write ─────────────────────────────

  const handleChallenge = (info) => {
    setChallengeId(info.challengeId);
    if (info.currentStep === "completed") {
      // Scope granted — session already refreshed by the SDK.
      setView("new-password");
    } else if (info.currentStep === "verify_email" || info.currentStep === "verify_sms") {
      setView("stepup-otp");
      client.startOTP({ challengeId: info.challengeId });
    }
  };

  const handleStartChangePassword = async () => {
    setError(null);
    try {
      const { status } = await client.requestStepUp({
        scope: "prld:pwd:write",
        onChallenge: handleChallenge,
      });
      if (status === "block") setError("Change password denied.");
    } catch (err) {
      setError(err.message);
    }
  };

  const handleCheckOTP = async (e) => {
    e.preventDefault();
    setError(null);
    try {
      await client.checkOTP({ code: otpCode, challengeId: challengeId, onChallenge: handleChallenge });
    } catch (err) {
      if (err instanceof PrldErrors.BadCheckCode) setError("Wrong code.");
      else setError(err.message);
    }
  };

  const handleSubmitPassword = async (e) => {
    e.preventDefault();
    setError(null);
    try {
      await client.changePassword(newPassword);
      setView("done");
    } catch (err) {
      setError(err.message);
    }
  };

  // ── Render ─────────────────────────────────────────────────

  return (
    <>
      <style>{`body, #root { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 0; }`}</style>
      <main style={{ textAlign: "center", maxWidth: "600px", width: "100%" }}>
        <h1>Change Password Demo</h1>
        {error && <p role="alert" style={{ color: "var(--pico-color-red-500)" }}>{error}</p>}

        {view === "login" && (
          <form onSubmit={handleLogin}>
            <input type="email" placeholder="user@example.com" value={email} onChange={(e) => setEmail(e.target.value)} required />
            <input type="password" placeholder="Current password" value={password} onChange={(e) => setPassword(e.target.value)} required />
            <button type="submit">Log in</button>
          </form>
        )}

        {view === "logged" && (
          <article>
            <p>Logged in.</p>
            <button onClick={handleStartChangePassword}>Change password</button>
          </article>
        )}

        {view === "stepup-otp" && (
          <form onSubmit={handleCheckOTP}>
            <p>Enter the verification code we just sent you.</p>
            <input type="text" placeholder="OTP code" value={otpCode} onChange={(e) => setOtpCode(e.target.value)} required />
            <button type="submit">Verify</button>
            <button type="button" className="secondary" onClick={() => client.retryOTP()}>Resend</button>
          </form>
        )}

        {view === "new-password" && (
          <form onSubmit={handleSubmitPassword}>
            <p>Choose a new password.</p>
            <input type="password" placeholder="New password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required />
            <button type="submit">Save</button>
          </form>
        )}

        {view === "done" && (
          <article>
            <p>Password updated. The `prld:pwd:write` scope has been consumed.</p>
          </article>
        )}
      </main>
    </>
  );
}