@myxtra/authentication-green 1.16.0 → 2.1.0-alpha.0

package/README.md

@@ -118,3 +118,68 @@ type Config = {
   position?: 'left' | 'right';
 };
 ```
+
+## Events & window object
+
+The authentication component will emit events and add properties to the window object. For backwards
+compatibility with the orange toolkit, the window properties are the same.
+
+### Window object
+
+Everything is available under the `window.xtra` object. If the user is authenticated, the component
+will also add the following properties to the window object:
+
+```ts
+type XTRA = {
+  user: {
+    firstName: () => string;
+    lastName: () => string;
+    dob: () => number;
+    mob: () => number;
+    yob: () => number;
+    gender: () => 'M' | 'F';
+    phone: () => string;
+    streetName: () => string,
+    houseNr: () => string,
+    box: () => string,
+    zip: () => string,
+    city: () => string,
+    country: () => string,
+    email: () => string,
+    cbh: () => string,
+    state: () => 'Authenticated',
+}
+```
+
+The authenticated event is sent through
+[window.postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage), below you
+can find an example of how to listen for the event:
+
+```ts
+type XtraAuthenticationMessageEventData = {
+  source: 'xtra-authentication';
+  isAuthenticated?: boolean;
+  address?: Address;
+};
+
+const onMessage = (message: MessageEvent<XtraAuthenticationMessageEventData>) => {
+  // Ensure the event wasn't sent from another domain
+  if (event.origin !== new URL(window.location.href).origin) {
+    return;
+  }
+
+  // Ensure the event wasn't sent from another source
+  if (!event.data.source === 'xtra-authenticaiton') {
+    return;
+  }
+
+  if (!event.data.isAuthenticated) {
+    // TODO: add logic in case the user is not authenticated
+    return;
+  }
+
+  // TODO: add logic when the user is authenticated (window.xtra is set here)
+};
+
+window.addEventListener('message', onMessage);
+```