[DOP-21436] add Keycloak auth

.env.example

@@ -1 +1,2 @@
-API_URL="http://localhost:8000/v1/"
+API_URL=http://localhost:8000
+AUTH_PROVIDER=dummyAuthProvider

docker/Dockerfile

@@ -23,8 +23,10 @@ COPY --from=build /app/dist /usr/share/nginx/html
 COPY ./docker/entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
 
-ARG API_URL=http://localhost:8000/v1
+ARG API_URL=http://localhost:8000
+ARG AUTH_PROVIDER=dummyAuthProvider
 ENV SYNCMASTER__UI__API_BROWSER_URL=${API_URL}
+ENV SYNCMASTER__UI__AUTH_PROVIDER=${AUTH_PROVIDER}
 
 ENTRYPOINT ["/entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]

docker/entrypoint.sh

@@ -3,6 +3,7 @@
 cat <<EOF > /usr/share/nginx/html/env-config.js
 window.env = {
   API_URL: "${SYNCMASTER__UI__API_BROWSER_URL}",
+  AUTH_PROVIDER: "${SYNCMASTER__UI__AUTH_PROVIDER}",
 };
 EOF
 

src/app/config/errorBoundary/Fallback.tsx

@@ -1,20 +1,24 @@
 import React from 'react';
 import { FallbackProps } from 'react-error-boundary';
 import { ErrorLayout } from '@app/layouts';
-import { Error } from '@shared/config';
+import { ErrorStatusCode } from '@shared/config';
+import { AUTH_PROVIDER, AuthProviderType } from '@shared/constants';
 
-import { AccessError, AuthError, NotFoundError, ServerError } from './errors';
+import { AccessError, AuthError, KeycloakAuthError, NotFoundError, ServerError } from './errors';
 import { ErrorBoundaryContext } from './constants';
 
 export const Fallback = ({ error, resetErrorBoundary }: FallbackProps) => {
   const renderError = () => {
     if ('status' in error) {
       switch (error.status) {
-        case Error.AUTH:
-          return <AuthError />;
-        case Error.ACCESS:
+        case ErrorStatusCode.AUTH:
+          if (AUTH_PROVIDER === AuthProviderType.DUMMY) {
+            return <AuthError />;
+          }
+          return <KeycloakAuthError />;
+        case ErrorStatusCode.ACCESS:
           return <AccessError />;
-        case Error.NOT_FOUND:
+        case ErrorStatusCode.NOT_FOUND:
           return <NotFoundError />;
         default:
           return <ServerError />;

src/app/config/errorBoundary/errors/AuthError.tsx

@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 import { useLogout } from '@entities/auth';
 import { useSelectedGroup } from '@entities/group';
+import { SpinOverlay } from '@shared/ui';
 
 import { useErrorBoundaryContext } from '../hooks';
 
@@ -9,11 +10,11 @@ export const AuthError = () => {
   const { cleanGroup } = useSelectedGroup();
   const { resetErrorBoundary } = useErrorBoundaryContext();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     resetErrorBoundary();
     cleanGroup();
     logout();
   }, [logout, cleanGroup, resetErrorBoundary]);
 
-  return null;
+  return <SpinOverlay />;
 };

src/app/config/errorBoundary/errors/KeycloakAuthError.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+import { useKeycloakLogout } from '@entities/auth';
+import { SpinOverlay } from '@shared/ui';
+
+import { AuthError } from './AuthError';
+
+export const KeycloakAuthError = () => {
+  const { mutate: logout, isSuccess } = useKeycloakLogout();
+
+  useEffect(() => {
+    logout(null);
+  }, [logout]);
+
+  if (!isSuccess) {
+    return <SpinOverlay />;
+  }
+
+  return <AuthError />;
+};

src/app/config/errorBoundary/errors/index.ts

@@ -2,3 +2,4 @@ export * from './NotFoundError';
 export * from './ServerError';
 export * from './AuthError';
 export * from './AccessError';
+export * from './KeycloakAuthError';

src/app/config/router/instance.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createBrowserRouter, Navigate } from 'react-router-dom';
-import { LoginPage } from '@pages/auth';
+import { KeycloakCallbackPage, LoginPage } from '@pages/auth';
 import { AuthLayout, ErrorLayout, PrivateLayout } from '@app/layouts';
 import { CreateGroupPage, GroupDetailPage, GroupListPage, UpdateGroupPage } from '@pages/group';
 import { AuthProvider } from '@entities/auth';
@@ -33,6 +33,10 @@ export const router = createBrowserRouter([
             path: '/login',
             element: <LoginPage />,
           },
+          {
+            path: '/auth/callback',
+            element: <KeycloakCallbackPage />,
+          },
         ],
       },
       {

src/app/config/router/permissions/utils.ts

@@ -1,3 +1,9 @@
-import { Storage } from '@shared/constants';
+import { AUTH_PROVIDER, AuthProviderType, Storage } from '@shared/constants';
 
-export const isAuthenticated = () => !!localStorage.getItem(Storage.ACCESS_TOKEN);
+export const isAuthenticated = () => {
+  if (AUTH_PROVIDER === AuthProviderType.DUMMY) {
+    return !!localStorage.getItem(Storage.ACCESS_TOKEN);
+  }
+
+  return !!localStorage.getItem(Storage.IS_KEYCLOAK_AUTH);
+};

src/app/layouts/PrivateLayout/index.tsx

@@ -1,8 +1,8 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import { Layout } from 'antd';
 import { Outlet } from 'react-router-dom';
 import { Header, Sidebar } from '@widgets/layout';
-import { SpinOverlay } from '@shared/ui';
+import { SpinOverlay, Suspense } from '@shared/ui';
 import { useSelectedGroup } from '@entities/group';
 
 import classes from './styles.module.less';
@@ -23,7 +23,7 @@ export const PrivateLayout = () => {
         <Sidebar />
         <Layout>
           <Content className={classes.layout__content}>
-            <Suspense fallback={<SpinOverlay />}>
+            <Suspense>
               <Outlet />
             </Suspense>
           </Content>

src/entities/auth/api/authService.ts

@@ -1,6 +1,6 @@
 import { axiosInstance } from '@shared/config';
 
-import { AuthUser, LoginRequest, LoginResponse } from './types';
+import { AuthUser, KeycloakCallbackRequest, LoginRequest, LoginResponse } from './types';
 
 export const authService = {
   login: (data: LoginRequest): Promise<LoginResponse> => {
@@ -9,4 +9,10 @@ export const authService = {
   getCurrentUserInfo: (): Promise<AuthUser> => {
     return axiosInstance.get('v1/users/me');
   },
+  keycloakCallback: (params: KeycloakCallbackRequest): Promise<null> => {
+    return axiosInstance.get('v1/auth/callback', { params });
+  },
+  keycloakLogout: (): Promise<null> => {
+    return axiosInstance.get('v1/auth/logout');
+  },
 };

src/entities/auth/api/hooks/index.ts

@@ -1 +1,3 @@
 export * from './useCurrentUserInfo';
+export * from './useKeycloakCallback';
+export * from './useKeycloakLogout';

src/entities/auth/api/hooks/useCurrentUserInfo/index.ts

@@ -1,17 +1,16 @@
-import { useQuery, UseQueryResult } from '@tanstack/react-query';
-import { Storage } from '@shared/constants';
+import { useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
 
 import { authService } from '../../authService';
 import { AuthUser } from '../../types';
 import { AuthQueryKey } from '../../keys';
 
 /** Hook for getting current user info from backend */
-export const useCurrentUserInfo = (): UseQueryResult<AuthUser> => {
-  const accessToken = localStorage.getItem(Storage.ACCESS_TOKEN);
-
+export const useCurrentUserInfo = (
+  options?: Pick<UseQueryOptions<AuthUser>, 'enabled' | 'throwOnError'>,
+): UseQueryResult<AuthUser> => {
   return useQuery({
     queryKey: [AuthQueryKey.GET_CURRENT_USER_INFO],
     queryFn: authService.getCurrentUserInfo,
-    enabled: !!accessToken,
+    ...options,
   });
 };

src/entities/auth/api/hooks/useKeycloakCallback/index.ts

@@ -0,0 +1,14 @@
+import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
+
+import { authService } from '../../authService';
+import { KeycloakCallbackRequest } from '../../types';
+import { AuthQueryKey } from '../../keys';
+
+/** Hook for getting auth tokens from keycloak callback from backend */
+export const useKeycloakCallback = (params: KeycloakCallbackRequest): UseSuspenseQueryResult<null> => {
+  return useSuspenseQuery({
+    queryKey: [AuthQueryKey.KEYCLOAK_CALLBACK],
+    queryFn: () => authService.keycloakCallback(params),
+    gcTime: 0,
+  });
+};

src/entities/auth/api/hooks/useKeycloakLogout/index.ts

@@ -0,0 +1,11 @@
+import { UseMutationResult, useMutation } from '@tanstack/react-query';
+
+import { authService } from '../../authService';
+
+/** Hook for logout from keycloak */
+export const useKeycloakLogout = (): UseMutationResult<null> => {
+  return useMutation({
+    mutationFn: authService.keycloakLogout,
+    throwOnError: true,
+  });
+};

src/entities/auth/api/keys/index.ts

@@ -1,4 +1,5 @@
 export const AuthQueryKey = {
   LOGIN: 'LOGIN',
   GET_CURRENT_USER_INFO: 'GET_CURRENT_USER_INFO',
+  KEYCLOAK_CALLBACK: 'KEYCLOAK_CALLBACK',
 } as const;

src/entities/auth/api/types.ts

@@ -13,3 +13,7 @@ export interface LoginResponse {
   access_token: string;
   token_type: string;
 }
+
+export interface KeycloakCallbackRequest {
+  code: string;
+}

src/entities/auth/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useAuth';
 export * from './useLogout';
 export * from './useLogin';
+export * from './useKeycloakLogin';

src/entities/auth/hooks/useKeycloakLogin/index.ts

@@ -0,0 +1,13 @@
+import { Storage } from '@shared/constants';
+import { useNavigate } from 'react-router-dom';
+
+export const useKeycloakLogin = () => {
+  const navigate = useNavigate();
+
+  const login = () => {
+    localStorage.setItem(Storage.IS_KEYCLOAK_AUTH, 'true');
+    navigate('/connections');
+  };
+
+  return login;
+};

src/features/auth/KeycloakCallback/index.tsx

@@ -0,0 +1,13 @@
+import { useKeycloakCallback, useKeycloakLogin } from '@entities/auth';
+import { useLayoutEffect } from 'react';
+
+import { KeycloakCallbackProps } from './types';
+
+export const KeycloakCallback = (props: KeycloakCallbackProps) => {
+  useKeycloakCallback(props);
+  const login = useKeycloakLogin();
+
+  useLayoutEffect(login, [login]);
+
+  return null;
+};

src/features/auth/KeycloakCallback/types.ts

@@ -0,0 +1,3 @@
+export interface KeycloakCallbackProps {
+  code: string;
+}

src/features/auth/KeycloakLogin/index.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { useCurrentUserInfo, useKeycloakLogin } from '@entities/auth';
+import { Button, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import classes from './styles.module.less';
+
+const { Title } = Typography;
+
+export const KeycloakLogin = () => {
+  const { t } = useTranslation('auth');
+  const login = useKeycloakLogin();
+  const [isEnabledRequest, setIsEnabledRequest] = useState(false);
+  const { isSuccess, isEnabled, isFetching } = useCurrentUserInfo({ enabled: isEnabledRequest, throwOnError: false });
+
+  useEffect(() => {
+    if (isSuccess && isEnabled) {
+      login();
+    }
+  }, [login, isSuccess, isEnabled]);
+
+  const handleLogin = () => {
+    setIsEnabledRequest(true);
+  };
+
+  return (
+    <div className={classes.wrapper}>
+      <Title>{t('auth')}</Title>
+      <Button
+        className={classes.button}
+        type="primary"
+        size="large"
+        htmlType="submit"
+        onClick={handleLogin}
+        loading={isFetching}
+      >
+        {t('signIn')}
+      </Button>
+    </div>
+  );
+};

src/features/auth/KeycloakLogin/styles.module.less

@@ -0,0 +1,10 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 420px;
+  padding: 32px;
+  background-color: @white;
+  border-radius: 16px;
+  box-shadow: @box-shadow-base;
+}

src/features/auth/index.ts

@@ -1 +1,3 @@
 export * from './Login';
+export * from './KeycloakLogin';
+export * from './KeycloakCallback';

src/pages/auth/KeycloakCallbackPage/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { KeycloakCallback } from '@features/auth';
+import { useSearchParams } from 'react-router-dom';
+import { Suspense } from '@shared/ui';
+
+export const KeycloakCallbackPage = () => {
+  const [searchParams] = useSearchParams();
+  const code = searchParams.get('code')!;
+
+  return (
+    <Suspense>
+      <KeycloakCallback code={code} />
+    </Suspense>
+  );
+};

src/pages/auth/LoginPage/index.tsx

@@ -1,4 +1,11 @@
-import { Login } from '@features/auth';
+import { KeycloakLogin, Login } from '@features/auth';
+import { AUTH_PROVIDER, AuthProviderType } from '@shared/constants';
 import React from 'react';
 
-export const LoginPage = () => <Login />;
+export const LoginPage = () => {
+  if (AUTH_PROVIDER === AuthProviderType.DUMMY) {
+    return <Login />;
+  }
+
+  return <KeycloakLogin />;
+};

src/pages/auth/index.ts

@@ -1 +1,2 @@
 export * from './LoginPage';
+export * from './KeycloakCallbackPage';

src/shared/config/axios/instance.ts

@@ -1,15 +1,16 @@
 import axios from 'axios';
 
-import { requestInterceptor, responseSuccessInterceptor } from './interceptors';
+import { requestInterceptor, responseErrorInterceptor, responseSuccessInterceptor } from './interceptors';
 
 export const axiosInstance = axios.create({
   baseURL: window.env?.API_URL || process.env.API_URL || 'http://localhost:8000',
   headers: {
     Accept: 'application/json',
     'Content-Type': 'application/json',
   },
+  withCredentials: true,
 });
 
 axiosInstance.interceptors.request.use(requestInterceptor);
 
-axiosInstance.interceptors.response.use(responseSuccessInterceptor);
+axiosInstance.interceptors.response.use(responseSuccessInterceptor, responseErrorInterceptor);