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",
+}