[DOP-21436] add Keycloak auth (#128)

* [DOP-21436] add Keycloak auth

* [DOP-21436] fix after review

Author: Zabilsya

.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>