@multiplatform.one/keycloak 0.2.17 → 0.3.3

package/package.json

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

package/src/authConfig.ts

@@ -4,7 +4,7 @@
  * File Created: 08-11-2022 09:21:15
  * Author: Clay Risser
  * -----
- * Last Modified: 25-04-2023 23:08:17
+ * Last Modified: 14-05-2023 01:22:15
  * Modified By: Clay Risser
  * -----
  * Risser Labs LLC (c) Copyright 2021 - 2022
@@ -26,8 +26,8 @@ import { createContext } from 'react';
 
 export const defaultAuthConfig: AuthConfig = {
   ensureFreshness: true,
-  persist: true,
-  ssr: true,
+  persist: false,
+  ssr: false,
 };
 
 export const AuthConfigContext = createContext<AuthConfig>(defaultAuthConfig);

package/src/provider/afterAuth.tsx

@@ -57,7 +57,7 @@ export const AfterAuth: FC<AfterAuthProps> = ({ children }: AfterAuthProps) => {
   }, [authState.idToken]);
 
   useEffect(() => {
-    if (authConfig.debug && authState.refreshToken) logger.debug(authState.refreshToken);
+    if (authConfig.debug && authState.refreshToken) logger.debug('refreshToken', authState.refreshToken);
   }, [authState.refreshToken]);
 
   useEffect(() => {

package/src/provider/index.tsx

@@ -23,30 +23,83 @@
  */
 
 import React, { useMemo } from 'react';
+import type { AuthClientEvent, AuthClientError, AuthClientTokens } from '@bitspur/react-keycloak-core';
 import type { AuthConfig } from '../authConfig';
-import type { FC } from 'react';
-import type { KeycloakProviderProps } from './keycloakProvider';
+import type { FC, ComponentType, ReactNode } from 'react';
+import type { KeycloakConfig, KeycloakInitOptions } from '@bitspur/keycloak-js';
 import { AuthConfigContext, defaultAuthConfig } from '../authConfig';
 import { KeycloakProvider } from './keycloakProvider';
+// @ts-ignore
+import { config } from 'app/config';
 
-export interface AuthProviderProps extends KeycloakProviderProps {
-  authConfig?: Partial<AuthConfig>;
+export interface AuthProviderProps
+  extends Partial<Omit<AuthConfig, 'persist'>>,
+    Omit<KeycloakConfig, 'url'>,
+    KeycloakInitOptions {
+  children: ReactNode;
+  cookies?: unknown;
+  disabled?: boolean;
+  baseUrl?: string;
+  loadingComponent?: ComponentType;
+  onEvent?: (eventType: AuthClientEvent, error?: AuthClientError) => void;
+  onTokens?: (tokens: AuthClientTokens) => void;
 }
 
-export const AuthProvider: FC<AuthProviderProps> = (props: AuthProviderProps) => {
-  const { authConfig, debug } = props;
-  const authConfigValue = useMemo(
+const persist = config.get('KEYCLOAK_PERSIST') === '1';
+
+export const AuthProvider: FC<AuthProviderProps> = ({
+  // keycloak config
+  realm,
+  clientId,
+  baseUrl,
+  // auth config
+  debug,
+  ensureFreshness,
+  loginRoute,
+  messageHandlerKeys,
+  ssr,
+  // props
+  children,
+  cookies,
+  disabled,
+  loadingComponent,
+  onEvent,
+  onTokens,
+  ...keycloakInitOptions
+}: AuthProviderProps) => {
+  const authConfig = useMemo(
     () => ({
       ...defaultAuthConfig,
-      ...authConfig,
-      debug: !!debug,
+      debug,
+      ensureFreshness,
+      loginRoute,
+      messageHandlerKeys,
+      persist: ssr ? false : persist,
+      ssr,
     }),
-    [],
+    [debug, ensureFreshness, loginRoute, messageHandlerKeys, persist, ssr],
   );
 
+  if (disabled) {
+    return <AuthConfigContext.Provider value={authConfig}>{children}</AuthConfigContext.Provider>;
+  }
+
   return (
-    <AuthConfigContext.Provider value={authConfigValue}>
-      <KeycloakProvider {...props} />
+    <AuthConfigContext.Provider value={authConfig}>
+      <KeycloakProvider
+        cookies={cookies}
+        keycloakConfig={{
+          realm,
+          clientId,
+          url: baseUrl,
+        }}
+        keycloakInitOptions={keycloakInitOptions}
+        loadingComponent={loadingComponent}
+        onEvent={onEvent}
+        onTokens={onTokens}
+      >
+        {children}
+      </KeycloakProvider>
     </AuthConfigContext.Provider>
   );
 };

package/src/provider/keycloakProvider.native.tsx

@@ -32,7 +32,7 @@ import { KeycloakProvider as ExpoKeycloakProvider } from 'expo-keycloak-auth';
 export const KeycloakProvider: FC<KeycloakProviderProps> = ({ children, keycloakConfig }: KeycloakProviderProps) => {
   const clonedKeycloakConfig = {
     ...(keycloakConfig as Omit<KeycloakConfig, 'baseUrl'>),
-    url: keycloakConfig.baseUrl,
+    url: keycloakConfig.url,
   };
   // @ts-ignore
   delete keycloakConfig.baseUrl;

package/src/provider/keycloakProvider.tsx

@@ -25,7 +25,7 @@
 import Keycloak from '@bitspur/keycloak-js';
 import React, { useMemo, useEffect, useState, useCallback } from 'react';
 import type { AuthClientEvent, AuthClientError, AuthClientTokens } from '@bitspur/react-keycloak-core';
-import type { KeycloakInitOptions } from '@bitspur/keycloak-js';
+import type { KeycloakInitOptions, KeycloakConfig } from '@bitspur/keycloak-js';
 import type { ReactNode, ComponentType } from 'react';
 import { AfterAuth } from './afterAuth';
 import { MultiPlatform } from 'multiplatform.one';
@@ -38,8 +38,6 @@ import { useRouter } from 'next/router';
 export interface KeycloakProviderProps {
   children: ReactNode;
   cookies?: unknown;
-  debug?: boolean;
-  disabled?: boolean;
   keycloakConfig: KeycloakConfig;
   keycloakInitOptions?: KeycloakInitOptions;
   loadingComponent?: ComponentType;
@@ -52,35 +50,42 @@ const logger = console;
 export function KeycloakProvider({
   children,
   cookies,
-  debug,
   keycloakConfig,
   keycloakInitOptions,
   loadingComponent,
   onEvent,
   onTokens,
 }: KeycloakProviderProps) {
+  const { debug, ensureFreshness, persist, messageHandlerKeys, ssr } = useAuthConfig();
   const authState = useAuthState();
   const LoadingComponent = loadingComponent || (() => <>{debug ? 'authenticating' : null}</>);
   const { query } = MultiPlatform.isNext ? useRouter() : { query: {} };
-  const authConfig = useAuthConfig();
+  const [refreshToken, setRefreshToken] = useState<string | boolean>(
+    validToken(
+      (ensureFreshness &&
+        (('refreshToken' in query && (query.refreshToken?.toString() || true)) ||
+          (persist && authState.refreshToken))) ||
+        false,
+    ),
+  );
   const [idToken, setIdToken] = useState<string | boolean>(
-    ('idToken' in query && (query.idToken?.toString() || true)) || (authConfig.persist && authState.idToken) || false,
+    validToken(
+      ('idToken' in query && (query.idToken?.toString() || true)) || (persist && authState.idToken) || false,
+      refreshToken,
+    ),
   );
   const [token, setToken] = useState<string | boolean>(
-    ('token' in query && (query.token?.toString() || true)) || (authConfig.persist && authState.token) || false,
-  );
-  const [refreshToken, setRefreshToken] = useState<string | boolean>(
-    (authConfig.ensureFreshness &&
-      (('refreshToken' in query && (query.refreshToken?.toString() || true)) ||
-        (authConfig.persist && authState.refreshToken))) ||
-      false,
+    validToken(
+      ('token' in query && (query.token?.toString() || true)) || (persist && authState.token) || false,
+      refreshToken,
+    ),
   );
   const explicitToken = 'idToken' in query || 'token' in query || 'refreshToken' in query;
 
   useEffect(() => {
     if (token !== true && refreshToken !== true && idToken !== true) return;
     if (debug) logger.debug('post message', { type: 'LOADED' });
-    (authConfig.messageHandlerKeys || []).forEach((key: string) => {
+    (messageHandlerKeys || []).forEach((key: string) => {
       window?.webkit?.messageHandlers?.[key]?.postMessage(JSON.stringify({ type: 'LOADED' }));
     });
     window?.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'LOADED' }));
@@ -88,9 +93,9 @@ export function KeycloakProvider({
   }, []);
 
   useEffect(() => {
-    if (token !== true) return;
+    if (refreshToken !== true) return;
     const messageCallback = (e: MessageEvent<any>) => {
-      let data = e?.data;
+      let data = e?.data || null;
       if (typeof data === 'string') {
         try {
           data = JSON.parse(data);
@@ -99,15 +104,15 @@ export function KeycloakProvider({
       if (debug) logger.debug('received message', data);
       const message: MessageSchema = data;
       if (!message.type) return;
-      if (message.type.toUpperCase() === 'TOKEN' && message.payload) {
-        if (debug) logger.debug('setting token', message.payload);
-        setToken(message.payload);
+      if (message.type.toUpperCase() === 'REFRESH_TOKEN' && message.payload) {
+        if (debug) logger.debug('setting refresh token', message.payload);
+        setRefreshToken(validToken(message.payload));
       }
     };
     if (debug) {
       logger.debug('listening for message', {
-        type: 'TOKEN',
-        payload: '<some_token>',
+        type: 'REFRESH_TOKEN',
+        payload: '<some_refresh_token>',
       });
     }
     window.addEventListener('message', messageCallback);
@@ -117,9 +122,9 @@ export function KeycloakProvider({
   }, []);
 
   useEffect(() => {
-    if (idToken !== true) return;
+    if (token !== true) return;
     const messageCallback = (e: MessageEvent<any>) => {
-      let data = e?.data;
+      let data = e?.data || null;
       if (typeof data === 'string') {
         try {
           data = JSON.parse(data);
@@ -128,15 +133,15 @@ export function KeycloakProvider({
       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 (message.type.toUpperCase() === 'TOKEN' && message.payload) {
+        if (debug) logger.debug('setting token', message.payload);
+        setToken(validToken(message.payload, refreshToken));
       }
     };
     if (debug) {
       logger.debug('listening for message', {
-        type: 'ID_TOKEN',
-        payload: '<some_id_token>',
+        type: 'TOKEN',
+        payload: '<some_token>',
       });
     }
     window.addEventListener('message', messageCallback);
@@ -146,9 +151,9 @@ export function KeycloakProvider({
   }, []);
 
   useEffect(() => {
-    if (refreshToken !== true) return;
+    if (idToken !== true) return;
     const messageCallback = (e: MessageEvent<any>) => {
-      let data = e?.data;
+      let data = e?.data || null;
       if (typeof data === 'string') {
         try {
           data = JSON.parse(data);
@@ -157,15 +162,15 @@ export function KeycloakProvider({
       if (debug) logger.debug('received message', data);
       const message: MessageSchema = data;
       if (!message.type) return;
-      if (message.type.toUpperCase() === 'REFRESH_TOKEN' && message.payload) {
-        if (debug) logger.debug('setting refresh token', message.payload);
-        setRefreshToken(message.payload);
+      if (message.type.toUpperCase() === 'ID_TOKEN' && message.payload) {
+        if (debug) logger.debug('setting id token', message.payload);
+        setIdToken(validToken(message.payload, refreshToken));
       }
     };
     if (debug) {
       logger.debug('listening for message', {
-        type: 'REFRESH_TOKEN',
-        payload: '<some_refresh_token>',
+        type: 'ID_TOKEN',
+        payload: '<some_id_token>',
       });
     }
     window.addEventListener('message', messageCallback);
@@ -188,7 +193,7 @@ export function KeycloakProvider({
     () =>
       typeof window !== 'undefined' &&
       new Keycloak({
-        url: keycloakConfig.baseUrl,
+        url: keycloakConfig.url,
         realm: keycloakConfig.realm,
         clientId: keycloakConfig.clientId,
       }),
@@ -214,11 +219,13 @@ export function KeycloakProvider({
   }, [keycloakInitOptions, token, refreshToken, idToken]);
 
   if (token === true || idToken === true || refreshToken === true) return <LoadingComponent />;
-  if (cookies && authConfig.ssr) {
+  if (cookies && ssr) {
     return (
       // @ts-ignore
       <SSRKeycloakProvider
         LoadingComponent={<LoadingComponent />}
+        // keycloak-js already handles refreshing tokens
+        autoRefreshToken={false}
         initOptions={initOptions}
         onEvent={handleEvent}
         onTokens={onTokens}
@@ -226,7 +233,7 @@ export function KeycloakProvider({
         keycloakConfig={{
           clientId: keycloakConfig.clientId,
           realm: keycloakConfig.realm,
-          url: keycloakConfig.baseUrl,
+          url: keycloakConfig.url,
         }}
       >
         <AfterAuth>{children}</AfterAuth>
@@ -238,6 +245,8 @@ export function KeycloakProvider({
     <ReactKeycloakProvider
       LoadingComponent={<LoadingComponent />}
       authClient={keycloak}
+      // keycloak-js already handles refreshing tokens
+      autoRefreshToken={false}
       initOptions={initOptions}
       onEvent={handleEvent}
       onTokens={onTokens}
@@ -247,11 +256,23 @@ export function KeycloakProvider({
   );
 }
 
-export interface KeycloakConfig {
-  clientId: string;
-  realm: string;
-  scheme?: string;
-  baseUrl: string;
+function validToken(token: string | boolean, refreshToken?: string | boolean) {
+  if (typeof token !== 'string') return token;
+  if (refreshToken) {
+    if (refreshToken === true || isTokenValid(refreshToken)) return token;
+    return false;
+  }
+  return isTokenValid(token) ? token : false;
+}
+
+function isTokenValid(token: string) {
+  try {
+    const { exp } = JSON.parse(Buffer.from(token.split('.')?.[1] || '', 'base64').toString() || '{}');
+    return Math.floor(Date.now() / 1000) <= exp;
+  } catch (err) {
+    if (err instanceof SyntaxError) return false;
+    throw err;
+  }
 }
 
 export const defaultKeycloakInitOptions: KeycloakInitOptions = {