Email confirmation flow

api/src/controllers/userController.js

@@ -155,15 +155,18 @@ const registerUser = async (req, res) => {
       })
     }
 
+    const responseData = {}
+
     if (isCognito) {
       await registerCognito(username, password)
+      responseData.message = 'Code for sign up confirmation was sent to your email'
+      responseData.forSignUpConfirmation = true
     } else {
       await registerLocal(username, password)
+      responseData.message = 'The user has been registered'
     }
 
-    res.status(201).send({
-      message: 'The user has been registered'
-    })
+    res.status(201).send(responseData)
   } catch (err) {
     res.status(409).json({ error: err.message })
   }

package.json

@@ -12,7 +12,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "aws-amplify": "^3.3.27",
+    "aws-amplify": "^4.3.21",
     "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "dayjs": "^1.10.7",

public/index.html

@@ -24,6 +24,7 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="app"></div>
     <div id="app-portal-container"></div>
+    <div id="app-loader-container"></div>
     <script type="text/jsx" src="index.jsx"></script>
   </body>
 </html>

src/App.jsx

@@ -5,16 +5,20 @@ import { QueryClientProvider } from "react-query";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { Switch, BrowserRouter as Router, Route } from "react-router-dom";
 
-import { SignInPage } from "screens/auth/sign-in";
-import { SignUpPage } from "screens/auth/sign-up";
-import { ForgotPasswordPage } from "screens/auth/forgot-password";
-import { AdditionalInfoPage } from "screens/auth/additional-info";
+import {
+  SignInPage,
+  SignUpPage,
+  ConfirmEmailPage,
+  ForgotPasswordPage,
+  AdditionalInfoPage,
+} from "screens/auth";
 
 import { PrivateRoute } from "components/privateRoute";
 import { SideBarNavigation } from "common/side-bar-navigation";
 
 import { Routes } from "routes";
 import ScrollToTop from "utils/scrollToTop";
+import { Routes as PathRoutes } from "constants/routes";
 import { SearchBarProvider } from "providers/search-bar";
 
 import { queryClient } from "./reactQuery";
@@ -43,14 +47,21 @@ function App() {
         <Router>
           <ScrollToTop>
             <Switch>
-              <Route component={SignInPage} path="/login" />
-              <Route component={SignUpPage} path="/register" />
-              <Route component={ForgotPasswordPage} path="/forgot-password" />
+              <Route component={SignInPage} path={PathRoutes.Auth.Login} />
+              <Route component={SignUpPage} path={PathRoutes.Auth.Register} />
+              <Route
+                component={ConfirmEmailPage}
+                path={PathRoutes.Auth.ConfirmEmail}
+              />
+              <Route
+                component={ForgotPasswordPage}
+                path={PathRoutes.Auth.ForgotPassword}
+              />
 
               <PrivateRoute
                 exact
-                path="/additional-info"
                 component={AdditionalInfoPage}
+                path={PathRoutes.Auth.AdditionalInfo}
               />
 
               <Route component={MainApp} />

src/actions/auth.js

@@ -2,25 +2,14 @@ import Amplify, { Auth } from "aws-amplify";
 
 import { api } from "api";
 import { authConfig } from "config/amplify";
-import { getErrorMessage } from "utils/error";
-import { setCurrentUser } from "store/user/slices";
-import {
-  USER_LOGOUT,
-  USER_LOGIN_FAIL,
-  USER_LOGIN_SUCCESS,
-  ACCESS_TOKEN_SUCCESS,
-} from "constants/userConstants";
-
-// import { news } from "./community";
-// import { visitCommunity } from "./communityActions";
+import { USER_LOGOUT } from "constants/userConstants";
 
 const isCognito = process.env.REACT_APP_AUTH_METHOD === "cognito";
 
 if (isCognito) {
   Amplify.configure({ Auth: { ...authConfig } });
 }
 
-// TODO: Move to store/thunk when reduxjs/toolkit will be setuped
 const makeLogout = (dispatch) => {
   // dispatch({ type: USER_DETAILS_FAIL, payload: message });
   localStorage.clear();
@@ -39,106 +28,6 @@ export const logout = () => async (dispatch) => {
   }
 };
 
-// TODO: Move to store/thunk when reduxjs/toolkit will be setuped
-export const getAccessToken = () => async (dispatch) => {
-  try {
-    const response = await api.auth.getToken();
-
-    if (response.status !== 201) {
-      makeLogout(dispatch);
-      return Promise.reject();
-    }
-
-    dispatch({ type: ACCESS_TOKEN_SUCCESS, payload: true });
-    return Promise.resolve();
-  } catch (error) {
-    makeLogout(dispatch);
-    return Promise.reject(error);
-  }
-};
-
-// TODO: Move to store/thunk when reduxjs/toolkit will be setuped
-export const login =
-  ({ name, password }) =>
-  async (dispatch) => {
-    try {
-      let authData = {};
-      let response;
-      if (isCognito) {
-        response = await Auth.signIn(name, password);
-        const id = response?.attributes?.sub || "";
-        authData = {
-          id,
-          token: response?.signInUserSession?.idToken?.jwtToken || "",
-        };
-        await api.auth.login({ id });
-      } else {
-        response = await api.auth.login({ username: name, password });
-        authData = response.data;
-      }
-
-      localStorage.setItem("userInfo", JSON.stringify(authData));
-
-      const profile = await api.user.get({ id: authData.id });
-      dispatch(setCurrentUser({ ...response, ...profile?.data?.results }));
-
-      // await getAccessToken()(dispatch); // access token is already received in login response
-      // const community = await news()(dispatch);
-      // await visitCommunity(community.id)(dispatch);
-
-      dispatch({ type: USER_LOGIN_SUCCESS, payload: response });
-      return Promise.resolve(response);
-    } catch (error) {
-      dispatch({ type: USER_LOGIN_FAIL, payload: getErrorMessage(error) });
-      return Promise.reject(error);
-    }
-  };
-
-export const register =
-  ({ name, password }) =>
-  async (dispatch) => {
-    try {
-      await api.auth.register({ username: name, password });
-
-      // no auto login for cognito since it needs to confirm email with a code
-      if (!isCognito) {
-        await login({ name, password })(dispatch);
-      }
-
-      return Promise.resolve();
-    } catch (error) {
-      return Promise.reject(error);
-    }
-  };
-
-// TODO: Why there is no functionality to request code without cognito?
-export const requestCode = async (username) => {
-  try {
-    let response;
-    if (isCognito) {
-      const data = await api.auth.forgotPassword(username);
-      response =
-        data.data.details.CodeDeliveryDetails.AttributeName.split("_").join(
-          " "
-        );
-    }
-    return Promise.resolve(response);
-  } catch (error) {
-    return Promise.reject(error);
-  }
-};
-
-export const resetPassword = async ({ username, code, password }) => {
-  try {
-    if (isCognito) {
-      await api.auth.forgotPasswordSubmit(username, code, password);
-    }
-    return Promise.resolve();
-  } catch (error) {
-    return Promise.reject(error);
-  }
-};
-
 export const changePassword = async ({ oldPassword, newPassword }) => {
   try {
     if (isCognito) {

src/api/auth.js

@@ -21,8 +21,11 @@ export const forgotPasswordSubmit = ({ username, code, newPassword }) =>
     newPassword,
   });
 
-export const confirmSignup = ({ username, code }) =>
+export const confirmEmail = ({ email, code }) =>
   apiInstance.post("/users/confirm-sign-up", {
-    username,
     code,
+    username: email,
   });
+
+export const resendEmailCode = ({ email }) =>
+  apiInstance.post("/users/resend-sign-up-code", { username: email });