CCM-5100: Fetch and display id token payload on status page

NHSDigital · Jul 2, 2024 · 44a6ae3 · 44a6ae3
1 parent ae7793b
commit 44a6ae3
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 15 deletions.
diff --git a/app/signout/page.tsx b/app/signout/page.tsx
@@ -5,14 +5,14 @@ import { redirect } from 'next/navigation';
 
 export default async function Page() {
 
-  const { currentUser, attributes } = await AuthGetCurrentUserServer() ?? {};
+  const { currentUser, idToken } = await AuthGetCurrentUserServer() ?? {};
   if (!currentUser) {
     redirect('/');
   }
 
   return <>
     <h1>Sign out</h1>
-    <p>You are currently logged in as <strong>{attributes?.email}</strong></p>
+    <p>You are currently logged in as <strong>{idToken?.email?.toString()}</strong></p>
     <Logout />
   </>
 }
diff --git a/app/status/page.tsx b/app/status/page.tsx
@@ -5,15 +5,15 @@ export default async function Page({ searchParams }: {
   searchParams: { [key: string]: string | string[] | undefined }
 }) {
 
-  const { currentUser, attributes } = await AuthGetCurrentUserServer() ?? {};
+  const { currentUser, idToken } = await AuthGetCurrentUserServer() ?? {};
   const redirectPath = [searchParams.redirect].flat().pop() || '/';
 
   return <>
     <h1>Hello {currentUser?.username}</h1>
     <h2>Login details</h2>
-    <pre>{JSON.stringify(currentUser?.signInDetails, null, '  ')}</pre>
-    <h2>Attributes</h2>
-    <pre>{JSON.stringify(attributes, null, '  ')}</pre>
+    <pre>{JSON.stringify(currentUser, null, '  ')}</pre>
+    <h2>Identity details</h2>
+    <pre>{JSON.stringify(idToken, null, '  ')}</pre>
     <h2>Redirect details</h2>
     <pre>{JSON.stringify({ redirectPath })}</pre>
   </>

diff --git a/components/LoginStatus.tsx b/components/LoginStatus.tsx
@@ -1,16 +1,29 @@
 'use client';
 
 import { Header } from 'nhsuk-react-components';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAuthenticator } from '@aws-amplify/ui-react';
+import { fetchAuthSession } from 'aws-amplify/auth';
+import { JwtPayload } from 'aws-jwt-verify/jwt-model';
 
 export default function LoginStatus() {
   const { authStatus } = useAuthenticator();
+  const [idToken, setIdToken] = useState<JwtPayload | undefined>();
+  useEffect(() => {
+    (async () => {
+      const session = await fetchAuthSession();
+      setIdToken(session.tokens?.idToken?.payload)
+    })().catch(console.error);
+  }, [authStatus]);
+
   switch (authStatus) {
     case 'authenticated':
-      return <Header.NavItem href="/auth/signout">
-        Sign out
-      </Header.NavItem>;
+      return [
+        <Header.ServiceName>{idToken?.email?.toString() || ''}</Header.ServiceName>,
+        <Header.NavItem href="/auth/signout">
+          Sign out
+        </Header.NavItem>
+      ];
     case 'unauthenticated':
       return <Header.NavItem href={`/auth/?redirect=${location.pathname}`}>
         Sign in

diff --git a/utils/amplify-utils.ts b/utils/amplify-utils.ts
@@ -16,11 +16,10 @@ export async function AuthGetCurrentUserServer() {
         const currentUser = await getCurrentUser(contextSpec);
         console.log({ currentUser });
 
-        // const session = await fetchAuthSession(contextSpec);
-        // console.log({ session })
-        const attributes = await fetchUserAttributes(contextSpec);
-        console.log({ attributes });
-        return { currentUser, attributes };
+        const session = await fetchAuthSession(contextSpec);
+        const idToken = session.tokens?.idToken?.payload;
+        console.log({ idToken })
+        return { currentUser, idToken };
       }
     });
   } catch (error) {