From 0d0afedbddae06be3c9fff7752674b5edc5bd663 Mon Sep 17 00:00:00 2001 From: Alano Terblanche <18033717+Benehiko@users.noreply.github.com> Date: Fri, 29 Sep 2023 16:09:24 +0200 Subject: [PATCH] fix: two factor confirmation card --- package-lock.json | 8 +- package.json | 2 +- .../ory/user-auth-card.spec.tsx | 26 ++++- src/react-components/ory/user-auth-card.tsx | 7 +- src/test/fixtures/login.ts | 109 ++++++++++++++++++ 5 files changed, 143 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 03f27b9e6..a8f88924d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ }, "devDependencies": { "@babel/core": "7.18.10", - "@ory/client": "1.2.8", + "@ory/client": "1.2.10", "@ory/integrations": "1.1.5", "@playwright/experimental-ct-react": "1.38.0", "@playwright/test": "1.38.0", @@ -7713,9 +7713,9 @@ } }, "node_modules/@ory/client": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/@ory/client/-/client-1.2.8.tgz", - "integrity": "sha512-Exd4dVXMpcYqImv1zTvgRtHosY42LmFkgLKTbZWGF0XAmWHbHL4jBnoJkGwb2fhl8hohfeH0Chhmc57G8OfONA==", + "version": "1.2.10", + "resolved": "https://registry.npmjs.org/@ory/client/-/client-1.2.10.tgz", + "integrity": "sha512-BcbHrKifOom1nPhF3GPmIY619IioGyHHbyeSFb5AgcIa0PI1z4XPLkjDrXlckrx01c3fHxY2stzwJDEAavPrqA==", "dev": true, "dependencies": { "axios": "^0.21.4" diff --git a/package.json b/package.json index b1a5e0a11..5687fd21f 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "homepage": "https://github.com/ory/elements#readme", "devDependencies": { "@babel/core": "7.18.10", - "@ory/client": "1.2.8", + "@ory/client": "1.2.10", "@ory/integrations": "1.1.5", "@playwright/experimental-ct-react": "1.38.0", "@playwright/test": "1.38.0", diff --git a/src/react-components/ory/user-auth-card.spec.tsx b/src/react-components/ory/user-auth-card.spec.tsx index b7e73928d..f4e0b5d57 100644 --- a/src/react-components/ory/user-auth-card.spec.tsx +++ b/src/react-components/ory/user-auth-card.spec.tsx @@ -11,9 +11,11 @@ import { verificationFixture, loginCodeFixture, loginFixtureOAuth2, + loginConfirmWithTwoFactor, } from "../../test" import { UserAuthCard } from "./user-auth-card" -import { OAuth2LoginRequest } from "@ory/client" +import { OAuth2LoginRequest, UiNode, UiNodeInputAttributes } from "@ory/client" +import { isUiNodeInputAttributes } from "@ory/integrations/ui" test("ory auth card login flow. signup disabled", async ({ mount }) => { const component = await mount( @@ -396,3 +398,25 @@ test("ory auth card with oauh client name", async ({ mount }) => { await expect(component).toContainText("a-real-client-name") }) + +test("ory auth card login two factor confirmation", async ({ mount }) => { + const component = await mount( + , + ) + + await expect(component).toContainText("Confirm it's you", { + ignoreCase: true, + }) + await expect(component).toHaveAttribute("data-testid", "login-auth-card") + + const identifier = loginConfirmWithTwoFactor.ui.nodes.find( + ({ attributes }) => + isUiNodeInputAttributes(attributes) && attributes.name === "identifier", + )?.attributes as UiNodeInputAttributes + + expect(identifier).not.toBeNull() + expect(String(identifier.value)).toContain("@ory.sh") + await expect(component).toContainText( + `You're logged in as:${identifier.value}`, + ) +}) diff --git a/src/react-components/ory/user-auth-card.tsx b/src/react-components/ory/user-auth-card.tsx index 00fbf193d..75253b696 100644 --- a/src/react-components/ory/user-auth-card.tsx +++ b/src/react-components/ory/user-auth-card.tsx @@ -211,14 +211,14 @@ export const UserAuthCard = ({ // we want the login section to handle passwordless as well when we have a 2FA screen. const canShowPasswordless = () => !!$passwordless && - (!isLoggedIn(flow as LoginFlow) ?? flowType === "registration") + (!isLoggedIn(flow as LoginFlow) || flowType === "registration") // the current flow is a two factor flow if the user is logged in and has any of the second factor methods enabled. const isTwoFactor = () => flowType === "login" && isLoggedIn(flow) && - (hasTotp(flow.ui.nodes) ?? - hasWebauthn(flow.ui.nodes) ?? + (hasTotp(flow.ui.nodes) || + hasWebauthn(flow.ui.nodes) || hasLookupSecret(flow.ui.nodes)) // we check if nodes have hidden identifier, so we can display "you're looged in as" information @@ -465,6 +465,7 @@ export const UserAuthCard = ({ })} /> {twoFactorFlows()} + {showLoggedAccount && } )} diff --git a/src/test/fixtures/login.ts b/src/test/fixtures/login.ts index d9c98588d..3ca96d7d1 100644 --- a/src/test/fixtures/login.ts +++ b/src/test/fixtures/login.ts @@ -955,3 +955,112 @@ export const loginFixtureOAuth2: LoginFlow = { requested_aal: "aal1", state: "", } + +export const loginConfirmWithTwoFactor: LoginFlow = { + id: "e4e5b13b-9bd5-4bd1-8a63-1750d9f48647", + organization_id: null, + type: "browser", + expires_at: "2023-09-29T14:34:42.513317131Z", + issued_at: "2023-09-29T13:34:42.513317131Z", + request_url: + "http://localhost:4433/self-service/login/browser?aal=aal2&refresh=true&return_to=&organization=", + ui: { + action: + "http://localhost:4455/self-service/login?flow=e4e5b13b-9bd5-4bd1-8a63-1750d9f48647", + method: "POST", + nodes: [ + { + type: "input", + group: "default", + attributes: { + name: "csrf_token", + type: "hidden", + value: + "iCA+nEJQI5nnQe4EumaNq2xbW4/5slDiPSI2Ky33LqqzpzO/hR41Vi3DnJhP7g+wsrfUQCHZmUqNjBeGcLXZ1w==", + required: true, + disabled: false, + node_type: "input", + }, + messages: [], + meta: {}, + }, + { + type: "input", + group: "default", + attributes: { + name: "identifier", + type: "hidden", + value: "0.lazsin4d3eb@ory.sh", + disabled: false, + node_type: "input", + }, + messages: [], + meta: {}, + }, + { + type: "input", + group: "webauthn", + attributes: { + name: "webauthn_login_trigger", + type: "button", + value: "", + disabled: false, + onclick: + 'window.__oryWebAuthnLogin({"publicKey":{"challenge":"96kZd1xu1hmcjQA7mLiM4PrBTiZrVnTuFsDZwjwzgNk","timeout":120000,"rpId":"localhost","allowCredentials":[{"type":"public-key","id":"NvEfBTQBiQF6iv5plEpA2nC9xyjF_Ok09-2ZmAJ1zs8"}],"userVerification":"discouraged"}})', + node_type: "input", + }, + messages: [], + meta: { + label: { + id: 1010008, + text: "Use security key", + type: "info", + }, + }, + }, + { + type: "input", + group: "webauthn", + attributes: { + name: "webauthn_login", + type: "hidden", + value: "", + disabled: false, + node_type: "input", + }, + messages: [], + meta: {}, + }, + { + type: "script", + group: "webauthn", + attributes: { + src: "http://localhost:4455/.well-known/ory/webauthn.js", + async: true, + referrerpolicy: "no-referrer", + crossorigin: "anonymous", + integrity: + "sha512-RI23aG5lwYTo7zknGdc++eHUMimUWhkyFzrGid6HkVSdUSjdESPtM3KufXGq/lo4Ut0jI9mDiZeT8tHoSvaHvg==", + type: "text/javascript", + id: "webauthn_script", + nonce: "4ff0f844-fd4a-45cf-9ab0-ddebf9bc7f92", + node_type: "script", + }, + messages: [], + meta: {}, + }, + ], + messages: [ + { + id: 1010003, + text: "Please confirm this action by verifying that it is you.", + type: "info", + }, + ], + }, + created_at: "2023-09-29T15:34:42.517067+02:00", + updated_at: "2023-09-29T15:34:42.517067+02:00", + refresh: true, + requested_aal: "aal2", + state: "choose_method", +}