Can finalize Matrix authentication

matrixgw_frontend/src/App.tsx

@@ -14,6 +14,7 @@ import { MatrixLinkRoute } from "./routes/MatrixLinkRoute";
 import { NotFoundRoute } from "./routes/NotFoundRoute";
 import { BaseLoginPage } from "./widgets/auth/BaseLoginPage";
 import BaseAuthenticatedPage from "./widgets/dashboard/BaseAuthenticatedPage";
+import { MatrixAuthCallback } from "./routes/MatrixAuthCallback";
 
 interface AuthContext {
   signedIn: boolean;
@@ -39,6 +40,7 @@ export function App(): React.ReactElement {
         <Route path="*" element={<BaseAuthenticatedPage />}>
           <Route path="" element={<HomeRoute />} />
           <Route path="matrix_link" element={<MatrixLinkRoute />} />
+          <Route path="matrix_auth_cb" element={<MatrixAuthCallback />} />
           <Route path="*" element={<NotFoundRoute />} />
         </Route>
       ) : (

matrixgw_frontend/src/api/AuthApi.ts

@@ -7,6 +7,7 @@ export interface UserInfo {
   name: string;
   email: string;
   matrix_user_id?: string;
+  matrix_device_id?: string;
 }
 
 const TokenStateKey = "auth-state";

matrixgw_frontend/src/api/MatrixLinkApi.ts

@@ -12,4 +12,15 @@ export class MatrixLinkApi {
       })
     ).data;
   }
+
+  /**
+   * Finish Matrix Account login
+   */
+  static async FinishAuth(code: string, state: string): Promise<void> {
+    await APIClient.exec({
+      uri: "/matrix_link/finish_auth",
+      method: "POST",
+      jsonData: { code, state },
+    });
+  }
 }

matrixgw_frontend/src/routes/MatrixAuthCallback.tsx

@@ -0,0 +1,79 @@
+import { Alert, Box, Button, CircularProgress } from "@mui/material";
+import React from "react";
+import { useNavigate, useSearchParams } from "react-router";
+import { MatrixLinkApi } from "../api/MatrixLinkApi";
+import { useUserInfo } from "../widgets/dashboard/BaseAuthenticatedPage";
+import { RouterLink } from "../widgets/RouterLink";
+import { useSnackbar } from "../hooks/contexts_provider/SnackbarProvider";
+
+export function MatrixAuthCallback(): React.ReactElement {
+  const navigate = useNavigate();
+  const snackbar = useSnackbar();
+
+  const info = useUserInfo();
+
+  const [error, setError] = React.useState<null | string>(null);
+
+  const [searchParams] = useSearchParams();
+  const code = searchParams.get("code");
+  const state = searchParams.get("state");
+
+  const count = React.useRef("");
+
+  React.useEffect(() => {
+    const load = async () => {
+      try {
+        if (count.current === code) {
+          return;
+        }
+        count.current = code!;
+
+        await MatrixLinkApi.FinishAuth(code!, state!);
+        info.reloadUserInfo();
+        snackbar("Successfully linked to Matrix account!");
+        navigate("/matrix_link");
+      } catch (e) {
+        console.error(e);
+        setError(String(e));
+      }
+    };
+
+    load();
+  });
+
+  if (error)
+    return (
+      <Box
+        component="div"
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100%",
+          flex: "1",
+          flexDirection: "column",
+        }}
+      >
+        <Alert
+          variant="outlined"
+          severity="error"
+          style={{ margin: "0px 15px 15px 15px" }}
+        >
+          Failed to finalize Matrix authentication!
+          <br />
+          <br />
+          {error}
+        </Alert>
+
+        <Button>
+          <RouterLink to="/matrix_link">Go back</RouterLink>
+        </Button>
+      </Box>
+    );
+
+  return (
+    <div style={{ textAlign: "center" }}>
+      <CircularProgress />
+    </div>
+  );
+}

matrixgw_frontend/src/routes/MatrixLinkRoute.tsx

@@ -79,9 +79,17 @@ function ConnectedCard(): React.ReactElement {
 
         <Typography variant="body1" gutterBottom>
           <p>
-            MatrixGW is currently connected to your account with ID{" "}
-            <i>{user.info.matrix_user_id}</i>.
+            MatrixGW is currently connected to your account with the following
+            information:
           </p>
+          <ul>
+            <li>
+              User id: <i>{user.info.matrix_user_id}</i>
+            </li>
+            <li>
+              Device id: <i>{user.info.matrix_device_id}</i>
+            </li>
+          </ul>
           <p>
             If you encounter issues with your Matrix account you can try to
             disconnect and connect back again.