feat: implement button "login with SSO" (#4242)

Author: kkdras

src/containers/App/Content.tsx

@@ -278,14 +278,20 @@ function ContentWrapper(props: ContentWrapperProps) {
         if (authUnavailable || metaAuthUnavailable) {
             return <AccessDenied />;
         }
-        return <Authentication />;
+        return (
+            <GetMetaCapabilities>
+                <Authentication />
+            </GetMetaCapabilities>
+        );
     };
 
     return (
         <Switch>
             {!authUnavailable && !metaAuthUnavailable && (
                 <Route path={routes.auth}>
-                    <Authentication closable />
+                    <GetMetaCapabilities>
+                        <Authentication closable />
+                    </GetMetaCapabilities>
                 </Route>
             )}
             <Route>

src/containers/Authentication/Authentication.scss

@@ -77,6 +77,10 @@
         justify-content: center;
     }
 
+    &__button-sso {
+        margin-top: var(--g-spacing-2);
+    }
+
     &__show-password-button {
         margin-left: 4px;
     }

src/containers/Authentication/Authentication.tsx

@@ -2,19 +2,25 @@ import React from 'react';
 
 import {Eye, EyeSlash, Xmark} from '@gravity-ui/icons';
 import {ActionTooltip, Button, Link as ExternalLink, Icon, TextInput} from '@gravity-ui/uikit';
-import {useHistory, useLocation} from 'react-router-dom';
+import {useHistory, useLocation, useRouteMatch} from 'react-router-dom';
 
-import {parseQuery} from '../../routes';
+import routes, {getHomePagePath, parseQuery} from '../../routes';
 import {basename} from '../../store';
 import {authenticationApi} from '../../store/reducers/authentication/authentication';
-import {useLoginWithDatabase} from '../../store/reducers/capabilities/hooks';
+import {useLoginWithDatabase, useOidcAvailable} from '../../store/reducers/capabilities/hooks';
 import {cn} from '../../utils/cn';
 import {BRAND_BUTTON_CLASS} from '../../utils/constants';
 import {prepareCommonErrorMessage} from '../../utils/errors';
 import {useMetaAuth} from '../../utils/hooks/useMetaAuth';
 
 import i18n from './i18n';
-import {isDatabaseError, isPasswordError, isUserError} from './utils';
+import {
+    createSsoAuthorizeUrl,
+    getSsoReturnTo,
+    isDatabaseError,
+    isPasswordError,
+    isUserError,
+} from './utils';
 
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
 
@@ -29,12 +35,15 @@ interface AuthenticationProps {
 function Authentication({closable = false}: AuthenticationProps) {
     const history = useHistory();
     const location = useLocation();
+    const isDirectAuthPage = Boolean(useRouteMatch({path: routes.auth, exact: true}));
 
     const needDatabase = useLoginWithDatabase();
+    const oidcAvailable = useOidcAvailable();
 
     const [authenticate, {isLoading}] = authenticationApi.useAuthenticateMutation();
 
     const {returnUrl, database: databaseFromQuery} = parseQuery(location);
+    const currentHref = window.location.href;
 
     const path = React.useMemo(() => {
         let path: string | undefined;
@@ -65,6 +74,22 @@ function Authentication({closable = false}: AuthenticationProps) {
 
     const useMeta = useMetaAuth(path);
 
+    const ssoUrl = React.useMemo(() => {
+        if (!oidcAvailable) {
+            return undefined;
+        }
+
+        const homePath = getHomePagePath(undefined, undefined, {withBasename: true});
+        const currentUrl = new URL(currentHref);
+        const returnTo = getSsoReturnTo({
+            currentUrl,
+            fallbackPath: homePath,
+            isDirectAuthPage,
+            returnUrl,
+        });
+        return createSsoAuthorizeUrl(currentUrl.host, returnTo);
+    }, [currentHref, isDirectAuthPage, oidcAvailable, returnUrl]);
+
     const [login, setLogin] = React.useState('');
     const [database, setDatabase] = React.useState(databaseFromQuery?.toString() || undefined);
     const [password, setPass] = React.useState('');
@@ -208,6 +233,17 @@ function Authentication({closable = false}: AuthenticationProps) {
                 >
                     Sign in
                 </Button>
+                {ssoUrl && (
+                    <Button
+                        view="outlined"
+                        href={ssoUrl}
+                        width="max"
+                        size="l"
+                        className={b('button-sso')}
+                    >
+                        {i18n('action_via-sso')}
+                    </Button>
+                )}
                 {/* always preserve place for general error to prevent container height jumping */}
                 <div className={b('general-error')}>{generalError}</div>
             </form>

src/containers/Authentication/__test__/utils.test.ts

@@ -0,0 +1,16 @@
+import {getSsoReturnTo} from '../utils';
+
+describe('getSsoReturnTo', () => {
+    test('falls back when the implicit current path is not a safe local path', () => {
+        const fallbackPath = '/ui/home';
+
+        expect(
+            getSsoReturnTo({
+                currentUrl: new URL('https://trusted-host//attacker.example'),
+                fallbackPath,
+                isDirectAuthPage: false,
+                returnUrl: undefined,
+            }),
+        ).toBe(fallbackPath);
+    });
+});

src/containers/Authentication/i18n/en.json

@@ -2,5 +2,6 @@
   "description_default-error": "Unknown error occurred",
   "action_show-password": "Show password",
   "action_hide-password": "Hide password",
-  "action_close": "Close"
+  "action_close": "Close",
+  "action_via-sso": "via SSO"
 }

src/containers/Authentication/utils.ts

@@ -4,6 +4,58 @@ interface AuthError {
     };
 }
 
+export function createSsoAuthorizeUrl(host: string, returnTo: string) {
+    const url = new URL('/meta/oidc/authorize', `https://${host}`);
+    url.searchParams.set('return_to', returnTo);
+
+    return url.href;
+}
+
+interface GetSsoReturnToParams {
+    currentUrl: URL;
+    fallbackPath: string;
+    isDirectAuthPage: boolean;
+    returnUrl: unknown;
+}
+
+function isSafeLocalReturnTo(path: string) {
+    return (
+        path.startsWith('/') &&
+        !path.startsWith('//') &&
+        !path.includes('\\') &&
+        !path.includes('\r') &&
+        !path.includes('\n')
+    );
+}
+
+export function getSsoReturnTo({
+    currentUrl,
+    fallbackPath,
+    isDirectAuthPage,
+    returnUrl,
+}: GetSsoReturnToParams) {
+    if (!isDirectAuthPage) {
+        const path = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
+        return isSafeLocalReturnTo(path) ? path : fallbackPath;
+    }
+
+    if (typeof returnUrl !== 'string') {
+        return fallbackPath;
+    }
+
+    try {
+        const savedReturnUrl = new URL(decodeURIComponent(returnUrl));
+        if (savedReturnUrl.origin !== currentUrl.origin) {
+            return fallbackPath;
+        }
+
+        const path = `${savedReturnUrl.pathname}${savedReturnUrl.search}${savedReturnUrl.hash}`;
+        return isSafeLocalReturnTo(path) ? path : fallbackPath;
+    } catch {
+        return fallbackPath;
+    }
+}
+
 function isAuthError(error: unknown): error is AuthError {
     return Boolean(
         error &&

src/store/reducers/capabilities/hooks.ts

@@ -60,6 +60,13 @@ export const useSchemaTopicDataAvailable = () => {
     return useGetMetaFeatureVersion('/meta/schema_topic_data') >= 1;
 };
 
+export const useOidcAvailable = () => {
+    const authorizeAvailable = useGetMetaFeatureVersion('/meta/oidc/authorize') >= 1;
+    const callbackAvailable = useGetMetaFeatureVersion('/meta/oidc/callback') >= 1;
+
+    return authorizeAvailable && callbackAvailable;
+};
+
 export const useCreateDirectoryFeatureAvailable = () => {
     return useGetFeatureVersion('/scheme/directory') > 0;
 };

src/types/api/capabilities.ts

@@ -60,6 +60,8 @@ export type MetaCapability =
     | '/meta/delete_cluster'
     | '/meta/events'
     | '/meta/login'
+    | '/meta/oidc/authorize'
+    | '/meta/oidc/callback'
     | '/meta/whoami'
     | '/meta/databases'
     | '/meta/environments'