Fix: try it logout (#502)

* displays authentication section * enables logging out using a popup * add try it check when displaying authentication
microsoftgraph · May 6, 2020 · 6ed2330 · 6ed2330
1 parent aed79ef
commit 6ed2330
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/src/app/services/actions/auth-action-creators.ts b/src/app/services/actions/auth-action-creators.ts
@@ -1,6 +1,6 @@
 import { IAction } from '../../../types/action';
 import { Mode } from '../../../types/enums';
-import { logOut } from '../graph-client/msal-service';
+import { logOut, logOutPopUp } from '../graph-client/msal-service';
 import { GET_AUTH_TOKEN_SUCCESS, GET_CONSENTED_SCOPES_SUCCESS, LOGOUT_SUCCESS } from '../redux-constants';
 
 export function getAuthTokenSuccess(response: string): IAction {
@@ -28,6 +28,8 @@ export function signOut() {
     const { graphExplorerMode } = getState();
     if (graphExplorerMode === Mode.Complete) {
       logOut();
+    } else {
+      logOutPopUp();
     }
     dispatch(signOutSuccess(''));
   };

diff --git a/src/app/services/graph-client/msal-service.ts b/src/app/services/graph-client/msal-service.ts
@@ -72,6 +72,20 @@ export function logOut() {
   msalApplication.logout();
 }
 
+export function logOutPopUp() {
+  // @ts-ignore
+  msalApplication.clearCache();
+  // @ts-ignore
+  msalApplication.account = null;
+  // @ts-ignore
+  msalApplication.authorityInstance.resolveEndpointsAsync().then(authority => {
+    const urlNavigate = authority.EndSessionEndpoint
+        ? authority.EndSessionEndpoint
+        : `${msalApplication.authority}oauth2/v2.0/logout`;
+    (msalApplication as any).openPopup(urlNavigate, 'msal', 400, 600);
+  });
+}
+
 /**
  * Generates a new access token from passed in scopes
  * @param {string[]} scopes passed to generate token

diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
@@ -373,6 +373,8 @@ class App extends Component<IAppProps, IAppState> {
             <div className={layout}>
               {graphExplorerMode === Mode.TryIt && headerMessaging(classes, query)}
 
+              {graphExplorerMode === Mode.TryIt && this.displayAuthenticationSection(minimised)}
+
               {displayContent && <>
                 <div style={{ marginBottom: 8 }}>
                   <QueryRunner onSelectVerb={this.handleSelectVerb} />