getting cognito to compile

cypress-io · Jul 12, 2023 · 3f61ccd · 3f61ccd
1 parent 7f9e394
commit 3f61ccd
Show file tree

Hide file tree

Showing 7 changed files with 938 additions and 353 deletions.
diff --git a/README.md b/README.md
@@ -137,11 +137,12 @@ yarn cypress:open
 
 ## Tests
 
-| Type | Location                                 |
-| ---- | ---------------------------------------- |
-| api  | [cypress/tests/api](./cypress/tests/api) |
-| ui   | [cypress/tests/ui](./cypress/tests/ui)   |
-| unit | [`src/__tests__`](./src/__tests__)       |
+| Type      | Location                                 |
+| --------- | ---------------------------------------- |
+| api       | [cypress/tests/api](./cypress/tests/api) |
+| ui        | [cypress/tests/ui](./cypress/tests/ui)   |
+| component | [src/(next to component)](./src)         |
+| unit      | [`src/__tests__`](./src/__tests__)       |
 
 ## Database
 

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -25,6 +25,14 @@
   </head>
   <body>
     <div id="root"></div>
+    <!-- to get aws amplify to work with vite -->
+    <script>
+      window.global = window;
+      window.process = {
+        env: { DEBUG: undefined },
+      };
+      var exports = {};
+    </script>
     <script type="module" src="/src/index.tsx"></script>
     <!--
       This HTML file is a template.

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "2.1.1",
-    "@aws-amplify/ui-react": "1.2.26",
+    "@aws-amplify/ui-react": "^5.0.4",
     "@graphql-tools/graphql-file-loader": "7.3.10",
     "@graphql-tools/load": "7.5.9",
     "@material-ui/core": "4.12.4",
@@ -24,7 +24,7 @@
     "@okta/okta-react": "^6.7.0",
     "@types/detect-port": "^1.3.2",
     "@xstate/react": "2.0.1",
-    "aws-amplify": "4.3.46",
+    "aws-amplify": "^5.3.3",
     "axios": "0.26.1",
     "clsx": "1.1.1",
     "date-fns": "2.28.0",

diff --git a/src/containers/AppCognito.tsx b/src/containers/AppCognito.tsx
@@ -9,9 +9,8 @@ import { authService } from "../machines/authMachine";
 import AlertBar from "../components/AlertBar";
 import { bankAccountsMachine } from "../machines/bankAccountsMachine";
 import PrivateRoutesContainer from "./PrivateRoutesContainer";
-import { Amplify, Auth } from "aws-amplify";
-import { AmplifyAuthenticator, AmplifySignUp, AmplifySignIn } from "@aws-amplify/ui-react";
-import { AuthState, onAuthUIStateChange } from "@aws-amplify/ui-components";
+import { Amplify } from "aws-amplify";
+import { Authenticator, useAuthenticator } from "@aws-amplify/ui-react";
 
 // @ts-ignore
 import awsConfig from "../aws-exports";
@@ -40,23 +39,32 @@ const AppCognito: React.FC = /* istanbul ignore next */ () => {
 
   const [, , bankAccountsService] = useMachine(bankAccountsMachine);
 
+  // useEffect(() => {
+  //   return onAuthUIStateChange((nextAuthState, authData) => {
+  //     console.log("authData: ", authData);
+  //     if (nextAuthState === AuthState.SignedIn) {
+  //       authService.send("COGNITO", { user: authData });
+  //     }
+  //   });
+  // }, []);
+
+  const { route, signOut, user } = useAuthenticator();
+
   useEffect(() => {
-    return onAuthUIStateChange((nextAuthState, authData) => {
-      console.log("authData: ", authData);
-      if (nextAuthState === AuthState.SignedIn) {
-        authService.send("COGNITO", { user: authData });
-      }
-    });
-  }, []);
+    console.log("auth route: ", route);
+    if (route === "authenticated") {
+      authService.send("COGNITO", { user });
+    }
+  }, [route, user]);
 
   useEffect(() => {
     authService.onEvent(async (event) => {
       if (event.type === "done.invoke.performLogout") {
         console.log("AppCognito authService.onEvent done.invoke.performLogout");
-        await Auth.signOut();
+        await signOut();
       }
     });
-  }, []);
+  }, [signOut]);
 
   const isLoggedIn =
     authState.matches("authorized") ||
@@ -80,10 +88,14 @@ const AppCognito: React.FC = /* istanbul ignore next */ () => {
   ) : (
     <Container component="main" maxWidth="xs">
       <CssBaseline />
-      <AmplifyAuthenticator usernameAlias="email">
-        <AmplifySignUp slot="sign-up" usernameAlias="email" />
-        <AmplifySignIn slot="sign-in" usernameAlias="email" />
-      </AmplifyAuthenticator>
+      <Authenticator>
+        {({ signOut, user }) => (
+          <main>
+            <h1>Hello {user?.username}</h1>
+            <button onClick={signOut}>Sign out</button>
+          </main>
+        )}
+      </Authenticator>
     </Container>
   );
 };

diff --git a/src/index.tsx b/src/index.tsx
@@ -12,7 +12,7 @@ import App from "./containers/App";
 import AppGoogle from "./containers/AppGoogle";
 import AppAuth0 from "./containers/AppAuth0";
 import AppOkta from "./containers/AppOkta";
-// import AppCognito from "./containers/AppCognito";
+import AppCognito from "./containers/AppCognito";
 import { history } from "./utils/historyUtils";
 
 const theme = createTheme({
@@ -65,15 +65,15 @@ if (process.env.VITE_APP_AUTH0) {
       </ThemeProvider>
     </Router>
   );
-  // } else if (process.env.VITE_APP_AWS_COGNITO) {
-  //   //   /* istanbul ignore next */
-  //   root.render(
-  //     <Router history={history}>
-  //       <ThemeProvider theme={theme}>
-  //         <AppCognito />
-  //       </ThemeProvider>
-  //     </Router>
-  //   );
+} else if (process.env.VITE_APP_AWS_COGNITO) {
+  /* istanbul ignore next */
+  root.render(
+    <Router history={history}>
+      <ThemeProvider theme={theme}>
+        <AppCognito />
+      </ThemeProvider>
+    </Router>
+  );
 } else if (process.env.VITE_APP_GOOGLE) {
   /* istanbul ignore next */
   root.render(

diff --git a/vite.config.ts b/vite.config.ts
@@ -27,6 +27,15 @@ export default defineConfig(({ command, mode }) => {
         forceBuildInstrument: true,
       }),
     ],
+    // to get aws amplify to work with vite
+    resolve: {
+      alias: [
+        {
+          find: "./runtimeConfig",
+          replacement: "./runtimeConfig.browser", // ensures browser compatible version of AWS JS SDK is used
+        },
+      ],
+    },
     test: {
       environment: "jsdom",
       setupFiles: "./src/setup-tests.js",