[UI] Added LoginByGoogle (#2852)

Author: peterschmidt85

frontend/src/App/Login/EnterpriseLogin/index.tsx

@@ -6,10 +6,11 @@ import { Box, NavigateLink, SpaceBetween } from 'components';
 import { UnauthorizedLayout } from 'layouts/UnauthorizedLayout';
 
 import { ROUTES } from 'routes';
-import { useGetEntraInfoQuery, useGetOktaInfoQuery } from 'services/auth';
+import { useGetEntraInfoQuery, useGetOktaInfoQuery, useGetGoogleInfoQuery } from 'services/auth';
 
 import { LoginByEntraID } from '../EntraID/LoginByEntraID';
 import { LoginByOkta } from '../LoginByOkta';
+import { LoginByGoogle } from '../LoginByGoogle';
 import { LoginByTokenForm } from '../LoginByTokenForm';
 
 import styles from './styles.module.scss';
@@ -18,9 +19,11 @@ export const EnterpriseLogin: React.FC = () => {
     const { t } = useTranslation();
     const { data: oktaData, isLoading: isLoadingOkta } = useGetOktaInfoQuery();
     const { data: entraData, isLoading: isLoadingEntra } = useGetEntraInfoQuery();
+    const { data: googleData, isLoading: isLoadingGoogle } = useGetGoogleInfoQuery();
 
     const oktaEnabled = oktaData?.enabled;
     const entraEnabled = entraData?.enabled;
+    const googleEnabled = googleData?.enabled;
 
     const isLoading = isLoadingOkta || isLoadingEntra;
     const isShowTokenForm = !oktaEnabled && !entraEnabled;
@@ -36,6 +39,7 @@ export const EnterpriseLogin: React.FC = () => {
                     {!isLoading && isShowTokenForm && <LoginByTokenForm />}
                     {!isLoadingOkta && oktaEnabled && <LoginByOkta className={styles.okta} />}
                     {!isLoadingEntra && entraEnabled && <LoginByEntraID className={styles.entra} />}
+                    {!isLoadingGoogle && googleEnabled && <LoginByGoogle className={styles.google} />}
 
                     {!isLoading && !isShowTokenForm && (
                         <Box color="text-body-secondary">

frontend/src/App/Login/LoginByGoogle/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import cn from 'classnames';
+
+import { Button } from 'components';
+
+import { goToUrl } from 'libs';
+import { useGoogleAuthorizeMutation } from 'services/auth';
+
+import { ReactComponent as GoogleIcon } from 'assets/icons/google.svg';
+import styles from './styles.module.scss';
+
+export const LoginByGoogle: React.FC<{ className?: string }> = ({ className }) => {
+    const { t } = useTranslation();
+
+    const [googleAuthorize, { isLoading }] = useGoogleAuthorizeMutation();
+
+    const signInClick = () => {
+        googleAuthorize()
+            .unwrap()
+            .then((data) => {
+                goToUrl(data.authorization_url);
+            })
+            .catch(console.log);
+    };
+
+    return (
+        <div className={cn(styles.signIn, className)}>
+            <Button onClick={signInClick} disabled={isLoading} loading={isLoading} variant="normal">
+                <span className={styles.loginButtonInner}>
+                    <GoogleIcon />
+                    <span className={styles.loginButtonLabel}>{t('common.login_google')}</span>
+                </span>
+            </Button>
+        </div>
+    );
+};

frontend/src/App/Login/LoginByGoogle/styles.module.scss

@@ -0,0 +1,20 @@
+@use '@cloudscape-design/design-tokens/index' as awsui;
+
+.signIn {
+    display: flex;
+    justify-content: center;
+
+    button {
+        .loginButtonInner {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .loginButtonLabel {
+            height: 20px;
+            line-height: 21px;
+        }
+    }
+}

frontend/src/App/Login/LoginByGoogleCallback/index.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+import { NavigateLink } from 'components';
+import { UnauthorizedLayout } from 'layouts/UnauthorizedLayout';
+
+import { useAppDispatch } from 'hooks';
+import { ROUTES } from 'routes';
+import { useGoogleCallbackMutation } from 'services/auth';
+
+import { AuthErrorMessage } from 'App/AuthErrorMessage';
+import { Loading } from 'App/Loading';
+import { setAuthData } from 'App/slice';
+
+export const LoginByGoogleCallback: React.FC = () => {
+    const { t } = useTranslation();
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const code = searchParams.get('code');
+    const state = searchParams.get('state');
+    const [isInvalidCode, setIsInvalidCode] = useState(false);
+    const dispatch = useAppDispatch();
+
+    const [googleCallback] = useGoogleCallbackMutation();
+
+    const checkCode = () => {
+        if (code && state) {
+            googleCallback({ code, state })
+                .unwrap()
+                .then(({ creds: { token } }) => {
+                    dispatch(setAuthData({ token }));
+                    navigate('/');
+                })
+                .catch(() => {
+                    setIsInvalidCode(true);
+                });
+        }
+    };
+
+    useEffect(() => {
+        if (code && state) {
+            checkCode();
+        } else {
+            setIsInvalidCode(true);
+        }
+    }, []);
+
+    if (isInvalidCode)
+        return (
+            <UnauthorizedLayout>
+                <AuthErrorMessage title={t('auth.authorization_failed')}>
+                    <NavigateLink href={ROUTES.BASE}>{t('auth.try_again')}</NavigateLink>
+                </AuthErrorMessage>
+            </UnauthorizedLayout>
+        );
+
+    return (
+        <UnauthorizedLayout>
+            <Loading />;
+        </UnauthorizedLayout>
+    );
+};

frontend/src/App/index.tsx

@@ -19,6 +19,7 @@ const IGNORED_AUTH_PATHS = [
     ROUTES.AUTH.GITHUB_CALLBACK,
     ROUTES.AUTH.OKTA_CALLBACK,
     ROUTES.AUTH.ENTRA_CALLBACK,
+    ROUTES.AUTH.GOOGLE_CALLBACK,
     ROUTES.AUTH.TOKEN,
 ];
 

frontend/src/api.ts

@@ -22,6 +22,12 @@ export const API = {
             AUTHORIZE: () => `${API.AUTH.ENTRA.BASE()}/authorize`,
             CALLBACK: () => `${API.AUTH.ENTRA.BASE()}/callback`,
         },
+        GOOGLE: {
+            BASE: () => `${API.AUTH.BASE()}/google`,
+            INFO: () => `${API.AUTH.GOOGLE.BASE()}/info`,
+            AUTHORIZE: () => `${API.AUTH.GOOGLE.BASE()}/authorize`,
+            CALLBACK: () => `${API.AUTH.GOOGLE.BASE()}/callback`,
+        },
     },
 
     USERS: {

frontend/src/assets/icons/google.svg

@@ -32,6 +32,7 @@
     "login_github": "Sign in with GitHub",
     "login_okta": "Sign in with Okta",
     "login_entra": "Sign in with EntraID",
+    "login_google": "Sign in with Google",
     "general": "General",
     "test": "Test",
     "local_storage_unavailable": "Local Storage is unavailable",

frontend/src/locale/en.json

@@ -7,6 +7,7 @@ import App from 'App';
 import { LoginByEntraIDCallback } from 'App/Login/EntraID/LoginByEntraIDCallback';
 import { LoginByGithubCallback } from 'App/Login/LoginByGithubCallback';
 import { LoginByOktaCallback } from 'App/Login/LoginByOktaCallback';
+import { LoginByGoogleCallback } from 'App/Login/LoginByGoogleCallback';
 import { TokenLogin } from 'App/Login/TokenLogin';
 import { Logout } from 'App/Logout';
 import { FleetDetails, FleetList } from 'pages/Fleets';
@@ -45,6 +46,10 @@ export const router = createBrowserRouter([
                 path: ROUTES.AUTH.ENTRA_CALLBACK,
                 element: <LoginByEntraIDCallback />,
             },
+            {
+                path: ROUTES.AUTH.GOOGLE_CALLBACK,
+                element: <LoginByGoogleCallback />,
+            },
             {
                 path: ROUTES.AUTH.TOKEN,
                 element: <TokenLogin />,

frontend/src/router.tsx

@@ -8,6 +8,7 @@ export const ROUTES = {
         GITHUB_CALLBACK: `/auth/github/callback`,
         OKTA_CALLBACK: `/auth/okta/callback`,
         ENTRA_CALLBACK: `/auth/entra/callback`,
+        GOOGLE_CALLBACK: `/auth/google/callback`,
         TOKEN: `/auth/token`,
     },