Call the new revoke_user_session endpoint from the FE (#13165)

airbytehq · Jul 4, 2022 · de3a14b · de3a14b
1 parent d545369
commit de3a14b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/airbyte-webapp/src/packages/cloud/lib/domain/users/UserService.ts b/airbyte-webapp/src/packages/cloud/lib/domain/users/UserService.ts
@@ -43,6 +43,10 @@ export class UserService extends AirbyteRequestService {
     return this.fetch<User>(`v1/web_backend/users/create`, user);
   }
 
+  public async revokeUserSession(): Promise<void> {
+    return this.fetch("v1/web_backend/users/revoke_user_session");
+  }
+
   public async remove(workspaceId: string, email: string): Promise<void> {
     return this.fetch(`v1/web_backend/cloud_workspaces/revoke_user`, {
       email,

diff --git a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx
@@ -35,7 +35,7 @@ export type AuthChangeEmail = (email: string, password: string) => Promise<void>
 
 export type AuthSendEmailVerification = () => Promise<void>;
 export type AuthVerifyEmail = (code: string) => Promise<void>;
-export type AuthLogout = () => void;
+export type AuthLogout = () => Promise<void>;
 
 interface AuthContextApi {
   user: User | null;
@@ -108,6 +108,7 @@ export const AuthenticationProvider: React.FC = ({ children }) => {
         }
       },
       async logout(): Promise<void> {
+        await userService.revokeUserSession();
         await authService.signOut();
         queryClient.removeQueries();
         loggedOut();

diff --git a/airbyte-webapp/src/packages/cloud/views/users/AccountSettingsView/AccountSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/users/AccountSettingsView/AccountSettingsView.tsx
@@ -1,6 +1,7 @@
 import { Field, FieldProps, Form, Formik } from "formik";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useMutation } from "react-query";
 import styled from "styled-components";
 
 import { LabeledInput, LoadingButton } from "components";
@@ -18,7 +19,8 @@ const Header = styled.div`
 
 const AccountSettingsView: React.FC = () => {
   const { formatMessage } = useIntl();
-  const { logout } = useAuthService();
+  const authService = useAuthService();
+  const { mutateAsync: logout, isLoading: isLoggingOut } = useMutation(() => authService.logout());
   const user = useCurrentUser();
 
   return (
@@ -63,7 +65,7 @@ const AccountSettingsView: React.FC = () => {
         title={
           <Header>
             <FormattedMessage id="settings.accountSettings.logoutLabel" />
-            <LoadingButton danger onClick={() => logout()} data-testid="button.signout">
+            <LoadingButton danger onClick={() => logout()} isLoading={isLoggingOut} data-testid="button.signout">
               <FormattedMessage id="settings.accountSettings.logoutText" />
             </LoadingButton>
           </Header>