feat: identifier first login, reset password overhaul #759

anusha-c18 · 2025-09-19T19:09:27Z

Add identifier first login
- Add enter email page
- Add server side email validation and handle error messages
- Add enter password page
Reset password overhaul
- Add debounce for password validation
- Add show/hide password functionality
- Only show errors on password input on blur
- Handle confirmation password errors
- Show success message when confirmation password matches expected password
Update e2e test
- Update login e2e test with new screenshots
- Add screenshot options configuration

Identifier first login

Screen.Recording.2025-09-25.at.8.05.16.PM.mov

Email validation

Reset Password

Screen.Recording.2025-09-25.at.8.09.21.PM.mov

codecov · 2025-09-19T19:14:37Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 44.72%. Comparing base (bc73db5) to head (6204892).
⚠️ Report is 17 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #759   +/-   ##
=======================================
  Coverage   44.72%   44.72%           
=======================================
  Files          39       39           
  Lines        3204     3204           
=======================================
  Hits         1433     1433           
  Misses       1688     1688           
  Partials       83       83

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

BarcoMasile · 2025-09-26T14:51:27Z

ui/pages/login.tsx

+  const renderFlow: LoginFlow | undefined = flow
+    ? isIdentifierFirst
+      ? {
+          ...flow,
+          ui: {
+            ...flow.ui,
+            nodes: flow.ui.nodes.filter((n: UiNode) => {
+              if (
+                n.attributes.node_type === "input" &&
+                typeof (n.attributes as UiNodeInputAttributes).name === "string"
+              ) {
+                const name = (n.attributes as UiNodeInputAttributes).name;
+                return (
+                  name === "identifier" ||
+                  name === "csrf_token" ||
+                  name === "method"
+                );
+              }
+              return false;
+            }),
+          },
+        }
+      : isAuthCode
+        ? filterFlow(replaceAuthLabel(flow))
+        : flow


issue: nested ternary operator inside ternary operator == hurts to read
we need to improve readability of the code, can you please break it down?

BarcoMasile · 2025-09-26T14:51:52Z

ui/pages/login.tsx

+  const title = isIdentifierFirst
+    ? "Sign in"
+    : isAuthCode
+      ? "Verify your identity"
+      : `Sign in${getTitleSuffix()}`;


issue(readability): same as below

BarcoMasile · 2025-09-26T14:52:34Z

ui/components/Password.tsx

+        onChange={(e) => {
+          if (!hasTouched) setHasTouched(true);
+          setPassword(e.target.value);
+        }}


can you please move the inline function to a React.useCallback?

BarcoMasile · 2025-09-26T14:53:51Z

ui/components/Password.tsx

+  const validateCheck = (check: PasswordCheckType, value: string): boolean => {
    switch (check) {
      case "lowercase":
-        return /[a-z]/.test(password) ? "success" : "error";
+        return /[a-z]/.test(value);
      case "uppercase":
-        return /[A-Z]/.test(password) ? "success" : "error";
+        return /[A-Z]/.test(value);
      case "number":
-        return /[0-9]/.test(password) ? "success" : "error";
+        return /\d/.test(value);
      case "length":
-        return password.length >= 8 ? "success" : "error";
+        return value.length >= 8;
    }
  };


issue(readability): please move this function out to refactor it to a static function, so the body of the component is not made heavy to read

BarcoMasile · 2025-09-26T14:54:27Z

ui/components/NodeInputPassword.tsx

+        setPassword(e.target.value);
+        void setValue(e.target.value);
+      }}
+      onKeyDown={(e) => {


same comment on inline function

ui/components/NodeInputSubmit.tsx

nsklikas · 2025-09-25T12:06:00Z

ui/pages/login.tsx

+        return fetch(
+          `/api/kratos/self-service/login/id-first?flow=${encodeURIComponent(flowId)}`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              ...values,
+              method,
+              flow: String(flow?.id),
+            }),
+          },
+        )
+          .then(async (res) => {
+            if (!res.ok) {
+              throw new Error(await res.text());
+            }
+            return (await res.json()) as IdentifierFirstResponse;
+          })
+          .then((data) => {
+            if ("redirect_to" in data) {
+              window.location.href = data.redirect_to;
+              return;
+            }
+            if (flow?.return_to) {
+              window.location.href = flow.return_to;
+              return;
+            }
+            setFlow(data);
+          })
+          .catch(redirectToErrorPage);
+      }


IMO this should be in a function, ideally I think it should be part of the kratos object (defined in kratos.ts)

Can't it be a method in the kratos sdk object? Also it should re-use the basePath from Kratos sdk, this way we treat it as a single API and if we want to refactor it in the future (e.g. change the basePath) we would just have to change the sdk instantiation instead of having to search the code for hard coded strings.

ui/components/NodeInputPassword.tsx

anusha-c18 force-pushed the registration branch 5 times, most recently from 916da45 to 0e898b6 Compare September 24, 2025 17:45

feat: identifier first login, reset password overhaul

f68e724

anusha-c18 force-pushed the registration branch from 0e898b6 to f39613f Compare September 24, 2025 20:51

feat: update login e2e tests

b627325

anusha-c18 force-pushed the registration branch from f39613f to b627325 Compare September 25, 2025 14:18

anusha-c18 marked this pull request as ready for review September 25, 2025 14:41

anusha-c18 requested a review from a team as a code owner September 25, 2025 14:41

BarcoMasile requested changes Sep 26, 2025

View reviewed changes

nsklikas reviewed Sep 29, 2025

View reviewed changes

nsklikas reviewed Sep 30, 2025

View reviewed changes

ui/components/NodeInputPassword.tsx Show resolved Hide resolved

feat: add password error styles to input text

6204892

anusha-c18 force-pushed the registration branch from 665f045 to 6204892 Compare October 2, 2025 19:59

nsklikas approved these changes Oct 6, 2025

View reviewed changes

BarcoMasile approved these changes Oct 8, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: identifier first login, reset password overhaul #759

feat: identifier first login, reset password overhaul #759

anusha-c18 commented Sep 19, 2025 •

edited

Loading

Uh oh!

codecov bot commented Sep 19, 2025 •

edited

Loading

Uh oh!

BarcoMasile Sep 26, 2025

Uh oh!

BarcoMasile Sep 26, 2025

Uh oh!

BarcoMasile Sep 26, 2025

Uh oh!

BarcoMasile Sep 26, 2025

Uh oh!

BarcoMasile Sep 26, 2025

Uh oh!

Uh oh!

nsklikas Sep 25, 2025

Uh oh!

nsklikas Oct 9, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat: identifier first login, reset password overhaul #759

Are you sure you want to change the base?

feat: identifier first login, reset password overhaul #759

Conversation

anusha-c18 commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Identifier first login

Email validation

Reset Password

Uh oh!

codecov bot commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

BarcoMasile Sep 26, 2025

Choose a reason for hiding this comment

Uh oh!

BarcoMasile Sep 26, 2025

Choose a reason for hiding this comment

Uh oh!

BarcoMasile Sep 26, 2025

Choose a reason for hiding this comment

Uh oh!

BarcoMasile Sep 26, 2025

Choose a reason for hiding this comment

Uh oh!

BarcoMasile Sep 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nsklikas Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

nsklikas Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

anusha-c18 commented Sep 19, 2025 •

edited

Loading

codecov bot commented Sep 19, 2025 •

edited

Loading