CCM-5100: Improved handling of redirects

NHSDigital · Jul 1, 2024 · eca8101 · eca8101
1 parent b2bc791
commit eca8101
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 96 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,75 +1,34 @@
 'use client';
 
-import ConfigureAmplifyClientSide from '../components/ConfigureAmplify';
-
 import React from 'react';
-import { Authenticator, Heading, useTheme } from '@aws-amplify/ui-react';
+import { Authenticator } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 import { Col, Container, Footer, Header, Row } from 'nhsuk-react-components';
 
+import ConfigureAmplifyClientSide from '../components/ConfigureAmplify';
+import LoginStatus from '../components/LoginStatus';
+
 import 'nhsuk-frontend/dist/nhsuk.css';
 import './styles.css';
-import Logout from '../components/Logout';
-import { signInWithRedirect } from '@aws-amplify/auth';
-import { Amplify } from 'aws-amplify';
-
-export default function RootLayout({
-                                     children,
-                                   }: {
-  children: React.ReactNode
-}) {
-
-  async function auth0Login() {
-    console.log(Amplify.getConfig());
-    await signInWithRedirect({
-      provider: {
-        custom: 'Auth0'
-      }
-    })
-  }
-
-  const components = {
-    SignIn: {
-      Header() {
-        const { tokens } = useTheme();
-
-        return (<>
-            <Heading
-              padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
-              level={3}
-            >
-              Sign in to your account
-            </Heading>
-            <button onClick={auth0Login}>Log in with Auth0</button>
-          </>
-        );
-      }
-    }
-  };
 
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
     <body>
     <Authenticator.Provider>
       <ConfigureAmplifyClientSide />
-      <Header transactional>
+      <Header serviceName="Notify">
         <Header.Container>
           <Header.Logo href="/" />
-          <Header.ServiceName href="/">
-            Notify
-          </Header.ServiceName>
           <Header.Content>
-            <Logout />
+            <LoginStatus />
           </Header.Content>
         </Header.Container>
         <Header.Nav>
           {/*<Header.NavItem href="/conditions">*/}
           {/*  Health A-Z*/}
           {/*</Header.NavItem>*/}
-          <Header.NavItem
-            home
-            href="/"
-          >
+          <Header.NavItem home href="/">
             Home
           </Header.NavItem>
           <Header.NavDropdownMenu />
@@ -79,9 +38,7 @@ export default function RootLayout({
         <main className="nhsuk-main-wrapper" id="maincontent" role="main">
           <Row>
             <Col width="full">
-              <Authenticator hideSignUp components={components}>
-                {children}
-              </Authenticator>
+              {children}
             </Col>
           </Row>
         </main>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,16 +1,36 @@
-import React from 'react';
-import Redirect from '../components/Redirect';
+'use client';
 
-export default async function Page({ searchParams }: {
+import React, { useEffect, useState } from 'react';
+import { Hub } from '@aws-amplify/core';
+import Login from '../components/Login';
+
+export default function Page({ searchParams }: {
   searchParams: { [key: string]: string | string[] | undefined }
 }) {
 
-  const redirectPath = [searchParams.redirect].flat().pop() || '/';
-  if (!redirectPath.match(/^\/[a-z/]*$/)) {
+  const [redirect, setRedirect] = useState<string | undefined>();
+
+  useEffect(() => {
+    return Hub.listen('auth', ({ payload }) => {
+      switch (payload.event) {
+        case 'customOAuthState':
+          try {
+            const { redirectPath } = JSON.parse(payload.data);
+            setRedirect(redirectPath);
+          } catch (err) {
+            console.error(err);
+            setRedirect('Invalid redirect path');
+          }
+          break;
+      }
+    });
+  }, []);
+
+  let redirectPath = redirect || [searchParams.redirect].flat().pop() || '/';
+  if (redirectPath === '/auth') redirectPath = '/';
+  if (redirectPath && !redirectPath.match(/^\/[a-z/]*$/)) {
     return <h2>Invalid redirect path</h2>;
   }
 
-  return <>
-    <Redirect path={redirectPath} />
-  </>
+  return <Login redirectPath={redirectPath} />
 }
diff --git a/app/signout/page.tsx b/app/signout/page.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { AuthGetCurrentUserServer } from '../../utils/amplify-utils';
+import Logout from '../../components/Logout';
+import { redirect } from 'next/navigation';
+
+export default async function Page() {
+
+  const { currentUser, attributes } = await AuthGetCurrentUserServer() ?? {};
+  if (!currentUser) {
+    redirect('/');
+  }
+
+  return <>
+    <h1>Sign out</h1>
+    <p>You are currently logged in as <strong>{attributes?.email}</strong></p>
+    <Logout />
+  </>
+}
diff --git a/app/status/page.tsx b/app/status/page.tsx
@@ -5,12 +5,7 @@ export default async function Page({ searchParams }: {
   searchParams: { [key: string]: string | string[] | undefined }
 }) {
 
-  // Client side user lookup
-  // const { user, signOut } = useAuthenticator((context) => [context.user]);
-
-  // Server side lookup
   const { currentUser, attributes } = await AuthGetCurrentUserServer() ?? {};
-
   const redirectPath = [searchParams.redirect].flat().pop() || '/';
 
   return <>

diff --git a/app/styles.css b/app/styles.css
@@ -2,3 +2,12 @@
   flex-grow: 100;
   text-align: right;
 }
+
+div.nhsuk-header__content > li.nhsuk-header__navigation-item {
+  list-style: none;
+}
+
+div.nhsuk-header__content > li.nhsuk-header__navigation-item > a {
+  padding: 0;
+  display: inline-block;
+}
diff --git a/components/Login.tsx b/components/Login.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { Heading, useTheme, withAuthenticator } from '@aws-amplify/ui-react';
+import { AuthUser } from 'aws-amplify/auth';
+import React, { useEffect } from 'react';
+import { Amplify } from 'aws-amplify';
+import { signInWithRedirect } from '@aws-amplify/auth';
+import { Button } from 'nhsuk-react-components';
+import {
+  DefaultComponents
+} from '@aws-amplify/ui-react/dist/types/components/Authenticator/hooks/useCustomComponents/defaultComponents';
+
+function auth0Login(redirectPath: string) {
+  console.log(Amplify.getConfig());
+  signInWithRedirect({
+    provider: {
+      custom: 'Auth0'
+    },
+    customState: JSON.stringify({ redirectPath })
+  }).catch(console.error);
+}
+
+function components(redirectPath: string): DefaultComponents {
+  return {
+
+    SignIn: {
+      Header() {
+        const { tokens } = useTheme();
+
+        return (<>
+            <Heading
+              padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
+              level={3}
+            >
+              Sign in to your account
+            </Heading>
+            <div className="login-oidc"
+                 style={{
+                   position: 'relative',
+                   padding: `${tokens.space.xl} ${tokens.space.xl} 0 ${tokens.space.xl}` }}>
+              <Button
+                className="login-oidc__button"
+                style={{width: '100%'}}
+                onClick={() => auth0Login(redirectPath)}>Log in with Auth0</Button>
+            </div>
+            <div style={{textAlign:'center'}}>
+              or
+            </div>
+          </>
+        );
+      }
+    }
+  }
+};
+
+function Login({ user, redirectPath }: { user?: AuthUser, redirectPath?: string }) {
+  useEffect(() => {
+    if (user && redirectPath) {
+      location.href = redirectPath;
+    }
+  }, [user, redirectPath]);
+  if (redirectPath && user) {
+    return <h3>Redirecting to <code><a href={redirectPath}>{redirectPath}</a></code></h3>;
+  }
+  return null;
+}
+
+export default (props: { redirectPath?: string; user?: AuthUser }) => {
+  const { redirectPath } = props;
+  return withAuthenticator(Login, {
+    variation: 'default',
+    hideSignUp: true,
+    components: components(redirectPath || '/')
+  })(props);
+};
diff --git a/components/LoginStatus.tsx b/components/LoginStatus.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { Header } from 'nhsuk-react-components';
+import React from 'react';
+import { useAuthenticator } from '@aws-amplify/ui-react';
+
+export default function LoginStatus() {
+  const { authStatus } = useAuthenticator();
+  switch (authStatus) {
+    case 'authenticated':
+      return <Header.NavItem href="/auth/signout">
+        Sign out
+      </Header.NavItem>;
+    case 'unauthenticated':
+      return <Header.NavItem href={`/auth/?redirect=${location.pathname}`}>
+        Sign in
+      </Header.NavItem>;
+    default:
+      return null;
+  }
+}
diff --git a/components/Logout.tsx b/components/Logout.tsx
@@ -1,23 +1,15 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
 import { useAuthenticator } from '@aws-amplify/ui-react';
+import { Button } from 'nhsuk-react-components';
 
 export default function Logout() {
-  const router = useRouter();
-  const { user, signOut } = useAuthenticator();
+  const { authStatus, signOut } = useAuthenticator();
 
   async function handleSignOut() {
     signOut();
     location.href = '/';
   }
 
-  return user ? (
-    <button
-      onClick={handleSignOut}
-      className="px-2 bg-white text-black"
-    >
-      Sign out
-    </button>
-  ) : [];
+  return <Button onClick={handleSignOut}>Sign out</Button>;
 }
diff --git a/components/Redirect.tsx b/components/Redirect.tsx