abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 08:38:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: finalise 2FA login

Browse Source
This commit is contained in:
Paul Makles
2022-06-12 19:24:59 +01:00
parent 2536ef86f7
commit cc031464ba
11 changed files with 277 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/settings/account/AccountManagement.tsx
View File

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

119
src/components/settings/account/MultiFactorAuthentication.tsx
View File

@@ -5,7 +5,7 @@ import { API } from "revolt.js";
import { Text } from "preact-i18n";
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 {
@@ -47,21 +47,29 @@ export default function MultiFactorAuthentication() {
// Action called when recovery code button is pressed
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.
let codes;
if (mfa!.recovery_active) {
// Fetch existing recovery codes
codes = await client.api.post(
"/auth/mfa/recovery",
undefined,
toConfig(token),
toConfig(ticket.token),
);
} else {
// Generate new recovery codes
codes = await client.api.patch(
"/auth/mfa/recovery",
undefined,
toConfig(token),
toConfig(ticket.token),
);
setMFA({
@@ -78,6 +86,70 @@ export default function MultiFactorAuthentication() {
});
}, [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 (
<>
<h3>
@@ -97,26 +169,29 @@ export default function MultiFactorAuthentication() {
disabled={!mfa}
onClick={recoveryAction}>
{mfa?.recovery_active
? "View backup codes"
: "Generate recovery codes"}
? "View Backup 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>
{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>*/

76
src/context/modals/components/MFAEnableTOTP.tsx Normal file
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>
);
}

44
src/context/modals/components/MFAFlow.tsx
View File

@@ -18,8 +18,6 @@ import {
Preloader,
} from "@revoltchat/ui";
import { noopTrue } from "../../../lib/js";
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",
children:
methods!.length === 1 ? "Cancel" : "Back",
onClick: () =>
methods!.length === 1
? true
: void setSelected(undefined),
onClick: () => {
if (methods!.length === 1) {
props.callback();
return true;
} else {
setSelected(undefined);
}
},
},
]
: [
{
palette: "plain",
children: "Cancel",
onClick: noopTrue,
onClick: () => {
props.callback();
return true;
},
},
]
}
onClose={onClose}>
onClose={() => {
props.callback();
onClose();
}}>
{methods ? (
selectedMethod ? (
<ResponseEntry
@@ -160,7 +186,7 @@ export default function MFAFlow({ onClose, ...props }: ModalProps<"mfa_flow">) {
action="chevron"
icon={<Icon size={24} />}
onClick={() => setSelected(method)}>
{method}
<Text id={`login.${method.toLowerCase()}`} />
</CategoryButton>
);
})

18
src/context/modals/components/MFARecovery.tsx
View File

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

22
src/context/modals/index.tsx
View File

@@ -8,6 +8,7 @@ import {
import type { Client, API } from "revolt.js";
import { ulid } from "ulid";
import MFAEnableTOTP from "./components/MFAEnableTOTP";
import MFAFlow from "./components/MFAFlow";
import MFARecovery from "./components/MFARecovery";
import Test from "./components/Test";
@@ -85,7 +86,7 @@ class ModalControllerExtended extends ModalController<Modal> {
mfaFlow(client: Client) {
return runInAction(
() =>
new Promise((callback: (ticket: API.MFATicket) => void) =>
new Promise((callback: (ticket?: API.MFATicket) => void) =>
this.push({
type: "mfa_flow",
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({
mfa_flow: MFAFlow,
mfa_recovery: MFARecovery,
mfa_enable_totp: MFAEnableTOTP,
test: Test,
});

10
src/context/modals/types.ts
View File

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

10
src/pages/login/forms/FormLogin.tsx
View File

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