feat: identifier first login, reset password overhaul by anusha-c18 · Pull Request #759 · canonical/identity-platform-login-ui

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.12%. Comparing base (bc73db5) to head (ca1499f).
⚠️ Report is 167 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #759      +/-   ##
==========================================
- Coverage   44.72%   44.12%   -0.60%     
==========================================
  Files          39       40       +1     
  Lines        3204     3388     +184     
==========================================
+ Hits         1433     1495      +62     
- Misses       1688     1798     +110     
- Partials       83       95      +12

☔ 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

Copilot

Pull request overview

This PR implements identifier-first login flow and redesigns the password reset experience with improved validation and user feedback.

Changes:

Implements identifier-first login with separate email and password entry screens
Adds debounced password validation with real-time feedback and show/hide password functionality
Updates E2E tests to accommodate the new login flow with improved screenshot handling

Reviewed changes

Copilot reviewed 17 out of 19 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
ui/util/constants.ts	Adds constants for identifier-first login flow and account error handling
ui/tests/reset-password.spec.ts	Updates test to include email input step in identifier-first flow
ui/tests/helpers/visual.ts	Adds screenshot configuration for consistent visual testing
ui/tests/helpers/oidc_client.ts	Updates assertion text to match new simplified login page title
ui/tests/helpers/mail.ts	Improves email retrieval with explicit visibility check
ui/tests/helpers/login.ts	Updates login helper to handle two-step identifier-first flow
ui/static/sass/styles.scss	Adds styling for password visibility toggle and validation states
ui/pages/login.tsx	Implements identifier-first login logic with conditional rendering
ui/components/PasswordToggle.tsx	New component providing show/hide password functionality
ui/components/PasswordCheck.tsx	Refactors password validation feedback with improved status rendering
ui/components/Password.tsx	Adds debounced validation and real-time password matching feedback
ui/components/NodeInputText.tsx	Adds email validation and error handling for identifier-first flow
ui/components/NodeInputSubmit.tsx	Adds registration CTA for identifier-first login
ui/components/NodeInputPassword.tsx	Integrates password toggle and improves error messages
ui/components/Flow.tsx	Adds identifier_first to supported authentication methods
ui/api/kratos.ts	Implements API function for identifier-first login flow
docker/kratos/kratos.yml	Enables identifier-first login style in Kratos configuration

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

ui/util/constants.ts

Copilot · 2026-02-04T11:49:13Z

ui/components/Password.tsx

+    if (isValid !== computedValid) {
+      setValid(computedValid);
+    }
+  }, [computedValid, setValid]);


The useEffect dependency array is missing 'isValid'. This could cause the effect to not run when isValid changes externally, potentially leading to stale state. Add 'isValid' to the dependency array.

Suggested change

}, [computedValid, setValid]);

}, [computedValid, isValid, setValid]);

Copilot · 2026-02-04T11:49:14Z

ui/components/NodeInputPassword.tsx

+  const url = new URL(window.location.href);
+  url.pathname = "/ui/login";
+  url.searchParams.delete("flow");
+  return url.pathname + url.search;


The return value may include a leading '?' even when there are no search parameters after deleting 'flow'. Consider using url.toString() or checking if search params exist before concatenation.

Suggested change

return url.pathname + url.search;

const search = url.searchParams.toString();

return search ? `${url.pathname}?${search}` : url.pathname;

ui/components/NodeInputPassword.tsx

Copilot · 2026-02-04T11:49:14Z

ui/pages/login.tsx

+  const isIdentifierFirst =
+    flow?.ui.nodes.some(
+      (node) =>
+        node.attributes.node_type === "input" &&
+        (node.attributes as UiNodeInputAttributes).name === "method" &&
+        (node.attributes as UiNodeInputAttributes).value === "identifier_first",
+    ) ?? false;


The isIdentifierFirst check runs on every render. Consider memoizing this computation with useMemo to avoid unnecessary iterations through ui.nodes, especially when the flow object hasn't changed.

ui/api/kratos.ts

Copilot

Pull request overview

Copilot reviewed 17 out of 19 changed files in this pull request and generated 10 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

ui/tests/helpers/login.ts

ui/static/sass/styles.scss

Copilot · 2026-02-04T12:06:45Z

ui/pages/login.tsx

