Merge pull request #105 from apollographql/william/logout

NEBULA-1288: Add logout messages to parent

Author: William010x

.changeset/tiny-camels-behave.md

@@ -0,0 +1,5 @@
+---
+'@apollo/explorer': minor
+---
+
+Add logout messages to parent

src/helpers/constants.ts

@@ -27,8 +27,10 @@ export const EXPLORER_LISTENING_FOR_HANDSHAKE = 'ExplorerListeningForHandshake';
 export const HANDSHAKE_RESPONSE = 'HandshakeResponse';
 export const SET_PARTIAL_AUTHENTICATION_TOKEN_FOR_PARENT =
   'SetPartialAuthenticationTokenForParent';
+export const TRIGGER_LOGOUT_IN_PARENT = 'TriggerLogoutInParent';
 export const EXPLORER_LISTENING_FOR_PARTIAL_TOKEN =
   'ExplorerListeningForPartialToken';
 export const PARTIAL_AUTHENTICATION_TOKEN_RESPONSE =
   'PartialAuthenticationTokenResponse';
 export const INTROSPECTION_QUERY_WITH_HEADERS = 'IntrospectionQueryWithHeaders';
+export const PARENT_LOGOUT_SUCCESS = 'ParentLogoutSuccess';

src/helpers/postMessageRelayHelpers.ts

@@ -8,6 +8,8 @@ import {
   SCHEMA_RESPONSE,
   SET_PARTIAL_AUTHENTICATION_TOKEN_FOR_PARENT,
   EXPLORER_LISTENING_FOR_PARTIAL_TOKEN,
+  PARENT_LOGOUT_SUCCESS,
+  TRIGGER_LOGOUT_IN_PARENT,
 } from './constants';
 import type { JSONValue } from '../types';
 
@@ -79,6 +81,9 @@ export type OutgoingEmbedMessage =
         status?: number;
         headers?: Headers;
       };
+    }
+  | {
+      name: typeof PARENT_LOGOUT_SUCCESS;
     };
 
 // TODO(Maya) uncomment and switch to MessageEvent as a generic when tsdx supports Typescript V4.
@@ -101,10 +106,14 @@ export type IncomingEmbedMessage = MessageEvent;
 //   }>
 // | MessageEvent<{
 //     name: typeof SET_PARTIAL_AUTHENTICATION_TOKEN_FOR_PARENT;
-//     key: string;
+//     localStorageKey: string;
 //     partialToken: string;
 //   }>
 // | MessageEvent<{
+//     name: typeof TRIGGER_LOGOUT_IN_PARENT;
+//     localStorageKey: string;
+//   }>
+// | MessageEvent<{
 //     name: typeof EXPLORER_LISTENING_FOR_PARTIAL_TOKEN;
 //     localStorageKey?: string;
 //   }>
@@ -276,6 +285,26 @@ export const handleAuthenticationPostMessage = ({
     );
   }
 
+  // When the embed logs out, remove the partial token in local storage
+  if (data.name === TRIGGER_LOGOUT_IN_PARENT) {
+    const partialEmbedApiKeysString = window.localStorage.getItem(
+      'apolloStudioEmbeddedExplorerEncodedApiKey'
+    );
+    const partialEmbedApiKeys = partialEmbedApiKeysString
+      ? JSON.parse(partialEmbedApiKeysString)
+      : {};
+    delete partialEmbedApiKeys[data.localStorageKey];
+    window.localStorage.setItem(
+      'apolloStudioEmbeddedExplorerEncodedApiKey',
+      JSON.stringify(partialEmbedApiKeys)
+    );
+    sendPostMessageToEmbed({
+      message: { name: PARENT_LOGOUT_SUCCESS },
+      embeddedIFrameElement,
+      embedUrl,
+    });
+  }
+
   if (
     data.name === EXPLORER_LISTENING_FOR_PARTIAL_TOKEN &&
     data.localStorageKey