passwordless prompt page

apps/login/app/(login)/accounts/page.tsx

@@ -22,6 +22,7 @@ async function loadSessions(): Promise<Session[]> {
 
 export default async function Page() {
   let sessions = await loadSessions();
+  console.log(sessions);
 
   return (
     <div className="flex flex-col items-center space-y-4">

apps/login/app/(login)/passkey/add/page.tsx

@@ -9,7 +9,7 @@ export default async function Page({
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
-  const { loginName } = searchParams;
+  const { loginName, prompt } = searchParams;
 
   const sessionFactors = await loadSession(loginName);
 
@@ -21,10 +21,16 @@ export default async function Page({
       }
     });
   }
+  const title = !!prompt
+    ? "Authenticate with a passkey"
+    : "Use your passkey to confirm it’s really you";
+  const description = !!prompt
+    ? "When set up, you will be able to authenticate without a password."
+    : "Your device will ask for your fingerprint, face, or screen lock";
 
   return (
     <div className="flex flex-col items-center space-y-4">
-      <h1>Use your passkey to confirm it’s really you</h1>
+      <h1>{title}</h1>
 
       {sessionFactors && (
         <UserAvatar
@@ -33,9 +39,7 @@ export default async function Page({
           showDropdown
         ></UserAvatar>
       )}
-      <p className="ztdl-p mb-6 block">
+      <p className="ztdl-p mb-6 block">{description}</p>
-        Your device will ask for your fingerprint, face, or screen lock
-      </p>
 
       <Alert type={AlertType.INFO}>
         <span>
@@ -60,7 +64,9 @@ export default async function Page({
         </div>
       )}
 
-      {sessionFactors?.id && <RegisterPasskey sessionId={sessionFactors.id} />}
+      {sessionFactors?.id && (
+        <RegisterPasskey sessionId={sessionFactors.id} isPrompt={!!prompt} />
+      )}
     </div>
   );
 }

apps/login/ui/PasswordForm.tsx

@@ -55,7 +55,10 @@ export default function PasswordForm({ loginName }: Props) {
       if (resp.factors && !resp.factors.passwordless) {
         return router.push(
           `/passkey/add?` +
-            new URLSearchParams({ loginName: resp.factors.user.loginName })
+            new URLSearchParams({
+              loginName: resp.factors.user.loginName,
+              prompt: "true",
+            })
         );
       } else {
         return router.push(`/accounts`);

apps/login/ui/RegisterPasskey.tsx

@@ -12,9 +12,10 @@ type Inputs = {};
 
 type Props = {
   sessionId: string;
+  isPrompt: boolean;
 };
 
-export default function RegisterPasskey({ sessionId }: Props) {
+export default function RegisterPasskey({ sessionId, isPrompt }: Props) {
   const { register, handleSubmit, formState } = useForm<Inputs>({
     mode: "onBlur",
   });
@@ -172,13 +173,24 @@ export default function RegisterPasskey({ sessionId }: Props) {
       )}
 
       <div className="mt-8 flex w-full flex-row items-center">
-        <Button
+        {isPrompt ? (
-          type="button"
+          <Button
-          variant={ButtonVariants.Secondary}
+            type="button"
-          onClick={() => router.back()}
+            variant={ButtonVariants.Secondary}
-        >
+            onClick={() => router.push("/accounts")}
-          back
+          >
-        </Button>
+            skip
+          </Button>
+        ) : (
+          <Button
+            type="button"
+            variant={ButtonVariants.Secondary}
+            onClick={() => router.back()}
+          >
+            back
+          </Button>
+        )}
+
         <span className="flex-grow"></span>
         <Button
           type="submit"