@multiplatform.one/keycloak 0.2.16 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/keycloak",
-  "version": "0.2.16",
+  "version": "0.3.1",
   "description": "keycloak client for multiplatform.one ecosystem",
   "main": "dist/lib",
   "module": "dist/esm",
@@ -115,10 +115,10 @@
   },
   "dependencies": {
     "@bitspur/keycloak-js": "^21.1.1",
-    "@bitspur/react-keycloak-ssr": "^4.0.4",
-    "@bitspur/react-keycloak-web": "^4.0.4",
+    "@bitspur/react-keycloak-ssr": "^4.0.5",
+    "@bitspur/react-keycloak-web": "^4.0.5",
     "core-js-pure": "^3.30.2",
-    "expo-auth-session": "^4.1.0",
+    "expo-auth-session": "^4.0.3",
     "solito": "^3.2.6"
   },
   "resolutions": {

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,
     }),
-    [],
+    [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,27 +50,25 @@ 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 [idToken, setIdToken] = useState<string | boolean>(
-    ('idToken' in query && (query.idToken?.toString() || true)) || (authConfig.persist && authState.idToken) || false,
+    ('idToken' in query && (query.idToken?.toString() || true)) || (persist && authState.idToken) || false,
   );
   const [token, setToken] = useState<string | boolean>(
-    ('token' in query && (query.token?.toString() || true)) || (authConfig.persist && authState.token) || false,
+    ('token' in query && (query.token?.toString() || true)) || (persist && authState.token) || false,
   );
   const [refreshToken, setRefreshToken] = useState<string | boolean>(
-    (authConfig.ensureFreshness &&
-      (('refreshToken' in query && (query.refreshToken?.toString() || true)) ||
-        (authConfig.persist && authState.refreshToken))) ||
+    (ensureFreshness &&
+      (('refreshToken' in query && (query.refreshToken?.toString() || true)) || (persist && authState.refreshToken))) ||
       false,
   );
   const explicitToken = 'idToken' in query || 'token' in query || 'refreshToken' in query;
@@ -80,13 +76,19 @@ export function KeycloakProvider({
   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' }));
     window?.parent?.postMessage(JSON.stringify({ type: 'LOADED' }));
   }, []);
 
+  useEffect(() => {
+    if (typeof idToken === 'string' && !isTokenValid(idToken)) setIdToken(false);
+    if (typeof refreshToken === 'string' && !isTokenValid(refreshToken)) setRefreshToken(false);
+    if (typeof token === 'string' && !isTokenValid(token)) setToken(false);
+  }, [idToken, token, refreshToken]);
+
   useEffect(() => {
     if (token !== true) return;
     const messageCallback = (e: MessageEvent<any>) => {
@@ -188,7 +190,7 @@ export function KeycloakProvider({
     () =>
       typeof window !== 'undefined' &&
       new Keycloak({
-        url: keycloakConfig.baseUrl,
+        url: keycloakConfig.url,
         realm: keycloakConfig.realm,
         clientId: keycloakConfig.clientId,
       }),
@@ -214,11 +216,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 +230,7 @@ export function KeycloakProvider({
         keycloakConfig={{
           clientId: keycloakConfig.clientId,
           realm: keycloakConfig.realm,
-          url: keycloakConfig.baseUrl,
+          url: keycloakConfig.url,
         }}
       >
         <AfterAuth>{children}</AfterAuth>
@@ -238,6 +242,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 +253,14 @@ export function KeycloakProvider({
   );
 }
 
-export interface KeycloakConfig {
-  clientId: string;
-  realm: string;
-  scheme?: string;
-  baseUrl: string;
+export 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 = {