mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-21 22:50:59 -05:00
feat: finalise 2FA login
This commit is contained in:
parent
c686e85d37
commit
dbb1c1e8fa
11 changed files with 277 additions and 53 deletions
2
external/lang
vendored
2
external/lang
vendored
|
@ -1 +1 @@
|
|||
Subproject commit 68f72e01e2c450f9545e05cc702113ee966c0e9a
|
||||
Subproject commit c9cdbea7edcb22641b9ea372c85a83ef8e1c1d11
|
|
@ -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",
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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
76
src/context/modals/components/MFAEnableTOTP.tsx
Normal 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>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
})
|
||||
|
|
|
@ -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;
|
||||
}, []);
|
||||
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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";
|
||||
}
|
||||
|
|
|
@ -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
10
yarn.lock
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue