@multiplatform.one/keycloak 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/keycloak",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "keycloak client for multiplatform.one ecosystem",
   "main": "dist/lib",
   "module": "dist/esm",

package/src/hooks/useKeycloak/index.ts

@@ -4,7 +4,7 @@
  * File Created: 08-11-2022 14:10:44
  * Author: Clay Risser
  * -----
- * Last Modified: 17-04-2023 19:14:28
+ * Last Modified: 18-04-2023 00:28:11
  * Modified By: Clay Risser
  * -----
  * Risser Labs LLC (c) Copyright 2021 - 2022
@@ -27,6 +27,7 @@ export * from './useKeycloak';
 
 export interface IKeycloak {
   authenticated?: boolean;
+  idToken?: string;
   realmAccess?: KeycloakRoles;
   refreshToken?: string;
   refreshTokenParsed?: KeycloakTokenParsed;

package/src/hooks/useKeycloak/useKeycloak.ts

@@ -4,7 +4,7 @@
  * File Created: 08-11-2022 06:04:59
  * Author: Clay Risser
  * -----
- * Last Modified: 24-02-2023 06:22:07
+ * Last Modified: 18-04-2023 04:08:56
  * Modified By: Clay Risser
  * -----
  * Risser Labs LLC (c) Copyright 2021 - 2022

package/src/provider/afterAuth.tsx

@@ -36,20 +36,33 @@ const logger = console;
 
 export const AfterAuth: FC<AfterAuthProps> = ({ children }: AfterAuthProps) => {
   const authConfig = useAuthConfig();
-  const { token, refreshToken, authenticated } = useKeycloak();
+  const { token, refreshToken, authenticated, idToken } = useKeycloak();
   const authState = useAuthState();
 
   useEffect(() => {
     if (!authenticated) return;
     if (token) {
       authState.setToken(token);
+      if (idToken) authState.setIdToken(idToken);
       if (authConfig.ensureFreshness && refreshToken) authState.setRefreshToken(refreshToken);
     }
-  }, [token, refreshToken]);
+  }, [token, refreshToken, idToken]);
+
+  useEffect(() => {
+    if (authConfig.debug && authState.token) logger.debug('token', authState.token);
+  }, [authState.token]);
+
+  useEffect(() => {
+    if (authConfig.debug && authState.idToken) logger.debug('idToken', authState.idToken);
+  }, [authState.idToken]);
+
+  useEffect(() => {
+    if (authConfig.debug && authState.refreshToken) logger.debug(authState.refreshToken);
+  }, [authState.refreshToken]);
+
+  useEffect(() => {
+    if (authConfig.debug) logger.debug('authenticated', authenticated);
+  }, [authenticated]);
 
-  if (authConfig.debug) {
-    logger.debug('authenticated', authenticated);
-    logger.debug('token', token);
-  }
   return <>{children}</>;
 };

package/src/provider/keycloakProvider.tsx

@@ -58,15 +58,21 @@ export const KeycloakProvider: FC<KeycloakProviderProps> = ({
   const LoadingComponent = loadingComponent || (() => <>{debug ? 'authenticating' : null}</>);
   const { query } = MultiPlatform.isNext ? useRouter() : { query: {} };
   const authConfig = useAuthConfig();
+  const [idToken, setIdToken] = useState<string | boolean>(
+    ('idToken' in query && (query.idToken?.toString() || true)) || authState.idToken || false,
+  );
   const [token, setToken] = useState<string | boolean>(
     ('token' in query && (query.token?.toString() || true)) || authState.token || false,
   );
   const [refreshToken, setRefreshToken] = useState<string | boolean>(
-    ('refreshToken' in query && (query.refreshToken?.toString() || true)) || authState.refreshToken || false,
+    (authConfig.ensureFreshness &&
+      (('refreshToken' in query && (query.refreshToken?.toString() || true)) || authState.refreshToken)) ||
+      false,
   );
+  const explicitToken = 'idToken' in query || 'token' in query || 'refreshToken' in query;
 
   useEffect(() => {
-    if (token !== true && refreshToken !== true) return;
+    if (token !== true && refreshToken !== true && idToken !== true) return;
     if (debug) logger.debug('post message', { type: 'LOADED' });
     (authConfig.messageHandlerKeys || []).forEach((key: string) => {
       window?.webkit?.messageHandlers?.[key]?.postMessage(JSON.stringify({ type: 'LOADED' }));
@@ -92,11 +98,41 @@ export const KeycloakProvider: FC<KeycloakProviderProps> = ({
         setToken(message.payload);
       }
     };
-    if (debug)
+    if (debug) {
       logger.debug('listening for message', {
         type: 'TOKEN',
         payload: '<some_token>',
       });
+    }
+    window.addEventListener('message', messageCallback);
+    return () => {
+      window.removeEventListener('message', messageCallback);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (idToken !== true) return;
+    const messageCallback = (e: MessageEvent<any>) => {
+      let data = e?.data;
+      if (typeof data === 'string') {
+        try {
+          data = JSON.parse(data);
+        } catch (err) {}
+      }
+      if (debug) logger.debug('received message', data);
+      const message: MessageSchema = data;
+      if (!message.type) return;
+      if (message.type.toUpperCase() === 'ID_TOKEN' && message.payload) {
+        if (debug) logger.debug('setting id token', message.payload);
+        setIdToken(message.payload);
+      }
+    };
+    if (debug) {
+      logger.debug('listening for message', {
+        type: 'ID_TOKEN',
+        payload: '<some_id_token>',
+      });
+    }
     window.addEventListener('message', messageCallback);
     return () => {
       window.removeEventListener('message', messageCallback);
@@ -120,11 +156,12 @@ export const KeycloakProvider: FC<KeycloakProviderProps> = ({
         setRefreshToken(message.payload);
       }
     };
-    if (debug)
+    if (debug) {
       logger.debug('listening for message', {
         type: 'REFRESH_TOKEN',
         payload: '<some_refresh_token>',
       });
+    }
     window.addEventListener('message', messageCallback);
     return () => {
       window.removeEventListener('message', messageCallback);
@@ -149,12 +186,15 @@ export const KeycloakProvider: FC<KeycloakProviderProps> = ({
     };
     if (token && typeof token === 'string') {
       initOptions.token = token;
+      if (idToken && typeof idToken === 'string') initOptions.idToken = idToken;
       if (refreshToken && typeof refreshToken === 'string') initOptions.refreshToken = refreshToken;
-      initOptions.checkLoginIframe = false;
-      initOptions.onLoad = undefined;
+      if (explicitToken) {
+        initOptions.checkLoginIframe = false;
+        initOptions.onLoad = undefined;
+      }
     }
     return initOptions;
-  }, [keycloakInitOptions, token, refreshToken]);
+  }, [keycloakInitOptions, token, refreshToken, idToken]);
 
   if (token === true || refreshToken === true) return <LoadingComponent />;
   if (cookies && authConfig.ssr) {

package/src/state/index.ts

@@ -4,7 +4,7 @@
  * File Created: 22-11-2022 17:40:53
  * Author: Clay Risser
  * -----
- * Last Modified: 24-02-2023 06:26:51
+ * Last Modified: 18-04-2023 00:27:22
  * Modified By: Clay Risser
  * -----
  * Risser Labs LLC (c) Copyright 2021 - 2022
@@ -27,8 +27,9 @@ import { createStateStore } from 'multiplatform.one/zustand';
 const { useStore } = createStateStore(
   'auth',
   {
-    token: '',
+    idToken: '',
     refreshToken: '',
+    token: '',
   },
   undefined,
   { persist: true },