fix(ui): refresh token for basic auth (#7757)

openmetadata-ui/src/main/resources/ui/src/authentication/authenticators/basic-auth.authenticator.tsx

@@ -17,7 +17,10 @@ import React, {
   ReactNode,
   useImperativeHandle,
 } from 'react';
-import { getAccessTokenOnExpiry } from '../../axiosAPIs/auth-API';
+import {
+  AccessTokenResponse,
+  getAccessTokenOnExpiry,
+} from '../../axiosAPIs/auth-API';
 import { AuthTypes } from '../../enums/signin.enum';
 import localState from '../../utils/LocalStorageUtils';
 import { useAuthContext } from '../auth-provider/AuthProvider';
@@ -31,42 +34,31 @@ const BasicAuthenticator = forwardRef(
   ({ children }: BasicAuthenticatorInterface, ref) => {
     const { handleLogout } = useBasicAuth();
     const { setIsAuthenticated, authConfig } = useAuthContext();
+
+    const handleSilentSignIn = async (): Promise<AccessTokenResponse> => {
+      const refreshToken = localState.getRefreshToken();
+
+      if (authConfig.provider !== AuthTypes.BASIC) {
+        Promise.reject('AuthProvider is not Basic');
+      }
+
+      const response = await getAccessTokenOnExpiry({
+        refreshToken: refreshToken as string,
+      });
+
+      localState.setRefreshToken(response.refreshToken);
+      localState.setOidcToken(response.accessToken);
+
+      return Promise.resolve(response);
+    };
+
     useImperativeHandle(ref, () => ({
       invokeLogout() {
         handleLogout();
         setIsAuthenticated(false);
       },
       renewIdToken() {
-        let idToken = '';
+        return handleSilentSignIn();
-        const refreshToken = localState.getRefreshToken();
-        if (authConfig && authConfig.provider !== undefined) {
-          return new Promise((resolve, reject) => {
-            const { provider } = authConfig;
-            if (provider === AuthTypes.BASIC) {
-              getAccessTokenOnExpiry({
-                refreshToken: refreshToken as string,
-              })
-                .then((res) => {
-                  idToken = res.accessToken;
-                  localState.setOidcToken(res.accessToken);
-                  resolve(idToken);
-                })
-                .catch((err) => {
-                  reject(
-                    `Error while renewing id token from Basic Auth: ${err.message}`
-                  );
-                });
-            } else {
-              reject(
-                `Auth Provider ${provider} not supported for renewing tokens.`
-              );
-            }
-          });
-        } else {
-          return Promise.reject(
-            'Cannot renew id token. Authentication Provider is not present.'
-          );
-        }
       },
     }));
 

openmetadata-ui/src/main/resources/ui/src/axiosAPIs/auth-API.ts

@@ -18,7 +18,7 @@ import { PasswordResetRequest } from '../generated/auth/passwordResetRequest';
 import { RegistrationRequest } from '../generated/auth/registrationRequest';
 import { TokenRefreshRequest } from '../generated/auth/tokenRefreshRequest';
 
-interface AccessTokenResponse {
+export interface AccessTokenResponse {
   accessToken: string;
   refreshToken: string;
   tokenType: string;

openmetadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx

@@ -45,7 +45,7 @@ const ForgotPassword = () => {
             <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
           </Col>
           <Col className="flex-center text-center mt-8" span={24}>
-            <Typography.Text strong>
+            <Typography.Text className="tw-text-xl text-semi-bold tw-text-grey-muted">
               Enter your registered email to receive password reset link
             </Typography.Text>
           </Col>

openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx

@@ -178,9 +178,9 @@ const SigninPage = () => {
               'sso-container': !isAuthProviderBasic,
             })}>
             <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
-            <Typography.Text strong className="mt-8 tw-mx-auto tw-text-xl w-83">
+            <Typography.Text className="mt-8 w-80 tw-text-xl text-semi-bold tw-text-grey-muted">
-              Centralized Metadata Store, Discover, <br />
+              Centralized Metadata Store, Discover, Collaborate and get your
-              Collaborate and get your Data Right
+              Data Right
             </Typography.Text>
 
             {isAuthProviderBasic ? (

openmetadata-ui/src/main/resources/ui/src/pages/reset-password/reset-password.component.tsx

@@ -104,7 +104,9 @@ const ResetPassword = () => {
             </Col>
 
             <Col className="mt-12 text-center" span={24}>
-              <Typography.Title level={5}>Reset your Password</Typography.Title>
+              <Typography.Text className="tw-text-xl text-semi-bold tw-text-grey-muted">
+                Reset your Password
+              </Typography.Text>
             </Col>
 
             <Col span={24}>

openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx

@@ -72,13 +72,13 @@ const BasicSignUp = () => {
         <div className="tw-w-5/12">
           <div className="mt-4 tw-text-center flex-center flex-col">
             <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
-            <Typography.Text strong className="mt-8 tw-mx-auto tw-text-xl w-83">
+            <Typography.Text className="mt-8 w-80 tw-text-xl text-semi-bold tw-text-grey-muted">
-              Centralized Metadata Store, Discover, <br />
+              Centralized Metadata Store, Discover, Collaborate and get your
-              Collaborate and get your Data Right
+              Data Right
             </Typography.Text>
 
             {isAuthProviderBasic ? (
-              <div className="m-t-lg" style={{ width: '334px' }}>
+              <div style={{ width: '334px' }}>
                 <Row>
                   <Col span={24}>
                     <>
@@ -157,7 +157,7 @@ const BasicSignUp = () => {
                           Create Account
                         </Button>
 
-                        <Divider className="w-min-0 w-max-200 mt-8 mb-12 justify-center">
+                        <Divider className="w-min-0  mt-8 mb-12 justify-center">
                           <Typography.Text type="secondary">or</Typography.Text>
                         </Divider>
 

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -52,6 +52,9 @@
   margin-right: auto;
   margin-left: auto;
 }
+.text-semi-bold {
+  font-weight: 500;
+}
 .text-center {
   text-align: center;
 }

openmetadata-ui/src/main/resources/ui/src/styles/spacing.less

@@ -271,3 +271,7 @@
   position: absolute;
   right: 15px;
 }
+
+.w-80 {
+  width: 80%;
+}