Refactor HandleAuth component

client/src/components/auth/HandleAuth.js

@@ -1,47 +1,29 @@
 import React, { useState, useEffect } from 'react';
 import { Redirect } from 'react-router-dom';
+import { isValidToken } from '../../services/user.service';
 
 import '../../sass/MagicLink.scss';
+import useAuth from '../../hooks/useAuth';
 
 const HandleAuth = (props) => {
+  const auth = useAuth();
   const [isMagicLinkValid, setMagicLink] = useState(null);
-  const headerToSend = process.env.REACT_APP_CUSTOM_REQUEST_HEADER;
 
-  async function isValidToken() {
+  useEffect(() => {
     const search = props.location.search;
     const params = new URLSearchParams(search);
     const api_token = params.get('token');
-
-    try {
-      const response = await fetch('/api/auth/verify-signin', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-access-token': api_token,
-          'x-customrequired-header': headerToSend,
-        },
-      });
-      // eslint-disable-next-line no-unused-vars
-      const body = await response;
-      setMagicLink(response.status === 200);
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
-  useEffect(() => {
-    isValidToken();
+    const isValid = isValidToken(api_token);
+    setMagicLink(isValid);
   }, []);
 
-  if (isMagicLinkValid) {
-    return <Redirect to="/admin" />;
-  } else {
-    return (
-      <div className="flex-container">
-        <div>Sorry, the link is not valid.</div>
-      </div>
-    );
-  }
+  return auth.user && isMagicLinkValid ? (
+    <Redirect to="/admin" />
+  ) : (
+    <div className="flex-container">
+      <div>Sorry, the link is not valid anymore.</div>
+    </div>
+  );
 };
 
 export default HandleAuth;

client/src/services/user.service.js

@@ -1,4 +1,9 @@
-import { HEADERS, CHECK_USER, SIGN_IN } from '../utils/endpoints';
+import {
+  HEADERS,
+  CHECK_USER,
+  SIGN_IN,
+  AUTH_VERIFY_SIGN_IN,
+} from '../utils/endpoints';
 
 /**
  * Method sent request to the backend to check if user exist in the DB
@@ -41,3 +46,25 @@ export async function checkAuth(email, auth_origin) {
     return null;
   }
 }
+
+/**
+ * Method sent request to the backend to check if token is valid
+ * @returns true if is valid otherwise false
+ * @param api_token token
+ */
+export async function isValidToken(api_token) {
+  try {
+    const response = await fetch(AUTH_VERIFY_SIGN_IN, {
+      method: 'POST',
+      headers: {
+        ...HEADERS,
+        'x-access-token': api_token,
+      },
+    });
+    return response.status === 200;
+  } catch (error) {
+    console.log('Token is not valid');
+    console.log(error);
+    return false;
+  }
+}