#630 - Replace auth0 based login with the topcoders own login

Author: callmekatootie

client/package-lock.json

@@ -3,26 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@auth0/auth0-spa-js": "^1.9.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "@topcoder-platform/tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.1",
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "form-data": "^3.0.0",
     "history": "^4.10.1",
     "husky": "^4.2.5",
     "js-cookies": "^1.0.4",
     "lint-staged": "^10.2.6",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.20",
     "node-sass": "^4.14.1",
     "prettier": "^2.0.5",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-autosuggest": "^10.0.2",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^3.4.3",
     "regenerator-runtime": "^0.13.5"
   },
   "lint-staged": {

client/package.json

@@ -4,16 +4,45 @@
 
 import React from "react";
 import { Router, Route, Switch } from "react-router-dom";
+import {
+  configureConnector,
+  getFreshToken,
+} from "@topcoder-platform/tc-auth-lib";
 
 import Error404 from "./pages/Error404";
 import SearchPage from "./pages/Search";
 
-import { useAuth0 } from "./react-auth0-spa";
 import history from "./lib/history";
 import loader from "./assets/images/loading.svg";
+import config from "./config";
+
+configureConnector({
+  connectorUrl: config.AUTH.ACCOUNTS_APP_CONNECTOR,
+  frameId: "tc-accounts-iframe",
+});
 
 export default function AppRouter() {
-  const { loading } = useAuth0();
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    if (!loading) {
+      return;
+    }
+
+    (async () => {
+      try {
+        await getFreshToken();
+
+        setLoading(false);
+      } catch (error) {
+        console.log("Error in router");
+        console.log(error);
+        let url = `retUrl=${encodeURIComponent(config.AUTH.APP_URL)}`;
+        url = `${config.AUTH.TC_AUTH_URL}?${url}`;
+        window.location.href = url;
+      }
+    })();
+  }, [loading]);
 
   if (loading) {
     return (

client/src/Router.jsx

@@ -7,7 +7,6 @@ import Group from "./Group";
 import Modal from "../Modal";
 import { ReactComponent as ZoomIcon } from "../../assets/images/zoom-icon.svg";
 import api from "../../services/api";
-import { useAuth0 } from "../../react-auth0-spa";
 import * as groupLib from "../../lib/groups";
 
 import style from "./style.module.scss";
@@ -17,7 +16,6 @@ import { getNickname } from "../../lib/common";
 export default function AddToGroupModal({ onCancel, updateUser, user }) {
   const apiClient = api();
   const [loadingGroups, setIsLoadingGroups] = React.useState(true);
-  const { isLoading, isAuthenticated, user: auth0User } = useAuth0();
   const [myGroups, setMyGroups] = React.useState([]);
   const [otherGroups, setOtherGroups] = React.useState([]);
   const [filter, setFilter] = React.useState("");
@@ -36,14 +34,11 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
   });
 
   React.useEffect(() => {
-    if (isLoading || !isAuthenticated) {
-      return;
-    }
-
     (async () => {
+      const nickname = await getNickname();
       const groups = await groupLib.getGroups(
         apiClient,
-        getNickname(auth0User),
+        nickname,
         cancelTokenSource.token
       );
 
@@ -70,7 +65,7 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading, isAuthenticated, auth0User]);
+  }, []);
 
   const switchSelected = async (toggledGroup) => {
     let updatedGroup;

client/src/components/AddToGroupModal/index.jsx

@@ -8,7 +8,7 @@ import { ReactComponent as GroupsTabIcon } from "../../assets/images/groups-tab-
 import { ReactComponent as UploadsTabIcon } from "../../assets/images/uploads-tab-icon.svg";
 import { ReactComponent as ZoomIcon } from "../../assets/images/zoom-icon.svg";
 
-import { useAuth0 } from "../../react-auth0-spa";
+import config from "../../config";
 import { clearOrg } from "../../services/user-org";
 
 import style from "./style.module.scss";
@@ -30,8 +30,17 @@ export default function Header({
   const searchContext = useSearch();
   const [searchText, setSearchText] = React.useState("");
   const [showAccountDropdown, setShowAccountDropdown] = React.useState(false);
+  const [nickname, setNickname] = React.useState("");
 
   const profileDropdownEl = React.useRef(null);
+  React.useEffect(() => {
+    (async () => {
+      const n = await getNickname();
+
+      setNickname(n);
+    })();
+  });
+
   React.useEffect(() => {
     if (showAccountDropdown) {
       profileDropdownEl.current.focus();
@@ -49,21 +58,14 @@ export default function Header({
     onSearch && onSearch(value.trim());
   };
 
-  const { user, isAuthenticated, loginWithRedirect, logout } = useAuth0();
-
   const logoutWithRedirect = () => {
     clearOrg();
-    logout({
-      returnTo: window.location.origin,
-    });
+    const url = `${
+      config.AUTH.TC_AUTH_URL
+    }?logout=true&retUrl=${encodeURIComponent(config.AUTH.APP_URL)}`;
+    window.location.href = url;
   };
 
-  if (!isAuthenticated) {
-    loginWithRedirect({});
-
-    return null;
-  }
-
   const reset = () => {
     setSearchText("");
     onSearch && onSearch("");
@@ -103,7 +105,7 @@ export default function Header({
           className={style.accountMenu}
           onMouseDown={() => setShowAccountDropdown(!showAccountDropdown)}
         >
-          {getNickname(user)}
+          {nickname}
           {organization ? <>&nbsp;({organization.name})</> : ""}
           {showAccountDropdown ? (
             <div className={`${iconStyles.chevronUpG} ${style.arrow}`}></div>

client/src/components/Header/index.jsx

@@ -32,10 +32,17 @@ export default {
     isAvailable: process.env.REACT_APP_ATTRIBUTE_ID_ISAVAILABLE,
   },
 
-  AUTH0: {
-    domain: process.env.REACT_APP_AUTH0_DOMAIN,
-    clientId: process.env.REACT_APP_AUTH0_CLIENTID,
-    audience: process.env.REACT_APP_AUTH0_AUDIENCE,
+  // TODO - Search and remove references before deleting below code
+  // AUTH0: {
+  //   domain: process.env.REACT_APP_AUTH0_DOMAIN,
+  //   clientId: process.env.REACT_APP_AUTH0_CLIENTID,
+  //   audience: process.env.REACT_APP_AUTH0_AUDIENCE,
+  //   handleClaims: process.env.REACT_APP_AUTH0_CLAIMS_HANDLE,
+  // },
+  AUTH: {
+    ACCOUNTS_APP_CONNECTOR: process.env.REACT_APP_ACCOUNTS_APP_CONNECTOR,
+    TC_AUTH_URL: process.env.REACT_APP_TC_AUTH_URL,
+    APP_URL: process.env.REACT_APP_APP_URL,
     handleClaims: process.env.REACT_APP_AUTH0_CLAIMS_HANDLE,
   },
 };

client/src/config.js

@@ -15,33 +15,13 @@ import * as serviceWorker from "./serviceWorker";
 import { SearchContextProvider } from "./lib/search";
 import { ModalContextProvider } from "./lib/modal";
 
-import { Auth0Provider } from "./react-auth0-spa";
-import history from "./lib/history";
-import config from "./config";
-
-const onRedirectCallback = (appState) => {
-  history.push(
-    appState && appState.targetUrl
-      ? appState.targetUrl
-      : window.location.pathname
-  );
-};
-
 ReactDOM.render(
   <React.StrictMode>
-    <Auth0Provider
-      domain={config.AUTH0.domain}
-      client_id={config.AUTH0.clientId}
-      audience={config.AUTH0.audience}
-      redirect_uri={window.location.origin}
-      onRedirectCallback={onRedirectCallback}
-    >
-      <ModalContextProvider>
-        <SearchContextProvider>
-          <Router />
-        </SearchContextProvider>
-      </ModalContextProvider>
-    </Auth0Provider>
+    <ModalContextProvider>
+      <SearchContextProvider>
+        <Router />
+      </SearchContextProvider>
+    </ModalContextProvider>
     ,
   </React.StrictMode>,
   document.getElementById("root")

client/src/index.js

@@ -1,9 +1,20 @@
+import { getFreshToken, decodeToken } from "@topcoder-platform/tc-auth-lib";
 import config from "../config";
 
 /**
  * Returns the nickname of the logged in user
- * @param {Object} auth0User The auth0 user object
  */
-export function getNickname(auth0User) {
-  return auth0User[config.AUTH0.handleClaims];
+export async function getNickname() {
+  try {
+    const token = await getFreshToken();
+
+    const user = decodeToken(token);
+    return user[config.AUTH.handleClaims];
+  } catch (error) {
+    console.log(
+      "An error occurred trying to retrieve the nickname of the logged in user"
+    );
+    console.log(error);
+    alert("You are not logged in");
+  }
 }

client/src/lib/common.js

@@ -8,7 +8,6 @@ import ProfileCard from "../../components/ProfileCard";
 import Pagination from "../../components/Pagination";
 
 import * as helper from "./helper";
-import { useAuth0 } from "../../react-auth0-spa";
 import { getAttributes } from "../../lib/company-attributes";
 import { useSearch, FILTERS } from "../../lib/search";
 import { makeColorIterator, avatarColors } from "../../lib/colors";
@@ -45,7 +44,6 @@ function usePrevious(value) {
 }
 
 export default function SearchGlobal({ keyword }) {
-  const { isLoading, isAuthenticated, user: auth0User } = useAuth0();
   const apiClient = api();
   const searchContext = useSearch();
   const [isSearching, setIsSearching] = React.useState(false);
@@ -75,10 +73,6 @@ export default function SearchGlobal({ keyword }) {
 
   // Non-static data and Non-user related data
   React.useEffect(() => {
-    if (isLoading || !isAuthenticated) {
-      return;
-    }
-
     let isSubscribed = true;
 
     (async () => {
@@ -118,14 +112,10 @@ export default function SearchGlobal({ keyword }) {
       cancelTokenSource.cancel();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading, isAuthenticated, auth0User]);
+  }, []);
 
   // For the Search tab only (non static data)
   React.useEffect(() => {
-    if (isLoading || !isAuthenticated) {
-      return;
-    }
-
     const criteria = {};
     if (
       searchContext.filters[FILTERS.LOCATIONS].active &&
@@ -261,7 +251,7 @@ export default function SearchGlobal({ keyword }) {
     })();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading, isAuthenticated, keyword, orderBy, searchContext]);
+  }, [keyword, orderBy, searchContext]);
 
   /**
    * Update's the style for the sort order element, based on the current width of the page

client/src/pages/Search/Global.jsx

@@ -5,7 +5,6 @@ import ProfileCardGroupWrapper from "../../components/ProfileCardGroupWrapper";
 import Pagination from "../../components/Pagination";
 
 import { makeColorIterator, avatarColors } from "../../lib/colors";
-import { useAuth0 } from "../../react-auth0-spa";
 import config from "../../config";
 import api from "../../services/api";
 import * as groupLib from "../../lib/groups";
@@ -17,7 +16,6 @@ const colorIterator = makeColorIterator(avatarColors);
 
 export default function SearchGroups() {
   const apiClient = api();
-  const { user: auth0User } = useAuth0();
   const [myGroups, setMyGroups] = React.useState([]);
   const [otherGroups, setOtherGroups] = React.useState([]);
   const [loadingGroups, setLoadingGroups] = React.useState(false);
@@ -36,9 +34,10 @@ export default function SearchGroups() {
     setLoadingGroups(true);
 
     (async () => {
+      const nickname = await getNickname();
       const groups = await groupLib.getGroups(
         apiClient,
-        getNickname(auth0User),
+        nickname,
         cancelTokenSource.token
       );