Skip to content
This repository was archived by the owner on Oct 22, 2024. It is now read-only.

Commit be59791

Browse files
t3chguyt3chguy
authored
Add support for org.matrix.cross_signing_reset UIA stage flow (#34)
* Soften UIA fallback postMessage check to work cross-origin Signed-off-by: Michael Telatynski <[email protected]> * Do the same for the SSO UIA flow Signed-off-by: Michael Telatynski <[email protected]> * Add support for `org.matrix.cross_signing_reset` UIA stage flow Signed-off-by: Michael Telatynski <[email protected]> * Check against MessageEvent::source instead Signed-off-by: Michael Telatynski <[email protected]> * i18n Signed-off-by: Michael Telatynski <[email protected]> * Add tests Signed-off-by: Michael Telatynski <[email protected]> * Remove protected method Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent b505828 commit be59791

File tree

5 files changed

+155
-9
lines changed

5 files changed

+155
-9
lines changed

‎src/components/structures/InteractiveAuth.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { logger } from "matrix-js-sdk/src/logger";
2020

2121
import getEntryComponentForLoginType, {
2222
ContinueKind,
23+
CustomAuthType,
2324
IStageComponent,
2425
} from "../views/auth/InteractiveAuthEntryComponents";
2526
import Spinner from "../views/elements/Spinner";
@@ -75,11 +76,11 @@ export interface InteractiveAuthProps<T> {
7576
// Called when the stage changes, or the stage's phase changes. First
7677
// argument is the stage, second is the phase. Some stages do not have
7778
// phases and will be counted as 0 (numeric).
78-
onStagePhaseChange?(stage: AuthType | null, phase: number): void;
79+
onStagePhaseChange?(stage: AuthType | CustomAuthType | null, phase: number): void;
7980
}
8081

8182
interface IState {
82-
authStage?: AuthType;
83+
authStage?: CustomAuthType | AuthType;
8384
stageState?: IStageStatus;
8485
busy: boolean;
8586
errorText?: string;

‎src/components/views/auth/InteractiveAuthEntryComponents.tsx

+54-5
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { MatrixClient } from "matrix-js-sdk/src/matrix";
1111
import { AuthType, AuthDict, IInputs, IStageStatus } from "matrix-js-sdk/src/interactive-auth";
1212
import { logger } from "matrix-js-sdk/src/logger";
1313
import React, { ChangeEvent, createRef, FormEvent, Fragment } from "react";
14+
import { Button, Text } from "@vector-im/compound-web";
15+
import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
1416

1517
import EmailPromptIcon from "../../../../res/img/element-icons/email-prompt.svg";
1618
import { _t } from "../../../languageHandler";
@@ -21,6 +23,7 @@ import AccessibleButton, { AccessibleButtonKind, ButtonEvent } from "../elements
2123
import Field from "../elements/Field";
2224
import Spinner from "../elements/Spinner";
2325
import CaptchaForm from "./CaptchaForm";
26+
import { Flex } from "../../utils/Flex";
2427

2528
/* This file contains a collection of components which are used by the
2629
* InteractiveAuth to prompt the user to enter the information needed
@@ -905,11 +908,11 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
905908
}
906909
}
907910

908-
export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
909-
private popupWindow: Window | null;
910-
private fallbackButton = createRef<HTMLButtonElement>();
911+
export class FallbackAuthEntry<T = {}> extends React.Component<IAuthEntryProps & T> {
912+
protected popupWindow: Window | null;
913+
protected fallbackButton = createRef<HTMLButtonElement>();
911914

912-
public constructor(props: IAuthEntryProps) {
915+
public constructor(props: IAuthEntryProps & T) {
913916
super(props);
914917

915918
// we have to make the user click a button, as browsers will block
@@ -967,6 +970,50 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
967970
}
968971
}
969972

973+
export enum CustomAuthType {
974+
// Workaround for MAS requiring non-UIA authentication for resetting cross-signing.
975+
MasCrossSigningReset = "org.matrix.cross_signing_reset",
976+
}
977+
978+
export class MasUnlockCrossSigningAuthEntry extends FallbackAuthEntry<{
979+
stageParams?: {
980+
url?: string;
981+
};
982+
}> {
983+
public static LOGIN_TYPE = CustomAuthType.MasCrossSigningReset;
984+
985+
private onGoToAccountClick = (): void => {
986+
if (!this.props.stageParams?.url) return;
987+
this.popupWindow = window.open(this.props.stageParams.url, "_blank");
988+
};
989+
990+
private onRetryClick = (): void => {
991+
this.props.submitAuthDict({});
992+
};
993+
994+
public render(): React.ReactNode {
995+
return (
996+
<div>
997+
<Text>{_t("auth|uia|mas_cross_signing_reset_description")}</Text>
998+
<Flex gap="var(--cpd-space-4x)">
999+
<Button
1000+
Icon={PopOutIcon}
1001+
onClick={this.onGoToAccountClick}
1002+
autoFocus
1003+
kind="primary"
1004+
className="mx_Dialog_nonDialogButton"
1005+
>
1006+
{_t("auth|uia|mas_cross_signing_reset_cta")}
1007+
</Button>
1008+
<Button onClick={this.onRetryClick} kind="secondary" className="mx_Dialog_nonDialogButton">
1009+
{_t("action|retry")}
1010+
</Button>
1011+
</Flex>
1012+
</div>
1013+
);
1014+
}
1015+
}
1016+
9701017
export interface IStageComponentProps extends IAuthEntryProps {
9711018
stageParams?: Record<string, any>;
9721019
inputs?: IInputs;
@@ -983,8 +1030,10 @@ export interface IStageComponent extends React.ComponentClass<React.PropsWithRef
9831030
focus?(): void;
9841031
}
9851032

986-
export default function getEntryComponentForLoginType(loginType: AuthType): IStageComponent {
1033+
export default function getEntryComponentForLoginType(loginType: AuthType | CustomAuthType): IStageComponent {
9871034
switch (loginType) {
1035+
case CustomAuthType.MasCrossSigningReset:
1036+
return MasUnlockCrossSigningAuthEntry;
9881037
case AuthType.Password:
9891038
return PasswordAuthEntry;
9901039
case AuthType.Recaptcha:

‎src/i18n/strings/en_EN.json

+2
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,8 @@
369369
"email_resend_prompt": "Did not receive it? <a>Resend it</a>",
370370
"email_resent": "Resent!",
371371
"fallback_button": "Start authentication",
372+
"mas_cross_signing_reset_cta": "Go to your account",
373+
"mas_cross_signing_reset_description": "Reset your identity through your account provider and then come back and click “Retry”.",
372374
"msisdn": "A text message has been sent to %(msisdn)s",
373375
"msisdn_token_incorrect": "Token incorrect",
374376
"msisdn_token_prompt": "Please enter the code it contains:",

‎test/components/views/auth/InteractiveAuthEntryComponents-test.tsx

+46-2
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,14 @@
77
*/
88

99
import React from "react";
10-
import { render, screen, waitFor, act } from "@testing-library/react";
10+
import { render, screen, waitFor, act, fireEvent } from "@testing-library/react";
1111
import { AuthType } from "matrix-js-sdk/src/interactive-auth";
1212
import userEvent from "@testing-library/user-event";
1313

14-
import { EmailIdentityAuthEntry } from "../../../../src/components/views/auth/InteractiveAuthEntryComponents";
14+
import {
15+
EmailIdentityAuthEntry,
16+
MasUnlockCrossSigningAuthEntry,
17+
} from "../../../../src/components/views/auth/InteractiveAuthEntryComponents";
1518
import { createTestClient } from "../../../test-utils";
1619

1720
describe("<EmailIdentityAuthEntry/>", () => {
@@ -55,3 +58,44 @@ describe("<EmailIdentityAuthEntry/>", () => {
5558
await waitFor(() => expect(screen.queryByRole("button", { name: "Resend" })).toBeInTheDocument());
5659
});
5760
});
61+
62+
describe("<MasUnlockCrossSigningAuthEntry/>", () => {
63+
const renderAuth = (props = {}) => {
64+
const matrixClient = createTestClient();
65+
66+
return render(
67+
<MasUnlockCrossSigningAuthEntry
68+
matrixClient={matrixClient}
69+
loginType={AuthType.Email}
70+
onPhaseChange={jest.fn()}
71+
submitAuthDict={jest.fn()}
72+
fail={jest.fn()}
73+
clientSecret="my secret"
74+
showContinue={true}
75+
stageParams={{ url: "https://example.com" }}
76+
{...props}
77+
/>,
78+
);
79+
};
80+
81+
test("should render", () => {
82+
const { container } = renderAuth();
83+
expect(container).toMatchSnapshot();
84+
});
85+
86+
test("should open idp in new tab on click", async () => {
87+
const spy = jest.spyOn(global.window, "open");
88+
renderAuth();
89+
90+
fireEvent.click(screen.getByRole("button", { name: "Go to your account" }));
91+
expect(spy).toHaveBeenCalledWith("https://example.com", "_blank");
92+
});
93+
94+
test("should retry uia request on click", async () => {
95+
const submitAuthDict = jest.fn();
96+
renderAuth({ submitAuthDict });
97+
98+
fireEvent.click(screen.getByRole("button", { name: "Retry" }));
99+
expect(submitAuthDict).toHaveBeenCalledWith({});
100+
});
101+
});

‎test/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap

+50
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,53 @@ exports[`<EmailIdentityAuthEntry/> should render 1`] = `
3232
</div>
3333
</div>
3434
`;
35+
36+
exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
37+
<div>
38+
<div>
39+
<p
40+
class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
41+
>
42+
Reset your identity through your account provider and then come back and click “Retry”.
43+
</p>
44+
<div
45+
class="mx_Flex"
46+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
47+
>
48+
<button
49+
class="_button_zt6rp_17 mx_Dialog_nonDialogButton _has-icon_zt6rp_61"
50+
data-kind="primary"
51+
data-size="lg"
52+
role="button"
53+
tabindex="0"
54+
>
55+
<svg
56+
aria-hidden="true"
57+
fill="currentColor"
58+
height="20"
59+
viewBox="0 0 24 24"
60+
width="20"
61+
xmlns="http://www.w3.org/2000/svg"
62+
>
63+
<path
64+
d="M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"
65+
/>
66+
<path
67+
d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z"
68+
/>
69+
</svg>
70+
Go to your account
71+
</button>
72+
<button
73+
class="_button_zt6rp_17 mx_Dialog_nonDialogButton"
74+
data-kind="secondary"
75+
data-size="lg"
76+
role="button"
77+
tabindex="0"
78+
>
79+
Retry
80+
</button>
81+
</div>
82+
</div>
83+
</div>
84+
`;

0 commit comments

Comments
 (0)