Authentication flow is functional

matrixgw_frontend/src/routes/auth/LoginRoute.tsx

@@ -1,3 +1,50 @@
+import { Alert, Box, Button, CircularProgress } from "@mui/material";
+import Icon from "@mdi/react";
+import { mdiOpenid } from "@mdi/js";
+import { ServerApi } from "../../api/ServerApi";
+import React from "react";
+import { AuthApi } from "../../api/AuthApi";
+
 export function LoginRoute(): React.ReactElement {
-  return <>LoginRoute</>;
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const authWithOpenID = async () => {
+    try {
+      setLoading(true);
+
+      const res = await AuthApi.StartOpenIDLogin();
+      window.location.href = res.url;
+    } catch (e) {
+      console.error(e);
+      setError("Failed to initialize OpenID login");
+    }
+  };
+
+  if (loading)
+    return (
+      <div style={{ textAlign: "center" }}>
+        <CircularProgress />
+      </div>
+    );
+
+  return (
+    <>
+      {error && (
+        <Alert style={{ width: "100%" }} severity="error">
+          {error}
+        </Alert>
+      )}
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+        <Button
+          fullWidth
+          variant="outlined"
+          onClick={authWithOpenID}
+          startIcon={<Icon path={mdiOpenid} size={1} />}
+        >
+          Sign in with {ServerApi.Config.oidc_provider_name}
+        </Button>
+      </Box>
+    </>
+  );
 }