diff options
| -rw-r--r-- | app/routes/auth.register.tsx | 27 |
1 files changed, 5 insertions, 22 deletions
diff --git a/app/routes/auth.register.tsx b/app/routes/auth.register.tsx index 3728116..daca8e4 100644 --- a/app/routes/auth.register.tsx +++ b/app/routes/auth.register.tsx @@ -30,37 +30,24 @@ export default function Register() { const [token, setToken] = useState(""); const [status, setStatus] = useState<"idle" | "loading" | "error">("idle"); const [errorMsg, setErrorMsg] = useState(""); - const [step, setStep] = useState(""); async function handleRegister() { - const tick = () => new Promise<void>((r) => setTimeout(r, 50)); setStatus("loading"); setErrorMsg(""); - setStep(""); try { - setStep("1a. fetch 中…"); await tick(); const optRes = await fetch("/api/passkey?intent=reg-options", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ token }), }); - setStep("1b. fetch 完了 status=" + optRes.status); await tick(); - const rawText = await optRes.text(); - setStep("1c. body=" + rawText.slice(0, 120)); await tick(); if (!optRes.ok) { - throw new Error("HTTP " + optRes.status + ": " + rawText.slice(0, 200)); + const err = await optRes.json(); + throw new Error(err.error ?? "オプション取得に失敗しました"); } - let optJSON: Record<string, unknown>; - try { - optJSON = JSON.parse(rawText); - } catch (e) { - throw new Error("JSON.parse 失敗: " + String(e) + " | body: " + rawText.slice(0, 100)); - } - setStep("1d. JSON パース OK"); await tick(); + const optJSON = await optRes.json(); const userObj = optJSON.user as Record<string, string>; const challenge = b64urlToBuffer(optJSON.challenge as string); - setStep("2. credentials.create() 呼び出し中…"); await tick(); const credential = await navigator.credentials.create({ publicKey: { @@ -76,7 +63,6 @@ export default function Register() { }) as PublicKeyCredential | null; if (!credential) throw new Error("クレデンシャルの作成に失敗しました"); - setStep("3. credential 取得 OK → サーバー送信中…"); await tick(); const attestation = credential.response as AuthenticatorAttestationResponse; const regResponse: RegistrationResponseJSON = { @@ -117,7 +103,7 @@ export default function Register() { <h1>log</h1> </header> <div className="auth-box"> - <h2>パスキーを登録 [debug]</h2> + <h2>パスキーを登録</h2> <p>登録トークンを入力してパスキーを作成します。</p> <input type="password" @@ -138,11 +124,8 @@ export default function Register() { <button className="btn" onClick={handleRegister} disabled={status === "loading" || !token}> {status === "loading" ? "登録中…" : "パスキーを登録"} </button> - {step && ( - <p style={{ marginTop: ".75rem", fontSize: ".75rem", color: "#6b7280", wordBreak: "break-all" }}>{step}</p> - )} {status === "error" && ( - <p className="error-msg" style={{ marginTop: ".5rem" }}>{errorMsg}</p> + <p className="error-msg" style={{ marginTop: ".75rem" }}>{errorMsg}</p> )} </div> </div> |