feat: finalise 2FA login

external/lang

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

package.json

@@ -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",

src/components/settings/account/AccountManagement.tsx

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

src/components/settings/account/MultiFactorAuthentication.tsx

@@ -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"
+                    ? "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>
 
-            {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>*/

src/context/modals/components/MFAEnableTOTP.tsx

@@ -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>
+    );
+}

src/context/modals/components/MFAFlow.tsx

@@ -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: () =>
+                              onClick: () => {
-                                  methods!.length === 1
+                                  if (methods!.length === 1) {
-                                      ? true
+                                      props.callback();
-                                      : void setSelected(undefined),
+                                      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>
                         );
                     })

src/context/modals/components/MFARecovery.tsx

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

src/context/modals/index.tsx

@@ -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,
 });

src/context/modals/types.ts

@@ -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";
       }

src/pages/login/forms/FormLogin.tsx

@@ -52,15 +52,19 @@ export function FormLogin() {
 
                 if (session.result === "MFA") {
                     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({
                                 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,

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"