+      return;
+    }
+
+    if (flowId && flow) {


The condition checks flowId from router query but flowId is not defined in scope. This should be router.query.flow to properly check if a flow ID exists in the URL.

ui/components/PasswordCheck.tsx

Copilot · 2026-02-04T12:06:46Z

ui/components/NodeInputText.tsx

+        return "Please enter your email address.";
+      }
+
+      if (!/^\S+@\S+\.\S+$/.test(currentValue)) {


The email validation regex is overly simplistic and may not catch common email format errors. Consider using a more robust email validation pattern or extracting this to a reusable validation utility.

ui/components/NodeInputSubmit.tsx

ui/components/NodeInputPassword.tsx

ui/api/kratos.ts

Copilot

Pull request overview

Copilot reviewed 17 out of 19 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-05T15:27:10Z

ui/pages/login.tsx

    flow?.requested_aal === "aal2" &&
    flow?.ui.nodes.find((node) => node.group === "webauthn") !== undefined;


The useEffect hook at line 83 has a missing dependency. The isWebauthn variable computed at line 71-73 depends on flow?.requested_aal and flow?.ui.nodes, but only flow is listed in the dependency array. This could lead to stale values. Consider memoizing isWebauthn with useMemo or adding the individual dependencies.

ui/pages/login.tsx

ui/components/NodeInputPassword.tsx

ui/tests/helpers/login.ts

Copilot

Pull request overview

Copilot reviewed 17 out of 19 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

ui/components/Password.tsx

ui/pages/login.tsx

anusha-c18 force-pushed the registration branch 7 times, most recently 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

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

nsklikas previously approved these changes Oct 6, 2025

View reviewed changes

BarcoMasile previously approved these changes Oct 8, 2025

View reviewed changes

natalian98 dismissed stale reviews from BarcoMasile and nsklikas via 2e5b8d4 October 17, 2025 12:50

natalian98 force-pushed the registration branch from 6204892 to 2e5b8d4 Compare October 17, 2025 12:50

nsklikas mentioned this pull request Oct 23, 2025

fix: redirect to user details page when session is valid #769

Merged

natalian98 force-pushed the registration branch from 2e5b8d4 to 556d533 Compare October 23, 2025 09:51

Copilot AI review requested due to automatic review settings February 4, 2026 11:47

natalian98 force-pushed the registration branch from 556d533 to e5af588 Compare February 4, 2026 11:47

Copilot AI reviewed Feb 4, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings February 4, 2026 12:05

natalian98 force-pushed the registration branch from 62706e3 to c026363 Compare February 4, 2026 12:05

Copilot AI reviewed Feb 4, 2026

View reviewed changes

feat: identifier first login, reset password overhaul

1bbf41e

natalian98 force-pushed the registration branch from c026363 to e05c375 Compare February 4, 2026 14:54

Copilot AI review requested due to automatic review settings February 5, 2026 15:26

natalian98 force-pushed the registration branch from e05c375 to 423e900 Compare February 5, 2026 15:26

Copilot AI reviewed Feb 5, 2026

View reviewed changes

natalian98 force-pushed the registration branch from 423e900 to b5aa9e8 Compare February 5, 2026 15:32

anusha-c18 and others added 4 commits February 5, 2026 16:52

feat: update login e2e tests

db42a84

feat: add password error styles to input text

7d41bc1

fix: strip /api/kratos

c0c5a1f

fix(ui): set correct register url

ca1499f

Copilot AI review requested due to automatic review settings February 5, 2026 15:52

natalian98 force-pushed the registration branch from b5aa9e8 to ca1499f Compare February 5, 2026 15:52

Copilot AI reviewed Feb 5, 2026

View reviewed changes

ui/components/Password.tsx Show resolved Hide resolved

ui/pages/login.tsx Show resolved Hide resolved

natalian98 requested a review from a team February 5, 2026 16:06

nsklikas approved these changes Feb 11, 2026

View reviewed changes

	}, [computedValid, setValid]);
	}, [computedValid, isValid, setValid]);

	return url.pathname + url.search;
	const search = url.searchParams.toString();
	return search ? `${url.pathname}?${search}` : url.pathname;

		flow?.requested_aal === "aal2" &&
		flow?.ui.nodes.find((node) => node.group === "webauthn") !== undefined;

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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

anusha-c18 commented Sep 19, 2025 •

edited

Loading

codecov bot commented Sep 19, 2025 •

edited

Loading