page consistency, docs

apps/login/cypress/integration/login.cy.ts

@@ -111,7 +111,7 @@ describe("login", () => {
         cy.get('button[type="submit"]').click();
         cy.location("pathname", { timeout: 10_000 }).should(
           "eq",
-          "/passkey/add",
+          "/passkey/set",
         );
       });
     });

apps/login/cypress/integration/register.cy.ts

@@ -17,6 +17,6 @@ describe("register", () => {
     cy.get('input[type="checkbox"][value="privacypolicy"]').check();
     cy.get('input[type="checkbox"][value="tos"]').check();
     cy.get('button[type="submit"]').click();
-    cy.location("pathname", { timeout: 10_000 }).should("eq", "/passkey/add");
+    cy.location("pathname", { timeout: 10_000 }).should("eq", "/passkey/set");
   });
 });

apps/login/readme.md

@@ -45,11 +45,11 @@ This is going to be our next UI for the hosted login. It's based on Next.js 13 a
 
 ### /loginname
 
-<img src="./screenshots/loginname.png" alt="/loginame" width="400px" />
-
 This page shows a loginname field and Identity Providers to login or register.
 If `loginSettings(org?).allowRegister` is `true`, if will also show a link to jump to /register
 
+<img src="./screenshots/loginname.png" alt="/loginame" width="400px" />
+
 Requests to the APIs made:
 
 - `getLoginSettings(org?)`
@@ -85,11 +85,11 @@ If no previous condition is met we throw an error stating the user was not found
 
 ### /password
 
-<img src="./screenshots/password.png" alt="/password" width="400px" />
-
 This page shows a password field to hydrate the current session with password as a factor.
 Below the password field, a reset password link is shown which allows to send a reset email.
 
+<img src="./screenshots/password.png" alt="/password" width="400px" />
+
 Requests to the APIs made:
 
 - `getLoginSettings(org?)`
@@ -103,16 +103,16 @@ If the user has set up an additional **single** second factor, it is redirected
 
 **NO MFA, FORCE MFA:** If no MFA method is available, and the settings force MFA, the user is sent to `/mfa/set` which prompts to setup a second factor.
 
-**PROMPT PASSKEY** If the settings do not enforce MFA, we check if passkeys are allowed with `loginSettings?.passkeysType === PasskeysType.ALLOWED` and redirect the user to `/passkey/add` if no passkeys are setup. This step can be skipped.
+**PROMPT PASSKEY** If the settings do not enforce MFA, we check if passkeys are allowed with `loginSettings?.passkeysType === PasskeysType.ALLOWED` and redirect the user to `/passkey/set` if no passkeys are setup. This step can be skipped.
 
 If none of the previous conditions apply, we continue to sign in.
 
 ### /otp/[method]
 
-<img src="./screenshots/otp.png" alt="/otp/[method]" width="400px" />
-
 This page shows a code field to check an otp method. The session of the user is then hydrated with the respective factor. Supported methods are `time-based`, `sms` and `email`.
 
+<img src="./screenshots/otp.png" alt="/otp/[method]" width="400px" />
+
 Requests to the APIs made:
 
 - `getBrandingSettings(org?)`
@@ -126,10 +126,10 @@ The submission of the code updates the session and continues to sign in the user
 
 ### /u2f
 
-<img src="./screenshots/u2f.png" alt="/u2f" width="400px" />
-
 This page requests a webAuthN challenge for the user and updates the session afterwards.
 
+<img src="./screenshots/u2f.png" alt="/u2f" width="400px" />
+
 Requests to the APIs made:
 
 - `getBrandingSettings(org?)`
@@ -141,10 +141,10 @@ After updating the session, the user is signed in.
 
 ### /passkey
 
-<img src="./screenshots/passkey.png" alt="/passkey" width="400px" />
-
 This page requests a webAuthN challenge for the user and updates the session afterwards.
 
+<img src="./screenshots/passkey.png" alt="/passkey" width="400px" />
+
 Requests to the APIs made:
 
 - `getBrandingSettings(org?)`
@@ -156,10 +156,10 @@ After updating the session, the user is signed in.
 
 ### /mfa/set
 
-<img src="./screenshots/mfaset.png" alt="/mfa/set" width="400px" />
-
 This page loads login Settings and the authentication methods for a user and shows setup options.
 
+<img src="./screenshots/mfaset.png" alt="/mfa/set" width="400px" />
+
 Requests to the APIs made:
 
 - `getBrandingSettings(org?)`
@@ -177,6 +177,17 @@ At the moment, U2F methods are hidden if a method is already added on the users
 
 ### /passkey/set
 
+<img src="./screenshots/passkeyset.png" alt="/passkey/set" width="400px" />
+
+This page sets a passkey method for a user. This page can be either enforced, or optional depending on the Login Settings.
+
+Requests to the APIs made:
+
+- `getBrandingSettings(org?)`
+- `getSession()`
+- `registerPasskeyLink()`
+- `verifyPasskey()`
+
 ### /otp/[method]/set
 
 ### /u2f/set

apps/login/src/ui/PasswordForm.tsx

@@ -102,7 +102,7 @@ export default function PasswordForm({
     setInfo("");
     // if user has mfa -> /otp/[method] or /u2f
     // if mfa is forced and user has no mfa -> /mfa/set
-    // if no passwordless -> /passkey/add
+    // if no passwordless -> /passkey/set
 
     // exclude password and passwordless
     if (
@@ -194,7 +194,7 @@ export default function PasswordForm({
         params.append("organization", organization);
       }
 
-      return router.push(`/passkey/add?` + params);
+      return router.push(`/passkey/set?` + params);
     } else if (authRequestId && submitted.sessionId) {
       const params = new URLSearchParams({
         sessionId: submitted.sessionId,

apps/login/src/ui/RegisterFormWithoutPassword.tsx

@@ -109,7 +109,7 @@ export default function RegisterFormWithoutPassword({
         params.set("authRequestId", authRequestId);
       }
 
-      return router.push(`/passkey/add?` + new URLSearchParams(params));
+      return router.push(`/passkey/set?` + new URLSearchParams(params));
     }
   }