More attributes

Author: benoitgrelard

src/app/using-your-own-ui/mfa/page.tsx

@@ -76,7 +76,16 @@ export default function Mfa() {
       <form action={verifyAction}>
         <div>
           <label htmlFor="code">Enter the code from your app</label>
-          <input name="code" id="code" autoFocus required />
+          <input
+            type="text"
+            name="code"
+            id="code"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            pattern="^\d{6}$"
+            autoFocus
+            required
+          />
         </div>
 
         <input

src/app/using-your-own-ui/sign-in/magic-auth/page.tsx

@@ -48,7 +48,16 @@ export default function SignInWithMagicAuth() {
       <form action={signInAction}>
         <div>
           <label htmlFor="code">Enter code from the email</label>
-          <input type="text" name="code" id="code" autoFocus required />
+          <input
+            type="text"
+            name="code"
+            id="code"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            pattern="^\d{6}$"
+            autoFocus
+            required
+          />
         </div>
 
         <input type="hidden" name="userId" value={sendCodeState.user.id} />

src/app/using-your-own-ui/verify-email/page.tsx

@@ -46,7 +46,16 @@ export default function VerifyEmail() {
       <form action={verifyEmailAction}>
         <div>
           <label htmlFor="code">Enter code from the email</label>
-          <input type="text" name="code" id="code" autoFocus required />
+          <input
+            type="text"
+            name="code"
+            id="code"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            pattern="^\d{6}$"
+            autoFocus
+            required
+          />
         </div>
 
         <input type="hidden" name="userId" value={sendCodeState.user.id} />