mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-13 18:59:22 -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",
|
"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",
|
||||||
|
|
|
@ -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)),
|
||||||
|
|
|
@ -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>*/
|
|
||||||
|
|
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,
|
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>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
|
|
|
@ -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;
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
});
|
});
|
||||||
|
|
|
@ -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";
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
10
yarn.lock
10
yarn.lock
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue