From 86fb6aaa11b153041622c4b4648acf527adb4cfb Mon Sep 17 00:00:00 2001
From: Alexander Ott <66271487+AlexanderHott@users.noreply.github.com>
Date: Sun, 10 Nov 2024 15:42:37 -0500
Subject: [PATCH] make hidden inputs readonly, render passkey login button, and
 fix signin redirect

---
 app/2fa/passkey/register/components.tsx      | 4 ++--
 app/2fa/security-key/register/components.tsx | 4 ++--
 app/2fa/totp/setup/components.tsx            | 2 +-
 app/login/page.tsx                           | 3 ++-
 app/settings/components.tsx                  | 4 ++--
 app/verify-email/page.tsx                    | 2 +-
 6 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/2fa/passkey/register/components.tsx b/app/2fa/passkey/register/components.tsx
index 5e7a1c9..258639d 100644
--- a/app/2fa/passkey/register/components.tsx
+++ b/app/2fa/passkey/register/components.tsx
@@ -78,8 +78,8 @@ export function RegisterPasskeyForm(props: {
 			<form action={action}>
 				<label htmlFor="form-register-credential.name">Credential name</label>
 				<input id="form-register-credential.name" name="name" />
-				<input type="hidden" name="attestation_object" value={encodedAttestationObject ?? ""} />
-				<input type="hidden" name="client_data_json" value={encodedClientDataJSON ?? ""} />
+				<input type="hidden" name="attestation_object" value={encodedAttestationObject ?? ""} readOnly />
+				<input type="hidden" name="client_data_json" value={encodedClientDataJSON ?? ""} readOnly />
 				<button disabled={encodedAttestationObject === null && encodedClientDataJSON === null}>Continue</button>
 				<p>{formState.message}</p>
 			</form>
diff --git a/app/2fa/security-key/register/components.tsx b/app/2fa/security-key/register/components.tsx
index b356a22..a389cae 100644
--- a/app/2fa/security-key/register/components.tsx
+++ b/app/2fa/security-key/register/components.tsx
@@ -80,8 +80,8 @@ export function RegisterSecurityKey(props: {
 			<form action={action}>
 				<label htmlFor="form-register-credential.name">Credential name</label>
 				<input id="form-register-credential.name" name="name" />
-				<input type="hidden" name="attestation_object" value={encodedAttestationObject ?? ""} />
-				<input type="hidden" name="client_data_json" value={encodedClientDataJSON ?? ""} />
+				<input type="hidden" name="attestation_object" value={encodedAttestationObject ?? ""} readOnly />
+				<input type="hidden" name="client_data_json" value={encodedClientDataJSON ?? ""} readOnly />
 				<button disabled={encodedAttestationObject === null && encodedClientDataJSON === null}>Continue</button>
 				<p>{formState.message}</p>
 			</form>
diff --git a/app/2fa/totp/setup/components.tsx b/app/2fa/totp/setup/components.tsx
index d19b2af..205eee6 100644
--- a/app/2fa/totp/setup/components.tsx
+++ b/app/2fa/totp/setup/components.tsx
@@ -11,7 +11,7 @@ export function TwoFactorSetUpForm(props: { encodedTOTPKey: string }) {
 	const [state, action] = useFormState(setup2FAAction, initial2FASetUpState);
 	return (
 		<form action={action}>
-			<input name="key" value={props.encodedTOTPKey} hidden required />
+			<input name="key" value={props.encodedTOTPKey} hidden required readOnly />
 			<label htmlFor="form-totp.code">Verify the code from the app</label>
 			<input id="form-totp.code" name="code" required />
 			<br />
diff --git a/app/login/page.tsx b/app/login/page.tsx
index bb33b43..d4b278a 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,4 +1,4 @@
-import { LoginForm } from "./components";
+import { LoginForm, PasskeyLoginButton } from "./components";
 import Link from "next/link";
 
 import { getCurrentSession } from "@/lib/server/session";
@@ -28,6 +28,7 @@ export default function Page() {
 		<>
 			<h1>Sign in</h1>
 			<LoginForm />
+			<PasskeyLoginButton />
 			<Link href="/signup">Create an account</Link>
 			<Link href="/forgot-password">Forgot password?</Link>
 		</>
diff --git a/app/settings/components.tsx b/app/settings/components.tsx
index 87afd46..d0a973e 100644
--- a/app/settings/components.tsx
+++ b/app/settings/components.tsx
@@ -74,7 +74,7 @@ export function PasskeyCredentialListItem(props: { encodedId: string; name: stri
 		<li>
 			<p>{props.name}</p>
 			<form action={formAction}>
-				<input type="hidden" name="credential_id" value={props.encodedId} />
+				<input type="hidden" name="credential_id" value={props.encodedId} readOnly />
 				<button> Delete </button>
 				<p>{state.message}</p>
 			</form>
@@ -92,7 +92,7 @@ export function SecurityKeyCredentialListItem(props: { encodedId: string; name:
 		<li>
 			<p>{props.name}</p>
 			<form action={formAction}>
-				<input type="hidden" name="credential_id" value={props.encodedId} />
+				<input type="hidden" name="credential_id" value={props.encodedId} readOnly />
 				<button> Delete </button>
 				<p>{state.message}</p>
 			</form>
diff --git a/app/verify-email/page.tsx b/app/verify-email/page.tsx
index 3a31ae9..05a29fa 100644
--- a/app/verify-email/page.tsx
+++ b/app/verify-email/page.tsx
@@ -13,7 +13,7 @@ export default function Page() {
 
 	const { user } = getCurrentSession();
 	if (user === null) {
-		return redirect("/redirect");
+		return redirect("/login");
 	}
 
 	// TODO: Ideally we'd sent a new verification email automatically if the previous one is expired,