cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 06:32:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat: finalise 2FA login

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

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

1
package.json
View file

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

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,

10
yarn.lock
View file

@ -3569,6 +3569,7 @@ __metadata:
preact-i18n: ^2.4.0-preactx
prettier: ^2.3.1
prismjs: ^1.23.0
qrcode.react: ^3.0.2
react-beautiful-dnd: ^13.1.0
react-device-detect: 2.2.2
react-helmet: ^6.1.0
@ -6473,6 +6474,15 @@ __metadata:
languageName: node
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":
version: 1.2.3
resolution: "queue-microtask@npm:1.2.3"