feat: refactoring auth & add email password login (#318)

* feat: wip

* fix: issues

* feat: clean controllers and services

* fix: test

* Fix auth

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/apollo.tsx

@@ -10,7 +10,7 @@ import { onError } from '@apollo/client/link/error';
 import { RestLink } from 'apollo-link-rest';
 
 import { CommentThreadTarget } from './generated/graphql';
-import { refreshAccessToken } from './modules/auth/services/AuthService';
+import { getTokensFromRefreshToken } from './modules/auth/services/AuthService';
 
 const apiLink = createHttpLink({
   uri: `${process.env.REACT_APP_API_URL}`,
@@ -34,7 +34,7 @@ const errorLink = onError(({ graphQLErrors, operation, forward }) => {
           return new Observable((observer) => {
             (async () => {
               try {
-                await refreshAccessToken();
+                await getTokensFromRefreshToken();
 
                 const oldHeaders = operation.getContext().headers;
 

front/src/modules/auth/services/AuthService.ts

@@ -13,7 +13,7 @@ export const getUserIdFromToken: () => string | null = () => {
   }
 
   try {
-    return jwt<{ userId: string }>(accessToken).userId;
+    return jwt<{ sub: string }>(accessToken).sub;
   } catch (error) {
     return null;
   }
@@ -25,10 +25,41 @@ export const hasRefreshToken = () => {
   return refreshToken ? true : false;
 };
 
-export const refreshAccessToken = async () => {
+export const getTokensFromLoginToken = async (loginToken: string) => {
+  if (!loginToken) {
+    return;
+  }
+
+  const response = await fetch(
+    process.env.REACT_APP_AUTH_URL + '/verify' || '',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ loginToken }),
+    },
+  );
+
+  if (response.ok) {
+    const { tokens } = await response.json();
+    if (!tokens) {
+      return;
+    }
+
+    localStorage.setItem('accessToken', tokens.accessToken.token);
+    localStorage.setItem('refreshToken', tokens.refreshToken.token);
+  } else {
+    localStorage.removeItem('refreshToken');
+    localStorage.removeItem('accessToken');
+  }
+};
+
+export const getTokensFromRefreshToken = async () => {
   const refreshToken = localStorage.getItem('refreshToken');
   if (!refreshToken) {
     localStorage.removeItem('accessToken');
+    return;
   }
 
   const response = await fetch(
@@ -43,8 +74,13 @@ export const refreshAccessToken = async () => {
   );
 
   if (response.ok) {
-    const { accessToken } = await response.json();
-    localStorage.setItem('accessToken', accessToken);
+    const { tokens } = await response.json();
+
+    if (!tokens) {
+      return;
+    }
+    localStorage.setItem('accessToken', tokens.accessToken.token);
+    localStorage.setItem('refreshToken', tokens.refreshToken.token);
   } else {
     localStorage.removeItem('refreshToken');
     localStorage.removeItem('accessToken');

front/src/modules/auth/services/__tests__/AuthService.test.tsx

@@ -1,29 +1,62 @@
 import { waitFor } from '@testing-library/react';
 
 import {
+  getTokensFromLoginToken,
+  getTokensFromRefreshToken,
   getUserIdFromToken,
   hasAccessToken,
   hasRefreshToken,
-  refreshAccessToken,
 } from '../AuthService';
 
+const validTokensPayload = {
+  accessToken: {
+    token:
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIzNzRmZTNhNS1kZjFlLTQxMTktYWZlMC0yYTYyYTJiYTQ4MWUiLCJ3b3Jrc3BhY2VJZCI6InR3ZW50eS03ZWQ5ZDIxMi0xYzI1LTRkMDItYmYyNS02YWVjY2Y3ZWE0MTkiLCJpYXQiOjE2ODY5OTMxODIsImV4cCI6MTY4Njk5MzQ4Mn0.F_FD6nJ5fssR_47v2XFhtzqjr-wrEQpqaWVq8iIlLJw',
+    expiresAt: '2023-06-17T09:18:02.942Z',
+  },
+  refreshToken: {
+    token:
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIzNzRmZTNhNS1kZjFlLTQxMTktYWZlMC0yYTYyYTJiYTQ4MWUiLCJpYXQiOjE2ODY5OTMxODIsImV4cCI6OTQ2Mjk5MzE4MiwianRpIjoiNzBmMWNhMjctOTYxYi00ZGZlLWEwOTUtMTY2OWEwOGViMTVjIn0.xEdX9dOGzrPHrPsivQYB9ipYGJH-mJ7GSIVPacmIzfY',
+    expiresAt: '2023-09-15T09:13:02.952Z',
+  },
+};
+
 const mockFetch = async (
   input: RequestInfo | URL,
   init?: RequestInit,
 ): Promise<Response> => {
-  const refreshToken = init?.body
-    ? JSON.parse(init.body.toString()).refreshToken
-    : null;
-  return new Promise((resolve) => {
-    resolve(
-      new Response(
-        JSON.stringify({
-          accessToken:
-            refreshToken === 'xxx-valid-refresh' ? 'xxx-valid-access' : null,
-        }),
-      ),
-    );
-  });
+  if (input.toString().match(/\/auth\/token$/g)) {
+    const refreshToken = init?.body
+      ? JSON.parse(init.body.toString()).refreshToken
+      : null;
+    return new Promise((resolve) => {
+      resolve(
+        new Response(
+          JSON.stringify({
+            tokens:
+              refreshToken === 'xxx-valid-refresh' ? validTokensPayload : null,
+          }),
+        ),
+      );
+    });
+  }
+
+  if (input.toString().match(/\/auth\/verify$/g)) {
+    const loginToken = init?.body
+      ? JSON.parse(init.body.toString()).loginToken
+      : null;
+    return new Promise((resolve) => {
+      resolve(
+        new Response(
+          JSON.stringify({
+            tokens:
+              loginToken === 'xxx-valid-login' ? validTokensPayload : null,
+          }),
+        ),
+      );
+    });
+  }
+  return new Promise(() => new Response());
 };
 
 global.fetch = mockFetch;
@@ -47,21 +80,28 @@ it('hasRefreshToken is true when token is not', () => {
 });
 
 it('refreshToken does not refresh the token if refresh token is missing', () => {
-  refreshAccessToken();
+  getTokensFromRefreshToken();
   expect(localStorage.getItem('accessToken')).toBeNull();
 });
 
 it('refreshToken does not refreh the token if refresh token is invalid', () => {
   localStorage.setItem('refreshToken', 'xxx-invalid-refresh');
-  refreshAccessToken();
+  getTokensFromRefreshToken();
+  expect(localStorage.getItem('accessToken')).toBeNull();
+});
+
+it('refreshToken does not refreh the token if refresh token is empty', () => {
+  getTokensFromRefreshToken();
   expect(localStorage.getItem('accessToken')).toBeNull();
 });
 
 it('refreshToken refreshes the token if refresh token is valid', async () => {
   localStorage.setItem('refreshToken', 'xxx-valid-refresh');
-  refreshAccessToken();
+  getTokensFromRefreshToken();
   await waitFor(() => {
-    expect(localStorage.getItem('accessToken')).toBe('xxx-valid-access');
+    expect(localStorage.getItem('accessToken')).toBe(
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIzNzRmZTNhNS1kZjFlLTQxMTktYWZlMC0yYTYyYTJiYTQ4MWUiLCJ3b3Jrc3BhY2VJZCI6InR3ZW50eS03ZWQ5ZDIxMi0xYzI1LTRkMDItYmYyNS02YWVjY2Y3ZWE0MTkiLCJpYXQiOjE2ODY5OTMxODIsImV4cCI6MTY4Njk5MzQ4Mn0.F_FD6nJ5fssR_47v2XFhtzqjr-wrEQpqaWVq8iIlLJw',
+    );
   });
 });
 
@@ -79,10 +119,32 @@ it('getUserIdFromToken returns null when the token is not valid', async () => {
 it('getUserIdFromToken returns the right userId when the token is valid', async () => {
   localStorage.setItem(
     'accessToken',
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJiNzU5MGRiOS1hYzdkLTQyNzUtOWM2Yy0zMjM5NzkxOTI3OTUiLCJ3b3Jrc3BhY2VJZCI6IjdlZDlkMjEyLTFjMjUtNGQwMi1iZjI1LTZhZWNjZjdlYTQxOSIsImlhdCI6MTY4NTA5MzE3MiwiZXhwIjoxNjg1MDkzNDcyfQ.0g-z2vKBbGGcs0EmZ3Q7HpZ9Yno_SOrprhcQMm1Zb6Y',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIzNzRmZTNhNS1kZjFlLTQxMTktYWZlMC0yYTYyYTJiYTQ4MWUiLCJ3b3Jrc3BhY2VJZCI6InR3ZW50eS03ZWQ5ZDIxMi0xYzI1LTRkMDItYmYyNS02YWVjY2Y3ZWE0MTkiLCJpYXQiOjE2ODY5OTI0ODgsImV4cCI6MTY4Njk5Mjc4OH0.IO7U5G14IrrQriw3JjrKVxmZgd6XKL6yUIwuNe_R55E',
   );
   const userId = getUserIdFromToken();
-  expect(userId).toBe('b7590db9-ac7d-4275-9c6c-323979192795');
+  expect(userId).toBe('374fe3a5-df1e-4119-afe0-2a62a2ba481e');
+});
+
+it('getTokensFromLoginToken does nothing if loginToken is empty', async () => {
+  await getTokensFromLoginToken('');
+  expect(localStorage.getItem('accessToken')).toBeNull();
+  expect(localStorage.getItem('refreshToken')).toBeNull();
+});
+
+it('getTokensFromLoginToken does nothing if loginToken is not valid', async () => {
+  await getTokensFromLoginToken('xxx-invalid-login');
+  expect(localStorage.getItem('accessToken')).toBeNull();
+  expect(localStorage.getItem('refreshToken')).toBeNull();
+});
+
+it('getTokensFromLoginToken does nothing if loginToken is not valid', async () => {
+  await getTokensFromLoginToken('xxx-valid-login');
+  expect(localStorage.getItem('accessToken')).toBe(
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIzNzRmZTNhNS1kZjFlLTQxMTktYWZlMC0yYTYyYTJiYTQ4MWUiLCJ3b3Jrc3BhY2VJZCI6InR3ZW50eS03ZWQ5ZDIxMi0xYzI1LTRkMDItYmYyNS02YWVjY2Y3ZWE0MTkiLCJpYXQiOjE2ODY5OTMxODIsImV4cCI6MTY4Njk5MzQ4Mn0.F_FD6nJ5fssR_47v2XFhtzqjr-wrEQpqaWVq8iIlLJw',
+  );
+  expect(localStorage.getItem('refreshToken')).toBe(
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIzNzRmZTNhNS1kZjFlLTQxMTktYWZlMC0yYTYyYTJiYTQ4MWUiLCJpYXQiOjE2ODY5OTMxODIsImV4cCI6OTQ2Mjk5MzE4MiwianRpIjoiNzBmMWNhMjctOTYxYi00ZGZlLWEwOTUtMTY2OWEwOGViMTVjIn0.xEdX9dOGzrPHrPsivQYB9ipYGJH-mJ7GSIVPacmIzfY',
+  );
 });
 
 afterEach(() => {

front/src/pages/auth/AuthCallback.tsx

@@ -1,27 +1,30 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
-import { refreshAccessToken } from '@/auth/services/AuthService';
+import { getTokensFromLoginToken } from '@/auth/services/AuthService';
 
 export function AuthCallback() {
   const [searchParams] = useSearchParams();
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const refreshToken = searchParams.get('refreshToken');
-  localStorage.setItem('refreshToken', refreshToken || '');
+  const loginToken = searchParams.get('loginToken');
   const navigate = useNavigate();
 
   useEffect(() => {
-    async function getAccessToken() {
-      await refreshAccessToken();
+    async function getTokens() {
+      if (!loginToken) {
+        return;
+      }
+      setIsLoading(true);
+      await getTokensFromLoginToken(loginToken);
       setIsLoading(false);
       navigate('/');
     }
 
-    if (isLoading) {
-      getAccessToken();
+    if (!isLoading) {
+      getTokens();
     }
-  }, [isLoading, navigate]);
+  }, [isLoading, navigate, loginToken]);
 
   return <></>;
 }

front/src/providers/AuthProvider.tsx

@@ -16,6 +16,7 @@ export function AuthProvider({ children }: OwnProps) {
   const [, setIsAuthenticating] = useRecoilState(isAuthenticatingState);
 
   const userIdFromToken = getUserIdFromToken();
+
   const { data } = useGetCurrentUserQuery(userIdFromToken);
 
   useEffect(() => {

front/src/testing/mock-data/jwt.ts

@@ -1,2 +1,2 @@
 export const mockedUserJWT =
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhc2QiLCJuYW1lIjoiSm9obiBEb2UiLCJpYXQiOjE1MTYyMzkwMjIsInVzZXJJZCI6IjdkZmJjM2Y3LTZlNWUtNDEyOC05NTdlLThkODY4MDhjZGY2YiJ9.eLVZXaaAsOWUUeVybvuig--0ClsTxBp3lfkD7USxEQk';
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIzNzRmZTNhNS1kZjFlLTQxMTktYWZlMC0yYTYyYTJiYTQ4MWUiLCJ3b3Jrc3BhY2VJZCI6InR3ZW50eS03ZWQ5ZDIxMi0xYzI1LTRkMDItYmYyNS02YWVjY2Y3ZWE0MTkiLCJpYXQiOjE2ODY5OTMxODIsImV4cCI6MTY4Njk5MzQ4Mn0.F_FD6nJ5fssR_47v2XFhtzqjr-wrEQpqaWVq8iIlLJw';

front/src/testing/mock-data/users.ts

@@ -2,7 +2,7 @@ import { GraphqlQueryUser } from '@/users/interfaces/user.interface';
 
 export const mockedUsersData: Array<GraphqlQueryUser> = [
   {
-    id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
+    id: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
     __typename: 'User',
     email: 'charles@test.com',
     displayName: 'Charles Test',