Migrate to Amplify v6

amits97 · Oct 27, 2024 · ef03ff3 · ef03ff3
1 parent ef0607f
commit ef03ff3
Show file tree

Hide file tree

Showing 22 changed files with 1,503 additions and 1,320 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "naadan-chords",
-  "version": "0.84.2",
+  "version": "0.84.3",
   "homepage": "https://www.naadanchords.com/",
   "private": true,
   "dependencies": {
@@ -13,7 +13,7 @@
     "ajv-errors": "^2.0.1",
     "ajv-formats": "^2.1.1",
     "ajv-keywords": "^4.0.1",
-    "aws-amplify": "^6.6.4",
+    "aws-amplify": "^6.6.7",
     "axios": "^1.7.5",
     "chord-fingering": "github:amits97/chord-fingering",
     "moment": "^2.29.4",

diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,13 @@
 import React, { Component } from "react";
 import { withRouter } from "react-router-dom";
-import { Auth, Hub } from "aws-amplify";
+import {
+  fetchAuthSession,
+  fetchUserAttributes,
+  getCurrentUser,
+  signInWithRedirect,
+  signOut,
+} from "aws-amplify/auth";
+import { Hub } from "aws-amplify/utils";
 import { Modal } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";
@@ -40,8 +47,8 @@ class App extends Component {
 
   getUserPrevileges = (session) => {
     return new Promise((resolve) => {
-      if (session && session.getIdToken) {
-        let sessionPayload = session.getIdToken().decodePayload();
+      if (session && session.tokens && session.tokens.idToken) {
+        let sessionPayload = session.tokens.idToken.payload;
         if (
           sessionPayload["cognito:groups"] &&
           sessionPayload["cognito:groups"].includes("admin")
@@ -65,61 +72,54 @@ class App extends Component {
     });
   };
 
-  getUserAttributes = (session) => {
-    return new Promise((resolve) => {
-      Auth.currentAuthenticatedUser({
-        bypassCache: true,
-      })
-        .then(async (user) => {
-          const currentUserInfo = await Auth.currentUserInfo();
-          this.setState(
-            {
-              userName: user.username,
-              name: user.attributes.name,
-              email: user.attributes.email,
-              identities: user.attributes.identities,
-              emailVerified: user.attributes.email_verified,
-              preferredUsername: user.attributes.preferred_username,
-              picture: user.attributes.picture,
-              userTheme: currentUserInfo.attributes["custom:theme"] ?? "auto",
-            },
-            () => {
-              this.setWebsiteTheme();
-            }
-          );
-          await this.getUserPrevileges(session);
-          resolve();
-        })
-        .catch((err) => {
-          console.log(err);
-          resolve();
-        });
-    });
+  getUserAttributes = async (session) => {
+    try {
+      const { username } = await getCurrentUser();
+      const userAttributes = await fetchUserAttributes();
+      this.setState(
+        {
+          userName: username,
+          name: userAttributes.name,
+          email: userAttributes.email,
+          identities: userAttributes.identities,
+          emailVerified: userAttributes.email_verified === "true",
+          preferredUsername: userAttributes.preferred_username,
+          picture: userAttributes.picture,
+          userTheme: userAttributes["custom:theme"] ?? "auto",
+        },
+        () => {
+          this.setWebsiteTheme();
+        }
+      );
+      await this.getUserPrevileges(session);
+    } catch (e) {
+      // Non logged in user. Do nothing
+    }
   };
 
   getUserDetails = async (session) => {
-    Auth.currentAuthenticatedUser({
-      bypassCache: true,
-    })
-      .then(async (user) => {
-        const currentUserInfo = await Auth.currentUserInfo();
-        this.setState(
-          {
-            userName: user.username,
-            preferredUsername: user.attributes.preferred_username,
-            picture: user.attributes.picture,
-            name: user.attributes.name,
-            email: user.attributes.email,
-            userTheme: currentUserInfo.attributes["custom:theme"] ?? "auto",
-          },
-          () => {
-            this.setWebsiteTheme();
-          }
-        );
-
-        await this.getUserPrevileges(session);
-      })
-      .catch((err) => console.log(err));
+    try {
+      const { username } = await getCurrentUser();
+      const userAttributes = await fetchUserAttributes();
+      this.setState(
+        {
+          userName: username,
+          preferredUsername: userAttributes.preferred_username,
+          picture: userAttributes.picture,
+          name: userAttributes.name,
+          email: userAttributes.email,
+          userTheme: userAttributes["custom:theme"] ?? "auto",
+        },
+        () => {
+          this.setWebsiteTheme();
+        }
+      );
+      await this.getUserPrevileges(session);
+      return true;
+    } catch (e) {
+      // Non logged in user
+      return false;
+    }
   };
 
   setWebsiteTheme = () => {
@@ -139,7 +139,7 @@ class App extends Component {
 
     if (loginError.indexOf("Already found an entry for username") !== -1) {
       // TODO: Known issue with Cognito merging accounts. Ugly! Clean up if possible.
-      Auth.federatedSignIn({ provider: "Facebook" });
+      signInWithRedirect({ provider: "Facebook" });
     }
 
     if (loginError.indexOf("attributes required: [email]") !== -1) {
@@ -151,9 +151,11 @@ class App extends Component {
 
     try {
       this.setWebsiteTheme();
-      let session = await Auth.currentSession();
+      let session = await fetchAuthSession();
+      if (session.tokens) {
+        this.userHasAuthenticated(true);
+      }
       this.getUserDetails(session);
-      this.userHasAuthenticated(true);
     } catch (e) {
       this.setWebsiteTheme();
       if (e !== "No current user") {
@@ -183,9 +185,11 @@ class App extends Component {
     const listener = async (data) => {
       switch (data.payload.event) {
         case "signIn":
-          let session = await Auth.currentSession();
-          await this.getUserDetails(session);
-          this.userHasAuthenticated(true);
+          let session = await fetchAuthSession();
+          if (session.tokens) {
+            this.userHasAuthenticated(true);
+          }
+          this.getUserDetails(session);
           break;
         default:
           break;
@@ -203,7 +207,7 @@ class App extends Component {
     if (event) {
       event.preventDefault();
     }
-    await Auth.signOut();
+    await signOut();
 
     this.userHasAuthenticated(false);
     this.setState(

diff --git a/src/Header.js b/src/Header.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { LinkContainer } from "react-router-bootstrap";
-import { API } from "aws-amplify";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Navbar, Nav, Form, NavDropdown } from "react-bootstrap";
 import {
@@ -14,7 +13,7 @@ import {
   faPowerOff,
 } from "@fortawesome/free-solid-svg-icons";
 import { AsyncTypeahead } from "react-bootstrap-typeahead";
-import { slugify } from "./libs/utils";
+import { API, slugify } from "./libs/utils";
 import * as urlLib from "./libs/url-lib";
 import logo from "./logo.svg";
 

diff --git a/src/components/GlobalStyles.js b/src/components/GlobalStyles.js
@@ -130,7 +130,7 @@ export const GlobalStyles = createGlobalStyle`
     color: ${({ theme }) => theme.textMuted} !important;
   }
 
-  a.text-primary {
+  a.text-primary, button.text-primary {
     color: ${({ theme }) => theme.linkPrimary} !important;
 
     &:hover {

diff --git a/src/containers/Content.js b/src/containers/Content.js
@@ -15,7 +15,6 @@ import ReactGA from "react-ga4";
 import Moment from "react-moment";
 import ReactMarkdown from "react-markdown";
 import config from "../config";
-import { API } from "aws-amplify";
 import StarRatings from "react-star-ratings";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -24,7 +23,7 @@ import {
   faUserCircle,
   faCommentAlt,
 } from "@fortawesome/free-solid-svg-icons";
-import { slugify, capitalizeFirstLetter } from "../libs/utils";
+import { slugify, capitalizeFirstLetter, API } from "../libs/utils";
 import Sidebar from "./Sidebar";
 import NotFound from "./NotFound";
 import ContentParser from "./ContentParser";
@@ -72,7 +71,7 @@ export default class Content extends Component {
     if (
       !this.props.isLoading &&
       !Array.isArray(this.props.posts) &&
-      this.props.posts.postId !== prevProps.posts.postId
+      this.props.posts?.postId !== prevProps.posts?.postId
     ) {
       if (this.props.isAuthenticated) {
         await this.getRating();

diff --git a/src/containers/Login.js b/src/containers/Login.js
@@ -8,7 +8,12 @@ import {
   Button,
 } from "react-bootstrap";
 import { Helmet } from "react-helmet";
-import { Auth } from "aws-amplify";
+import {
+  confirmSignIn,
+  fetchAuthSession,
+  signIn,
+  signInWithRedirect,
+} from "aws-amplify/auth";
 import { LinkContainer } from "react-router-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFacebook } from "@fortawesome/free-brands-svg-icons";
@@ -71,9 +76,13 @@ export default class Login extends SearchComponent {
     this.setState({ isLoading: true });
 
     try {
-      await Auth.signIn(this.state.email, this.state.password);
-      let session = await Auth.currentSession();
+      await signIn({
+        username: this.state.email,
+        password: this.state.password,
+      });
+      let session = await fetchAuthSession();
       await this.props.getUserPrevileges(session);
+      await this.props.getUserAttributes(session);
       this.props.userHasAuthenticated(true);
 
       if (this.props.isDialog) {
@@ -90,7 +99,7 @@ export default class Login extends SearchComponent {
   };
 
   handleSocialLogin = (provider) => {
-    Auth.federatedSignIn({ provider });
+    signInWithRedirect({ provider });
   };
 
   renderError = () => {
@@ -130,10 +139,10 @@ export default class Login extends SearchComponent {
       this.setState({ isLoading: true });
 
       if (OTPSent) {
-        await Auth.sendCustomChallengeAnswer(this.state.cognitoUser, code);
+        await confirmSignIn({ challengeResponse: code });
         try {
           // This will throw an error if the user is not yet authenticated:
-          let session = await Auth.currentSession();
+          let session = await fetchAuthSession();
           await this.props.getUserPrevileges(session);
           this.props.userHasAuthenticated(true);
           if (this.props.isDialog) {
@@ -153,7 +162,12 @@ export default class Login extends SearchComponent {
       } else {
         try {
           let cognitoUser;
-          cognitoUser = await Auth.signIn(this.state.email);
+          cognitoUser = await signIn({
+            username: this.state.email,
+            options: {
+              authFlowType: "CUSTOM_WITHOUT_SRP",
+            },
+          });
           this.setState({ OTPSent: true, cognitoUser });
         } catch (e) {
           this.setState({
@@ -278,24 +292,20 @@ export default class Login extends SearchComponent {
             type="button"
             text="Login with OTP"
             loadingText="Logging in…"
-            isLoading={this.state.isLoading}
+            isLoading={this.state.isOTPFlow && this.state.isLoading}
             disabled={!this.validateOTPForm()}
             onClick={this.handleLoginWithOTP}
           />
           {isOTPFlow && (
             <>
-              <div className="login-divider-container my-4">
-                <hr className="login-divider" />
-                <Styles.LoginDividerText className="text-muted">
-                  OR
-                </Styles.LoginDividerText>
-              </div>
               <Button
                 block
                 type="button"
+                variant="link"
+                className="text-primary"
                 onClick={() => this.setState({ isOTPFlow: false })}
               >
-                Login with password
+                Cancel
               </Button>
             </>
           )}

diff --git a/src/containers/Posts.js b/src/containers/Posts.js
@@ -1,9 +1,8 @@
 import React, { Component } from "react";
-import { API } from "aws-amplify";
 import { Helmet } from "react-helmet";
 import ReactGA from "react-ga4";
 import * as urlLib from "../libs/url-lib";
-import { slugify, capitalizeFirstLetter } from "../libs/utils";
+import { slugify, capitalizeFirstLetter, API } from "../libs/utils";
 import Content from "./Content";
 import config from "../config";
 

diff --git a/src/containers/Request.js b/src/containers/Request.js
@@ -10,7 +10,8 @@ import {
   Button,
 } from "react-bootstrap";
 import { Helmet } from "react-helmet";
-import { API, Auth } from "aws-amplify";
+import { fetchAuthSession } from "aws-amplify/auth";
+import { API } from "../libs/utils";
 import LoaderButton from "../components/LoaderButton";
 import SearchComponent from "../components/SearchComponent";
 import Sidebar from "./Sidebar";
@@ -75,7 +76,7 @@ export default class Request extends SearchComponent {
 
   async componentDidMount() {
     try {
-      let session = await Auth.currentSession();
+      let session = await fetchAuthSession();
       this.props.userHasAuthenticated(true);
       await this.props.getUserAttributes(session);
       this.setState({