Merge pull request #101 from ChrisFajardo-TRI/web-ui-uses-cognito-hos…

…ted-ui

add cognitohosted UI

web/frontend/src/App.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import Header from './components/Header';
 import Footer from './components/Footer';
-import AmplifySetup from './components/AmplifySetup';
+import CognitoProvider from './CognitoHosted';
 
 const queryClient = new QueryClient();
 const Home = lazy(() => import('./pages/Home/Home'));
@@ -12,7 +12,7 @@ const About = lazy(() => import('./pages/About/About'));
 const App = () => (
     <QueryClientProvider client={queryClient}>
         <Router>
-            <AmplifySetup>
+            <CognitoProvider>
                 <div className="app">
                     <Header />
                         <Suspense fallback={<div>Loading...</div>}>
@@ -23,7 +23,7 @@ const App = () => (
                         </Suspense>
                     <Footer />
                 </div>
-            </AmplifySetup>
+            </CognitoProvider>
         </Router>
     </QueryClientProvider>
 );

web/frontend/src/CognitoHosted.tsx

@@ -0,0 +1,86 @@
+import { Amplify, Auth, Hub } from 'aws-amplify';
+import styles from './login.module.css';
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+Amplify.configure(AWS_CONFIG);
+
+type UserAuthProps = {
+    token: string;
+    userEmail: string;
+    signOut: () => void;
+};
+
+const UserAuthContext = createContext({} as UserAuthProps);
+
+// @ts-ignore
+export default function CognitoProvider({ children }) {
+    const [token, setToken] = useState('');
+    const [userEmail, setUserEmail] = useState('[email protected]');
+    const signOut = useCallback(() => {
+        Auth.signOut().catch((error) => console.log(error));
+    }, []);
+
+    useEffect(() => {
+        const unsubscribe = Hub.listen('auth', ({ payload: { event, data } }) => {
+            switch (event) {
+                case 'signIn':
+                case 'cognitoHostedUI':
+                    setToken(data.signInUserSession.idToken.jwtToken);
+                    setUserEmail(data.signInUserSession.idToken.payload.email);
+                    break;
+                case 'signIn_failure':
+                case 'cognitoHostedUI_failure':
+                    console.log('Error', data);
+                    break;
+            }
+        });
+
+        // fetch the jwt token for use of api calls later
+        Auth.currentAuthenticatedUser()
+            .then((currentUser) => {
+                setToken(currentUser.signInUserSession.idToken.jwtToken);
+                setUserEmail(currentUser.signInUserSession.idToken.payload.email);
+            })
+            .catch(() => console.log('Not signed in'));
+
+        return unsubscribe;
+    }, []);
+
+    const value = useMemo(
+        () => ({
+            token,
+            userEmail,
+            signOut
+        }),
+        [token, userEmail, signOut]
+    );
+
+    if (!AMPLIFY_ENABLED) {
+        return <>{children}</>;
+    }
+
+    // the Phase Mapper app needs a token to work, show the login screen
+    if (token === '') {
+        return (
+            <div className={styles.app}>
+                You have to login to use Synthesis App (Piro).
+                <button className={styles.login} onClick={() => Auth.federatedSignIn()}>
+                    Login
+                </button>
+            </div>
+        );
+    }
+
+    return <UserAuthContext.Provider value={value}>{children}</UserAuthContext.Provider>;
+}
+
+function useUserAuthContext() {
+    const context = useContext(UserAuthContext);
+    if (context === undefined) {
+        throw new Error('useUserAuth must be used within a UserAuthProvider');
+    }
+    return context;
+}
+
+export { useUserAuthContext };

web/frontend/src/login.module.css

@@ -0,0 +1,7 @@
+.app {
+    padding: 1em;
+}
+.login {
+    margin-top: 1em;
+    display: block;
+}