authenticate: implement hpke-based login flow (#3779)

* urlutil: add time validation functions

* authenticate: implement hpke-based login flow

* fix import cycle

* fix tests

* log error

* fix callback url

* add idp param

* fix test

* fix test

ui/src/components/ClaimRow.tsx

@@ -0,0 +1,31 @@
+import TableCell from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import { isArray, startCase } from "lodash";
+import React, { FC } from "react";
+
+import ClaimValue from "./ClaimValue";
+
+export type ClaimRowProps = {
+  claimKey: string;
+  claimValue: unknown;
+};
+export const ClaimRow: FC<ClaimRowProps> = ({ claimKey, claimValue }) => {
+  return (
+    <TableRow>
+      <TableCell variant="head">{startCase(claimKey)}</TableCell>
+      <TableCell align="left">
+        {isArray(claimValue) ? (
+          claimValue?.map((v, i) => (
+            <React.Fragment key={`${v}`}>
+              {i > 0 ? <br /> : <></>}
+              <ClaimValue claimKey={claimKey} claimValue={v} />
+            </React.Fragment>
+          ))
+        ) : (
+          <ClaimValue claimKey={claimKey} claimValue={claimValue} />
+        )}
+      </TableCell>
+    </TableRow>
+  );
+};
+export default ClaimRow;

ui/src/components/SessionDetails.tsx

@@ -1,6 +1,3 @@
-import { Session } from "../types";
-import IDField from "./IDField";
-import Section from "./Section";
 import Stack from "@mui/material/Stack";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -8,13 +5,20 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
 import React, { FC } from "react";
-import ClaimValue from "./ClaimValue";
-import {startCase} from "lodash";
+
+import { Profile, Session } from "../types";
+import ClaimRow from "./ClaimRow";
+import IDField from "./IDField";
+import Section from "./Section";
 
 export type SessionDetailsProps = {
   session: Session;
+  profile: Profile;
 };
-export const SessionDetails: FC<SessionDetailsProps> = ({ session }) => {
+export const SessionDetails: FC<SessionDetailsProps> = ({
+  session,
+  profile,
+}) => {
   return (
     <Section title="User Details">
       <Stack spacing={3}>
@@ -22,7 +26,9 @@ export const SessionDetails: FC<SessionDetailsProps> = ({ session }) => {
           <Table size="small">
             <TableBody>
               <TableRow>
-                <TableCell width={'18%'} variant="head">Session ID</TableCell>
+                <TableCell width={"18%"} variant="head">
+                  Session ID
+                </TableCell>
                 <TableCell align="left">
                   <IDField value={session?.id} />
                 </TableCell>
@@ -30,26 +36,28 @@ export const SessionDetails: FC<SessionDetailsProps> = ({ session }) => {
               <TableRow>
                 <TableCell variant="head">User ID</TableCell>
                 <TableCell align="left">
-                  <IDField value={session?.userId} />
+                  <IDField
+                    value={session?.userId || `${profile?.claims?.sub}`}
+                  />
                 </TableCell>
               </TableRow>
               <TableRow>
                 <TableCell variant="head">Expires At</TableCell>
                 <TableCell align="left">{session?.expiresAt || ""}</TableCell>
               </TableRow>
-              {Object.entries(session?.claims || {}).map(
-                ([key, values]) => (
-                <TableRow key={key}>
-                  <TableCell variant="head">{startCase(key)}</TableCell>
-                  <TableCell align="left">
-                    {values?.map((v, i) => (
-                      <React.Fragment key={`${v}`}>
-                        {i > 0 ? <br /> : <></>}
-                        <ClaimValue claimKey={key} claimValue={v} />
-                      </React.Fragment>
-                    ))}
-                  </TableCell>
-                </TableRow>
+              {Object.entries(session?.claims || {}).map(([key, values]) => (
+                <ClaimRow
+                  key={`session/${key}`}
+                  claimKey={key}
+                  claimValue={values}
+                />
+              ))}
+              {Object.entries(profile?.claims || {}).map(([key, value]) => (
+                <ClaimRow
+                  key={`profile/${key}`}
+                  claimKey={key}
+                  claimValue={value}
+                />
               ))}
             </TableBody>
           </Table>

ui/src/components/UserInfoPage.tsx

@@ -81,7 +81,9 @@ const UserInfoPage: FC<UserInfoPageProps> = ({ data }) => {
           marginLeft: mdUp ? "256px" : "0px",
         }}
       >
-        {subpage === "User" && <SessionDetails session={data?.session} />}
+        {subpage === "User" && (
+          <SessionDetails session={data?.session} profile={data?.profile} />
+        )}
 
         {subpage === "Groups Info" && (
           <GroupDetails