React Vanilla Sample App Improvements for Passkey

[KaveeshaPiumini]

Purpose

This pull request refactors how passkey-related state is handled in the LoginPage component. The main improvements are to ensure that passkey creation and authentication options are set and reset at the appropriate times, and that UI state is properly cleared on errors. This helps prevent stale or incorrect data from persisting across authentication and registration flows.

Passkey state management improvements:

• Moved the logic for setting passkeyCreationOptions and passkeyChallenge to occur immediately when a "VIEW" response is received, ensuring these are handled before other UI updates. [1] [2] [3]
• Removed duplicate passkey state-setting logic from inside input/action handling blocks to avoid redundant or missed updates.

State reset and error handling:

• Added resets for passkeyCreationOptions and passkeyChallenge whenever the login or registration flow is re-initiated, preventing stale passkey data from previous sessions. [1] [2]
• On passkey credential or assertion submission errors, additional UI state is cleared (e.g., decision prompts, available actions, selected actions, form data, and inputs), ensuring the UI returns to a clean state for the user. [1] [2]

Related Issues

• Add Passkey UI Support #1140

Related PRs

• N/A

Checklist

• Followed the contribution guidelines.
• Manual test round performed and verified.
• Documentation provided. (Add links if there are any)
• Tests provided. (Add links if there are any)
  • Unit Tests
  • Integration Tests
• Breaking changes. (Fill if applicable)
  • Breaking changes section filled.
  • breaking change label added.

Security checks

• Followed secure coding standards in WSO2 Secure Coding Guidelines
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets.

[Copilot]

Pull request overview

This pull request refactors passkey-related state management in the React vanilla sample app's LoginPage component to improve reliability and prevent stale state from persisting across authentication flows.

Changes:

• Moved passkey state initialization (passkeyCreationOptions and passkeyChallenge) to occur immediately when VIEW responses are received, ensuring proper sequencing before other UI updates
• Added state resets for passkey data when authentication or registration flows are re-initiated to prevent stale data from previous sessions
• Enhanced error handling for passkey credential and assertion submissions by clearing additional UI state to ensure a clean user experience on errors

[Copilot]

The error handling for passkey credential submission (lines 660-662) clears fewer state variables compared to the passkey assertion error handler (lines 696-700). For consistency and to ensure a clean UI state on errors, consider also clearing setSelectedAction(null), setFormData({}), and setInputs([]) in this error handler, similar to the passkey assertion error handler.

Suggested change

	setAvailableActions([]);
	setAvailableActions([]);
	setSelectedAction(null);
	setFormData({});
	setInputs([]);

[Copilot]

The passkey credential error handler resets connectionError to false before calling handleSubmissionError, but the passkey assertion error handler (line 696-700) does not. For consistency, consider adding setConnectionError(false) before calling handleSubmissionError in the passkey assertion error handler as well, to ensure any previous connection error state is cleared.

Suggested change

	setInputs([]);
	setInputs([]);
	setConnectionError(false);

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.94%. Comparing base (122b937) to head (93e5c6b).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1293   +/-   ##
=======================================
  Coverage   89.94%   89.94%           
=======================================
  Files         625      625           
  Lines       40648    40648           
  Branches     2371     2371           
=======================================
  Hits        36559    36559           
  Misses       2212     2212           
  Partials     1877     1877           

Flag	Coverage Δ
backend-integration-postgres	52.90% <ø> (ø)
backend-integration-sqlite	52.87% <ø> (ø)
backend-unit	82.68% <ø> (ø)
frontend-apps-develop-unit	90.75% <ø> (ø)
frontend-apps-gate-unit	84.62% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ 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.