feat: finalise 2FA login

This commit is contained in:
Paul Makles 2022-06-12 19:24:59 +01:00
parent c686e85d37
commit dbb1c1e8fa
11 changed files with 277 additions and 53 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 68f72e01e2c450f9545e05cc702113ee966c0e9a Subproject commit c9cdbea7edcb22641b9ea372c85a83ef8e1c1d11

View file

@ -137,6 +137,7 @@
"preact-i18n": "^2.4.0-preactx", "preact-i18n": "^2.4.0-preactx",
"prettier": "^2.3.1", "prettier": "^2.3.1",
"prismjs": "^1.23.0", "prismjs": "^1.23.0",
"qrcode.react": "^3.0.2",
"react-beautiful-dnd": "^13.1.0", "react-beautiful-dnd": "^13.1.0",
"react-device-detect": "2.2.2", "react-device-detect": "2.2.2",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",

View file

@ -17,11 +17,13 @@ export default function AccountManagement() {
const client = useClient(); const client = useClient();
const callback = (route: "disable" | "delete") => () => const callback = (route: "disable" | "delete") => () =>
modalController.mfaFlow(client).then(({ token }) => modalController.mfaFlow(client).then(
(ticket) =>
ticket &&
client.api client.api
.post(`/auth/account/${route}`, undefined, { .post(`/auth/account/${route}`, undefined, {
headers: { headers: {
"X-MFA-Ticket": token, "X-MFA-Ticket": ticket.token,
}, },
}) })
.then(() => logOut(true)), .then(() => logOut(true)),

View file

@ -5,7 +5,7 @@ import { API } from "revolt.js";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useCallback, useContext, useEffect, useState } from "preact/hooks"; import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import { CategoryButton, Column, Preloader } from "@revoltchat/ui"; import { CategoryButton, Tip } from "@revoltchat/ui";
import { modalController } from "../../../context/modals"; import { modalController } from "../../../context/modals";
import { import {
@ -47,21 +47,29 @@ export default function MultiFactorAuthentication() {
// Action called when recovery code button is pressed // Action called when recovery code button is pressed
const recoveryAction = useCallback(async () => { const recoveryAction = useCallback(async () => {
const { token } = await modalController.mfaFlow(client); // Perform MFA flow first
const ticket = await modalController.mfaFlow(client);
// Check whether action was cancelled
if (typeof ticket === "undefined") {
return;
}
// Decide whether to generate or fetch. // Decide whether to generate or fetch.
let codes; let codes;
if (mfa!.recovery_active) { if (mfa!.recovery_active) {
// Fetch existing recovery codes
codes = await client.api.post( codes = await client.api.post(
"/auth/mfa/recovery", "/auth/mfa/recovery",
undefined, undefined,
toConfig(token), toConfig(ticket.token),
); );
} else { } else {
// Generate new recovery codes
codes = await client.api.patch( codes = await client.api.patch(
"/auth/mfa/recovery", "/auth/mfa/recovery",
undefined, undefined,
toConfig(token), toConfig(ticket.token),
); );
setMFA({ setMFA({
@ -78,6 +86,70 @@ export default function MultiFactorAuthentication() {
}); });
}, [mfa]); }, [mfa]);
// Action called when TOTP button is pressed
const totpAction = useCallback(async () => {
// Perform MFA flow first
const ticket = await modalController.mfaFlow(client);
// Check whether action was cancelled
if (typeof ticket === "undefined") {
return;
}
// Decide whether to disable or enable.
if (mfa!.totp_mfa) {
// Disable TOTP authentication
await client.api.delete("/auth/mfa/totp", toConfig(ticket.token));
setMFA({
...mfa!,
totp_mfa: false,
});
} else {
// Generate a TOTP secret
const { secret } = await client.api.post(
"/auth/mfa/totp",
undefined,
toConfig(ticket.token),
);
// Open secret modal
let success;
while (!success) {
try {
// Make the user generator a token
const totp_code = await modalController.mfaEnableTOTP(
secret,
client.user!.username,
);
if (totp_code) {
// Check whether it is valid
await client.api.put(
"/auth/mfa/totp",
{
totp_code,
},
toConfig(ticket.token),
);
// Mark as successful and activated
success = true;
setMFA({
...mfa!,
totp_mfa: true,
});
} else {
break;
}
} catch (err) {}
}
}
}, [mfa]);
const mfaActive = !!mfa?.totp_mfa;
return ( return (
<> <>
<h3> <h3>
@ -97,26 +169,29 @@ export default function MultiFactorAuthentication() {
disabled={!mfa} disabled={!mfa}
onClick={recoveryAction}> onClick={recoveryAction}>
{mfa?.recovery_active {mfa?.recovery_active
? "View backup codes" ? "View Backup Codes"
: "Generate recovery codes"} : "Generate Recovery Codes"}
</CategoryButton>
<CategoryButton
icon={
<Lock
size={24}
color={!mfa?.totp_mfa ? "var(--error)" : undefined}
/>
}
description={"Set up time-based one-time password."}
disabled={!mfa || (!mfa.recovery_active && !mfa.totp_mfa)}
onClick={totpAction}>
{mfa?.totp_mfa ? "Disable" : "Enable"} Authenticator App
</CategoryButton> </CategoryButton>
{JSON.stringify(mfa, undefined, 4)} {mfa && (
<Tip palette={mfaActive ? "primary" : "error"}>
{mfaActive
? "Two-factor authentication is currently on!"
: "Two-factor authentication is currently off!"}
</Tip>
)}
</> </>
); );
} }
/*<CategoryButton
icon={<Lock size={24} color="var(--error)" />}
description={"Set up 2FA on your account."}
disabled
action={<Text id="general.unavailable" />}>
Set up Two-factor authentication
</CategoryButton>*/
/*<CategoryButton
icon={<ListOl size={24} />}
description={"View and download your 2FA backup codes."}
disabled
action="chevron">
View my backup codes
</CategoryButton>*/

View file

@ -0,0 +1,76 @@
import { QRCodeSVG } from "qrcode.react";
import styled from "styled-components";
import { useState } from "preact/hooks";
import { Category, Centred, Column, InputBox, Modal } from "@revoltchat/ui";
import { ModalProps } from "../types";
const Code = styled.code`
user-select: all;
`;
/**
* TOTP enable modal
*/
export default function MFAEnableTOTP({
identifier,
secret,
callback,
onClose,
}: ModalProps<"mfa_enable_totp">) {
const uri = `otpauth://totp/Revolt:${identifier}?secret=${secret}&issuer=Revolt`;
const [value, setValue] = useState("");
return (
<Modal
title="Enable authenticator app"
description={
"Please scan or use the token below in your authentication app."
}
actions={[
{
palette: "primary",
children: "Continue",
onClick: () => {
callback(value.trim().replace(/\s/g, ""));
return true;
},
confirmation: true,
},
{
palette: "plain",
children: "Cancel",
onClick: () => {
callback();
return true;
},
},
]}
onClose={() => {
callback();
onClose();
}}>
<Column>
<Centred>
<QRCodeSVG
value={uri}
bgColor="transparent"
fgColor="var(--foreground)"
/>
</Centred>
<Centred>
<Code>{secret}</Code>
</Centred>
</Column>
<Category compact>Enter Code</Category>
<InputBox
value={value}
onChange={(e) => setValue(e.currentTarget.value)}
/>
</Modal>
);
}

View file

@ -18,8 +18,6 @@ import {
Preloader, Preloader,
} from "@revoltchat/ui"; } from "@revoltchat/ui";
import { noopTrue } from "../../../lib/js";
import { ModalProps } from "../types"; import { ModalProps } from "../types";
/** /**
@ -58,6 +56,24 @@ function ResponseEntry({
} }
/> />
)} )}
{type === "Totp" && (
<InputBox
value={(value as { totp_code: string })?.totp_code}
onChange={(e) =>
onChange({ totp_code: e.currentTarget.value })
}
/>
)}
{type === "Recovery" && (
<InputBox
value={(value as { recovery_code: string })?.recovery_code}
onChange={(e) =>
onChange({ recovery_code: e.currentTarget.value })
}
/>
)}
</> </>
); );
} }
@ -129,21 +145,31 @@ export default function MFAFlow({ onClose, ...props }: ModalProps<"mfa_flow">) {
palette: "plain", palette: "plain",
children: children:
methods!.length === 1 ? "Cancel" : "Back", methods!.length === 1 ? "Cancel" : "Back",
onClick: () => onClick: () => {
methods!.length === 1 if (methods!.length === 1) {
? true props.callback();
: void setSelected(undefined), return true;
} else {
setSelected(undefined);
}
},
}, },
] ]
: [ : [
{ {
palette: "plain", palette: "plain",
children: "Cancel", children: "Cancel",
onClick: noopTrue, onClick: () => {
props.callback();
return true;
},
}, },
] ]
} }
onClose={onClose}> onClose={() => {
props.callback();
onClose();
}}>
{methods ? ( {methods ? (
selectedMethod ? ( selectedMethod ? (
<ResponseEntry <ResponseEntry
@ -160,7 +186,7 @@ export default function MFAFlow({ onClose, ...props }: ModalProps<"mfa_flow">) {
action="chevron" action="chevron"
icon={<Icon size={24} />} icon={<Icon size={24} />}
onClick={() => setSelected(method)}> onClick={() => setSelected(method)}>
{method} <Text id={`login.${method.toLowerCase()}`} />
</CategoryButton> </CategoryButton>
); );
}) })

View file

@ -37,13 +37,17 @@ export default function MFARecovery({
// Subroutine to reset recovery codes // Subroutine to reset recovery codes
const reset = useCallback(async () => { const reset = useCallback(async () => {
const { token } = await modalController.mfaFlow(client); const ticket = await modalController.mfaFlow(client);
if (ticket) {
const codes = await client.api.patch( const codes = await client.api.patch(
"/auth/mfa/recovery", "/auth/mfa/recovery",
undefined, undefined,
toConfig(token), toConfig(ticket.token),
); );
setCodes(codes); setCodes(codes);
}
return false; return false;
}, []); }, []);

View file

@ -8,6 +8,7 @@ import {
import type { Client, API } from "revolt.js"; import type { Client, API } from "revolt.js";
import { ulid } from "ulid"; import { ulid } from "ulid";
import MFAEnableTOTP from "./components/MFAEnableTOTP";
import MFAFlow from "./components/MFAFlow"; import MFAFlow from "./components/MFAFlow";
import MFARecovery from "./components/MFARecovery"; import MFARecovery from "./components/MFARecovery";
import Test from "./components/Test"; import Test from "./components/Test";
@ -85,7 +86,7 @@ class ModalControllerExtended extends ModalController<Modal> {
mfaFlow(client: Client) { mfaFlow(client: Client) {
return runInAction( return runInAction(
() => () =>
new Promise((callback: (ticket: API.MFATicket) => void) => new Promise((callback: (ticket?: API.MFATicket) => void) =>
this.push({ this.push({
type: "mfa_flow", type: "mfa_flow",
state: "known", state: "known",
@ -95,10 +96,29 @@ class ModalControllerExtended extends ModalController<Modal> {
), ),
); );
} }
/**
* Open TOTP secret modal
* @param client Client
*/
mfaEnableTOTP(secret: string, identifier: string) {
return runInAction(
() =>
new Promise((callback: (value?: string) => void) =>
this.push({
type: "mfa_enable_totp",
identifier,
secret,
callback,
}),
),
);
}
} }
export const modalController = new ModalControllerExtended({ export const modalController = new ModalControllerExtended({
mfa_flow: MFAFlow, mfa_flow: MFAFlow,
mfa_recovery: MFARecovery, mfa_recovery: MFARecovery,
mfa_enable_totp: MFAEnableTOTP,
test: Test, test: Test,
}); });

View file

@ -9,15 +9,21 @@ export type Modal = {
| { | {
state: "known"; state: "known";
client: Client; client: Client;
callback: (ticket: API.MFATicket) => void; callback: (ticket?: API.MFATicket) => void;
} }
| { | {
state: "unknown"; state: "unknown";
available_methods: API.MFAMethod[]; available_methods: API.MFAMethod[];
callback: (response: API.MFAResponse) => void; callback: (response?: API.MFAResponse) => void;
} }
)) ))
| { type: "mfa_recovery"; codes: string[]; client: Client } | { type: "mfa_recovery"; codes: string[]; client: Client }
| {
type: "mfa_enable_totp";
identifier: string;
secret: string;
callback: (code?: string) => void;
}
| { | {
type: "test"; type: "test";
} }

View file

@ -52,8 +52,8 @@ export function FormLogin() {
if (session.result === "MFA") { if (session.result === "MFA") {
const { allowed_methods } = session; const { allowed_methods } = session;
let mfa_response: API.MFAResponse = await new Promise( let mfa_response: API.MFAResponse | undefined =
(callback) => await new Promise((callback) =>
modalController.push({ modalController.push({
type: "mfa_flow", type: "mfa_flow",
state: "unknown", state: "unknown",
@ -62,6 +62,10 @@ export function FormLogin() {
}), }),
); );
if (typeof mfa_response === "undefined") {
throw "Cancelled";
}
session = await client.api.post("/auth/session/login", { session = await client.api.post("/auth/session/login", {
mfa_response, mfa_response,
mfa_ticket: session.ticket, mfa_ticket: session.ticket,

View file

@ -3569,6 +3569,7 @@ __metadata:
preact-i18n: ^2.4.0-preactx preact-i18n: ^2.4.0-preactx
prettier: ^2.3.1 prettier: ^2.3.1
prismjs: ^1.23.0 prismjs: ^1.23.0
qrcode.react: ^3.0.2
react-beautiful-dnd: ^13.1.0 react-beautiful-dnd: ^13.1.0
react-device-detect: 2.2.2 react-device-detect: 2.2.2
react-helmet: ^6.1.0 react-helmet: ^6.1.0
@ -6473,6 +6474,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"qrcode.react@npm:^3.0.2":
version: 3.0.2
resolution: "qrcode.react@npm:3.0.2"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 4102e9f416d86808728b93dca4e90cab0b2d3eca2bfe501a26ca62237062ded2121711cfc4edf64832c63e04d34956e26c2e7088023949f9328bbaa56004777d
languageName: node
linkType: hard
"queue-microtask@npm:^1.2.2": "queue-microtask@npm:^1.2.2":
version: 1.2.3 version: 1.2.3
resolution: "queue-microtask@npm:1.2.3" resolution: "queue-microtask@npm:1.2.3"