testing: Added stories for Auth PassKey button by waynemorphic · Pull Request #969 · keycloakify/keycloakify

waynemorphic · 2025-12-01T13:12:38Z

Summary by CodeRabbit

Documentation
- Added Storybook stories demonstrating WebAuthn Passkey sign-in flows for the main login, username-entry, and password-entry screens to aid UI documentation and testing.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-01T13:12:49Z

Walkthrough

Adds a new Storybook story export WithAuthPassKey to three login story files; each story renders KcPageStory with kcContext enabling WebAuthn conditional UI and a mock url.loginAction.

Changes

Cohort / File(s)	Summary
WebAuthn Storybook stories `stories/login/pages/Login.stories.tsx`, `stories/login/pages/LoginPassword.stories.tsx`, `stories/login/pages/LoginUsername.stories.tsx`	Added `WithAuthPassKey` story export in each file. Each story renders `KcPageStory` with `kcContext` set to `{ url: { loginAction: "/mock-login-action" }, enableWebAuthnConditionalUI: true }` to surface the passkey/WebAuthn UI in Storybook.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Review focus: ensure mock loginAction URL is appropriate and consistent across stories; verify no accidental imports/exports or typing regressions in each .stories.tsx.

Possibly related PRs

Add WebAuthn/Passkey support to Login and LoginPassword flows #960 — Introduces WebAuthn UI and kcContext fields that these stories exercise.

Poem

🐰
I hopped through stories, keys in paw,
Mock logins gleam with WebAuthn awe,
Passkeys wink on each little page,
A tiny rabbit marks the stage,
Hooray — a secure, playful showcase! 🎋

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: adding Storybook stories for the Auth PassKey button feature across three login-related story files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a6394b0 and 54dd6be.

📒 Files selected for processing (1)

stories/login/pages/LoginUsername.stories.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

stories/login/pages/LoginUsername.stories.tsx (2)

stories/login/pages/LoginPassword.stories.tsx (1)

WithAuthPassKey (76-88)

stories/login/pages/Login.stories.tsx (1)

WithAuthPassKey (368-380)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Test with Node v18 on ubuntu-latest

🔇 Additional comments (1)

stories/login/pages/LoginUsername.stories.tsx (1)

32-50: Auth Passkey story is consistent and correctly wired

The WithAuthPassKey story matches the pattern used in Login.stories.tsx and LoginPassword.stories.tsx (same kcContext shape and mock loginAction), and the JSDoc name now aligns with the exported story name. All good from a Storybook and typing standpoint.

If you care about wording consistency with product/UI copy, you might optionally normalize “Pass Key” vs “Passkey” in the JSDoc text, but that’s purely cosmetic.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

stories/login/pages/Login.stories.tsx (1)

362-380: Passkey story implementation is consistent and correct

This WithAuthPassKey story is wired the same way as other stories that customize kcContext (spread args then provide a focused kcContext with url.loginAction and enableWebAuthnConditionalUI). That should be enough to surface the passkey button scenario in Storybook.

If you end up adding more passkey stories later, you might consider a tiny helper to avoid repeating the same kcContext shape across files, but that’s optional.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d881ab1 and a6394b0.

📒 Files selected for processing (3)

stories/login/pages/Login.stories.tsx (1 hunks)
stories/login/pages/LoginPassword.stories.tsx (1 hunks)
stories/login/pages/LoginUsername.stories.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

stories/login/pages/Login.stories.tsx (1)

stories/login/pages/LoginPassword.stories.tsx (1)

WithAuthPassKey (76-88)

stories/login/pages/LoginPassword.stories.tsx (1)

stories/login/pages/Login.stories.tsx (1)

WithAuthPassKey (368-380)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Test with Node v18 on ubuntu-latest

🔇 Additional comments (1)

stories/login/pages/LoginPassword.stories.tsx (1)

70-88: Passkey story mirrors main login configuration

WithAuthPassKey here mirrors the main login.ftl story: same kcContext shape with url.loginAction and enableWebAuthnConditionalUI: true, and the same render pattern. That should reliably exercise the passkey button on the password page as intended.

No issues from a correctness or Storybook‑usage perspective.

garronej · 2025-12-01T19:31:35Z

Thank you @waynemorphic,
Much appreciated!

garronej · 2025-12-01T19:32:26Z

If you could add it as well to https://github.com/keycloakify/login-ui-storybook, that would be reall neat.

testing: Added stories for Auth PassKey button

a6394b0

coderabbitai Bot reviewed Dec 1, 2025

View reviewed changes

Comment thread stories/login/pages/LoginUsername.stories.tsx

fix: Align case for exported story

54dd6be

garronej merged commit 0ac4c71 into keycloakify:main Dec 1, 2025
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

testing: Added stories for Auth PassKey button#969

testing: Added stories for Auth PassKey button#969
garronej merged 2 commits intokeycloakify:mainfrom
waynemorphic:main

waynemorphic commented Dec 1, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Dec 1, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

garronej commented Dec 1, 2025

Uh oh!

Uh oh!

garronej commented Dec 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

waynemorphic commented Dec 1, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

garronej commented Dec 1, 2025

Uh oh!

Uh oh!

garronej commented Dec 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

waynemorphic commented Dec 1, 2025 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Dec 1, 2025 •

edited

Loading