@multiplatform.one/keycloak 2.0.10 → 2.0.11

package/src/provider/AuthProvider/{AuthProvider.tsx → index.tsx}

@@ -1,14 +1,13 @@
 /**
- * File: /src/provider/AuthProvider/AuthProvider.tsx
+ * File: /src/provider/AuthProvider/index.tsx
  * Project: @multiplatform.one/keycloak
- * File Created: 09-01-2024 11:29:20
+ * File Created: 19-11-2024 20:26:31
  * Author: Clay Risser
  * -----
  * BitSpur (c) Copyright 2021 - 2024
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
- *
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
@@ -22,95 +21,145 @@
 
 import KeycloakClient from "keycloak-js";
 import type { KeycloakInitOptions } from "keycloak-js";
-import { MultiPlatform } from "multiplatform.one";
-import type { SessionProviderProps } from "next-auth/react";
+import { isIframe, isWindowDefined, logger } from "multiplatform.one";
 import { SessionProvider } from "next-auth/react";
-import type { PropsWithChildren } from "react";
-import { type ComponentType, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Loading } from "../../Loading";
 import { useAuthConfig } from "../../hooks";
-import type { KeycloakConfig } from "../../keycloak";
-import { Keycloak, KeycloakConfigContext } from "../../keycloak";
 import { KeycloakContext } from "../../keycloak/context";
+import { Keycloak, KeycloakConfigContext } from "../../keycloak/index";
 import { persist, useAuthStore } from "../../state";
 import { validOrRefreshableToken } from "../../token";
 import { AfterAuth } from "../AfterAuth";
-
-export interface AuthProviderProps extends PropsWithChildren {
-  keycloakConfig: KeycloakConfig;
-  keycloakInitOptions?: KeycloakInitOptions;
-  sessionProvider?: Omit<SessionProviderProps, "children">;
-  loadingComponent?: ComponentType;
-}
-
-const logger = console;
-
-export interface Tokens<B = boolean> {
-  idToken?: string | B;
-  refreshToken?: string | B;
-  token?: string | B;
-}
+import type { AuthProviderProps, MessageSchema, Tokens } from "./shared";
+import { AuthSource, AuthStrategy, defaultKeycloakInitOptions } from "./shared";
 
 export function AuthProvider({
   children,
+  disabled,
   keycloakConfig,
   keycloakInitOptions,
   loadingComponent,
   sessionProvider,
 }: AuthProviderProps) {
-  const { debug, messageHandlerKeys } = useAuthConfig();
+  const { debug, messageHandlerKeys, iframeSso } = useAuthConfig();
   const query = new URLSearchParams(
-    typeof window === "undefined" ? "" : window?.location?.search || "",
+    isWindowDefined ? window?.location?.search || "" : "",
   );
   const authStore = useAuthStore();
   const [keycloak, setKeycloak] = useState<Keycloak>();
   const idTokenQuery = query.get("idToken");
   const refreshTokenQuery = query.get("refreshToken");
   const tokenQuery = query.get("token");
-  const initialRefreshToken = useMemo(
+  const [listeningRefreshToken, setListeningRefreshToken] = useState(false);
+  const [listeningToken, setListeningToken] = useState(false);
+  const [listeningIdToken, setListeningIdToken] = useState(false);
+  const [loadedMessagePosted, setLoadedMessagePosted] = useState(false);
+  const initialRefreshTokenQuery = useMemo(
     () =>
-      typeof authStore !== "undefined" &&
       validOrRefreshableToken(
-        MultiPlatform.isIframe
-          ? (typeof refreshTokenQuery === "string" &&
-              (refreshTokenQuery || true)) ||
-              (persist && authStore.refreshToken) ||
-              undefined
+        (!iframeSso && isIframe) || typeof refreshTokenQuery === "string"
+          ? refreshTokenQuery || true
           : undefined,
       ),
-    [],
+    [refreshTokenQuery, iframeSso],
   );
-  const [tokens, setTokens] = useState<Tokens>({
-    refreshToken: initialRefreshToken,
-    token:
-      typeof authStore !== "undefined" &&
+  const initialIdTokenQuery = useMemo(
+    () =>
       validOrRefreshableToken(
-        MultiPlatform.isIframe
-          ? (typeof tokenQuery === "string" && (tokenQuery || true)) ||
-              (persist && authStore.token) ||
-              undefined
+        (!iframeSso && isIframe) || typeof idTokenQuery === "string"
+          ? idTokenQuery || true
           : undefined,
-        initialRefreshToken,
+        initialRefreshTokenQuery,
       ),
-    idToken:
-      typeof authStore !== "undefined" &&
+    [idTokenQuery, initialRefreshTokenQuery, iframeSso],
+  );
+  const initialTokenQuery = useMemo(
+    () =>
       validOrRefreshableToken(
-        MultiPlatform.isIframe
-          ? (typeof idTokenQuery === "string" && (idTokenQuery || true)) ||
-              (persist && authStore.idToken) ||
-              undefined
+        isIframe
+          ? typeof tokenQuery === "string"
+            ? tokenQuery || true
+            : undefined
           : undefined,
-        initialRefreshToken,
+        initialRefreshTokenQuery,
       ),
+    [tokenQuery, initialRefreshTokenQuery, iframeSso],
+  );
+  const [tokens, setTokens] = useState<Tokens>({
+    refreshToken: initialRefreshTokenQuery,
+    token: initialTokenQuery,
+    idToken: initialIdTokenQuery,
   });
+  const authSource = useMemo(() => {
+    if (!iframeSso && isIframe) {
+      if (initialTokenQuery) return AuthSource.Query;
+      return AuthSource.Store;
+    }
+    return AuthSource.Session;
+  }, [initialTokenQuery, iframeSso]);
+  const authStrategy = useMemo(() => {
+    if (authSource === AuthSource.Session) return AuthStrategy.AuthJS;
+    if (authSource === AuthSource.Query) {
+      return AuthStrategy.KeycloakClientImplicit;
+    }
+    if (!persist) return AuthStrategy.KeycloakClientStandard;
+    if (typeof authStore === "undefined") return;
+    if (authStore.token && typeof tokens.token === "string" && tokens.token) {
+      return AuthStrategy.KeycloakClientImplicit;
+    }
+    return AuthStrategy.KeycloakClientStandard;
+  }, [authSource, authStore?.token, tokens.token]);
+  const isLoading = useMemo(() => {
+    if (!authStrategy) return true;
+    if (authStrategy === AuthStrategy.KeycloakClientImplicit) {
+      if (
+        authSource === AuthSource.Query &&
+        (initialRefreshTokenQuery === true ||
+          initialTokenQuery === true ||
+          initialIdTokenQuery === true)
+      ) {
+        return true;
+      }
+      if (authSource === AuthSource.Store && typeof authStore === "undefined") {
+        return true;
+      }
+    }
+    return false;
+  }, [
+    authSource,
+    authStore?.idToken,
+    authStore?.refreshToken,
+    authStore?.token,
+    authStrategy,
+    initialIdTokenQuery,
+    initialRefreshTokenQuery,
+    initialTokenQuery,
+  ]);
+
+  useEffect(() => {
+    if (!persist || typeof authStore === "undefined") return;
+    const refreshToken = validOrRefreshableToken(authStore.refreshToken);
+    const idToken = validOrRefreshableToken(authStore.idToken, refreshToken);
+    const token = validOrRefreshableToken(authStore.token, refreshToken);
+    setTokens({
+      idToken: idToken || undefined,
+      refreshToken: refreshToken || undefined,
+      token: token || undefined,
+    });
+  }, [authStore?.token, authStore?.refreshToken, authStore?.idToken]);
 
   useEffect(() => {
     if (
-      tokens.token !== true &&
-      tokens.refreshToken !== true &&
-      tokens.idToken !== true
-    )
+      disabled ||
+      authSource !== AuthSource.Query ||
+      tokens.token === true ||
+      tokens.refreshToken === true ||
+      tokens.idToken === true ||
+      loadedMessagePosted
+    ) {
       return;
+    }
     if (debug) logger.debug("post message", JSON.stringify({ type: "LOADED" }));
     (messageHandlerKeys || []).forEach((key: string) => {
       window?.webkit?.messageHandlers?.[key]?.postMessage(
@@ -119,11 +168,15 @@ export function AuthProvider({
     });
     window?.ReactNativeWebView?.postMessage(JSON.stringify({ type: "LOADED" }));
     window?.parent?.postMessage(JSON.stringify({ type: "LOADED" }));
-  }, []);
+    setLoadedMessagePosted(true);
+  }, [disabled, authSource, tokens.token, tokens.refreshToken, tokens.idToken]);
 
   useEffect(() => {
-    if (tokens.refreshToken !== true) return;
-    const messageCallback = (e: MessageEvent<any>) => {
+    if (disabled || tokens.refreshToken !== true || listeningRefreshToken) {
+      return;
+    }
+    setListeningRefreshToken(true);
+    function messageCallback(e: MessageEvent<any>) {
       let data = e?.data || null;
       if (typeof data === "string") {
         try {
@@ -140,8 +193,9 @@ export function AuthProvider({
           refreshToken: validOrRefreshableToken(message.payload),
         }));
         window.removeEventListener("message", messageCallback);
+        setListeningRefreshToken(false);
       }
-    };
+    }
     if (debug) {
       logger.debug(
         "listening for message",
@@ -155,11 +209,12 @@ export function AuthProvider({
     return () => {
       window.removeEventListener("message", messageCallback);
     };
-  }, []);
+  }, [disabled, tokens.refreshToken, listeningRefreshToken]);
 
   useEffect(() => {
-    if (tokens.token !== true) return;
-    const messageCallback = (e: MessageEvent<any>) => {
+    if (disabled || tokens.token !== true || listeningToken) return;
+    setListeningToken(true);
+    function messageCallback(e: MessageEvent<any>) {
       let data = e?.data || null;
       if (typeof data === "string") {
         try {
@@ -176,8 +231,9 @@ export function AuthProvider({
           token: validOrRefreshableToken(message.payload, tokens.refreshToken),
         }));
         window.removeEventListener("message", messageCallback);
+        setListeningToken(false);
       }
-    };
+    }
     if (debug) {
       logger.debug(
         "listening for message",
@@ -191,11 +247,12 @@ export function AuthProvider({
     return () => {
       window.removeEventListener("message", messageCallback);
     };
-  }, []);
+  }, [disabled, tokens.token, listeningToken]);
 
   useEffect(() => {
-    if (tokens.idToken !== true) return;
-    const messageCallback = (e: MessageEvent<any>) => {
+    if (disabled || tokens.idToken !== true || listeningIdToken) return;
+    setListeningIdToken(true);
+    function messageCallback(e: MessageEvent<any>) {
       let data = e?.data || null;
       if (typeof data === "string") {
         try {
@@ -215,8 +272,9 @@ export function AuthProvider({
           ),
         }));
         window.removeEventListener("message", messageCallback);
+        setListeningIdToken(false);
       }
-    };
+    }
     if (debug) {
       logger.debug(
         "listening for message",
@@ -230,35 +288,35 @@ export function AuthProvider({
     return () => {
       window.removeEventListener("message", messageCallback);
     };
-  }, []);
+  }, [disabled, tokens.idToken, listeningIdToken]);
 
   const keycloakClient = useMemo(
     () =>
-      !MultiPlatform.isServer &&
-      (!MultiPlatform.isBrowser || MultiPlatform.isIframe) &&
+      !disabled &&
+      !isLoading &&
+      (authStrategy === AuthStrategy.KeycloakClientStandard ||
+        authStrategy === AuthStrategy.KeycloakClientImplicit) &&
       keycloakConfig
         ? new KeycloakClient({
-            url: keycloakConfig.url,
-            realm: keycloakConfig.realm,
             clientId: keycloakConfig.publicClientId || keycloakConfig.clientId,
+            realm: keycloakConfig.realm,
+            url: keycloakConfig.url,
           })
         : undefined,
     [
-      keycloakInitOptions,
+      authStrategy,
+      disabled,
+      isLoading,
       keycloakConfig,
-      tokens.token,
-      tokens.refreshToken,
+      keycloakInitOptions,
       tokens.idToken,
+      tokens.refreshToken,
+      tokens.token,
     ],
   );
 
   const initOptions = useMemo(() => {
-    if (
-      MultiPlatform.isServer ||
-      (MultiPlatform.isBrowser && !MultiPlatform.isIframe)
-    ) {
-      return;
-    }
+    if (!keycloakClient) return;
     const initOptions: KeycloakInitOptions = {
       ...defaultKeycloakInitOptions,
       ...keycloakInitOptions,
@@ -277,29 +335,39 @@ export function AuthProvider({
     if (tokens.token && typeof tokens.token === "string") {
       initOptions.token = tokens.token;
       initOptions.timeSkew = 0;
-      if (tokens.idToken && typeof tokens.idToken === "string")
+      if (tokens.idToken && typeof tokens.idToken === "string") {
         initOptions.idToken = tokens.idToken;
-      if (tokens.refreshToken && typeof tokens.refreshToken === "string")
+      }
+      if (tokens.refreshToken && typeof tokens.refreshToken === "string") {
         initOptions.refreshToken = tokens.refreshToken;
+      }
     }
-    if (
-      (typeof window !== "undefined" && window.self !== window.top) ||
-      (tokens.token && !tokens.refreshToken)
-    ) {
+    if ((!iframeSso && isIframe) || (tokens.token && !tokens.refreshToken)) {
       initOptions.checkLoginIframe = false;
       initOptions.flow = "implicit";
       initOptions.onLoad = undefined;
     }
     return initOptions;
   }, [
+    keycloakClient,
     keycloakInitOptions,
     keycloakConfig.scopes,
+    debug,
     tokens.token,
     tokens.idToken,
     tokens.refreshToken,
+    iframeSso,
   ]);
 
   useEffect(() => {
+    if (
+      !keycloakClient ||
+      !initOptions ||
+      (authStrategy === AuthStrategy.KeycloakClientImplicit &&
+        (typeof tokens.token !== "string" || !tokens.token))
+    ) {
+      return;
+    }
     function onError() {
       if (keycloakClient && initOptions) {
         setKeycloak(new Keycloak(keycloakConfig, keycloakClient));
@@ -310,56 +378,40 @@ export function AuthProvider({
         setKeycloak(new Keycloak(keycloakConfig, keycloakClient));
       }
     }
-    if (keycloakClient && initOptions) {
-      (async () => {
-        keycloakClient.onAuthError = onError;
-        keycloakClient.onAuthLogout = onUpdate;
-        keycloakClient.onAuthRefreshError = onError;
-        keycloakClient.onAuthRefreshSuccess = onUpdate;
-        keycloakClient.onAuthSuccess = onUpdate;
-        keycloakClient.onReady = onUpdate;
-        keycloakClient.onTokenExpired = async () => {
-          try {
-            await keycloakClient.updateToken(5);
-          } catch (err) {
-            setKeycloak(new Keycloak(keycloakConfig, keycloakClient));
-          }
-        };
-        const authenticated = await keycloakClient.init(initOptions);
-        setKeycloak(new Keycloak(keycloakConfig, keycloakClient));
-      })();
-    }
-  }, []);
-
-  if (typeof authStore === "undefined") {
-    return <Loading loadingComponent={loadingComponent} />;
-  }
+    (async () => {
+      keycloakClient.onAuthError = onError;
+      keycloakClient.onAuthLogout = onUpdate;
+      keycloakClient.onAuthRefreshError = onError;
+      keycloakClient.onAuthRefreshSuccess = onUpdate;
+      keycloakClient.onAuthSuccess = onUpdate;
+      keycloakClient.onReady = onUpdate;
+      keycloakClient.onTokenExpired = async () => {
+        try {
+          await keycloakClient.updateToken(5);
+        } catch (err) {
+          logger.warn(err);
+          setKeycloak(new Keycloak(keycloakConfig, keycloakClient));
+        }
+      };
+      await keycloakClient.init(initOptions);
+      setKeycloak(new Keycloak(keycloakConfig, keycloakClient));
+    })();
+  }, [keycloakClient, initOptions, authStrategy, tokens.token]);
 
-  function render() {
-    return (
+  const render = useCallback(
+    () => (
       <KeycloakConfigContext.Provider value={keycloakConfig}>
         <KeycloakContext.Provider value={keycloak}>
           <AfterAuth loadingComponent={loadingComponent}>{children}</AfterAuth>
         </KeycloakContext.Provider>
       </KeycloakConfigContext.Provider>
-    );
-  }
-
-  if (MultiPlatform.isBrowser && !MultiPlatform.isElectron) {
+    ),
+    [children, keycloak, keycloakConfig],
+  );
+  if (disabled) return <>{children}</>;
+  if (authStrategy === AuthStrategy.AuthJS) {
     return <SessionProvider {...sessionProvider}>{render()}</SessionProvider>;
   }
+  if (isLoading) return <Loading loadingComponent={loadingComponent} />;
   return render();
 }
-
-const defaultKeycloakInitOptions: KeycloakInitOptions = {
-  checkLoginIframe: true,
-  checkLoginIframeInterval: 5,
-  enableLogging: false,
-  onLoad: "check-sso",
-  pkceMethod: "S256",
-};
-
-export interface MessageSchema {
-  type: string;
-  payload?: string;
-}

package/src/provider/AuthProvider/shared.ts

@@ -0,0 +1,65 @@
+/**
+ * File: /src/provider/AuthProvider/shared.ts
+ * Project: @multiplatform.one/keycloak
+ * File Created: 23-12-2024 19:30:25
+ * Author: Clay Risser
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { KeycloakInitOptions } from "keycloak-js";
+import type { SessionProviderProps } from "next-auth/react";
+import type { ComponentType, PropsWithChildren } from "react";
+import type { KeycloakConfig } from "../../keycloak/index";
+
+export const defaultKeycloakInitOptions: KeycloakInitOptions = {
+  checkLoginIframe: true,
+  checkLoginIframeInterval: 5,
+  enableLogging: false,
+  onLoad: "check-sso",
+  pkceMethod: "S256",
+};
+
+export interface MessageSchema {
+  type: string;
+  payload?: string;
+}
+
+export interface AuthProviderProps extends PropsWithChildren {
+  disabled?: boolean;
+  keycloakConfig: KeycloakConfig;
+  keycloakInitOptions?: KeycloakInitOptions;
+  loadingComponent?: ComponentType;
+  sessionProvider?: Omit<SessionProviderProps, "children">;
+}
+
+export interface Tokens<B = boolean> {
+  idToken?: string | B;
+  refreshToken?: string | B;
+  token?: string | B;
+}
+
+export enum AuthStrategy {
+  AuthJS = "authjs",
+  ExpoAuth = "expo-auth",
+  KeycloakClientImplicit = "keycloak-client-implicit",
+  KeycloakClientStandard = "keycloak-client-standard",
+}
+
+export enum AuthSource {
+  Query = "query",
+  Session = "session",
+  Store = "store",
+}

package/src/provider/KeycloakProvider.tsx

@@ -23,7 +23,6 @@ import type { PropsWithChildren } from "react";
 import { useMemo } from "react";
 import type { AuthConfig } from "../authConfig";
 import { AuthConfigContext } from "../authConfig";
-import type { Session } from "../session";
 import { AuthProvider } from "./AuthProvider";
 
 export interface KeycloakProviderProps extends PropsWithChildren, AuthConfig {
@@ -40,29 +39,27 @@ export function KeycloakProvider({
   loginRedirectUri,
   debug,
   disabled,
+  iframeSso,
   publicClientId,
   realm,
 }: KeycloakProviderProps) {
   const authConfig = useMemo(
-    () => ({ debug, disabled, loginRedirectUri }),
-    [debug, disabled, loginRedirectUri],
+    () => ({ debug, disabled, iframeSso, loginRedirectUri }),
+    [debug, disabled, iframeSso, loginRedirectUri],
   );
   return (
     <AuthConfigContext.Provider value={authConfig}>
-      {disabled ? (
-        <>{children}</>
-      ) : (
-        <AuthProvider
-          keycloakConfig={{
-            clientId: clientId || "app",
-            publicClientId,
-            realm: realm || "main",
-            url: baseUrl,
-          }}
-        >
-          {children}
-        </AuthProvider>
-      )}
+      <AuthProvider
+        disabled={disabled}
+        keycloakConfig={{
+          clientId: clientId || "app",
+          publicClientId,
+          realm: realm || "main",
+          url: baseUrl,
+        }}
+      >
+        {children}
+      </AuthProvider>
     </AuthConfigContext.Provider>
   );
 }

package/src/provider/index.ts

@@ -1,7 +1,7 @@
-/*
+/**
  * File: /src/provider/index.ts
  * Project: @multiplatform.one/keycloak
- * File Created: 04-04-2024 15:50:39
+ * File Created: 19-11-2024 20:26:31
  * Author: Clay Risser
  * -----
  * BitSpur (c) Copyright 2021 - 2024

package/src/session/{session.native.ts → index.native.ts}

@@ -1,5 +1,5 @@
 /*
- * File: /src/session/session.native.ts
+ * File: /src/session/index.native.ts
  * Project: @multiplatform.one/keycloak
  * File Created: 04-04-2024 15:50:39
  * Author: Clay Risser
@@ -20,7 +20,7 @@
  */
 
 import type { UseSessionOptions } from "next-auth/react";
-import type { SessionContextValue } from "./session";
+import type { SessionContextValue } from "./index";
 
 export async function getSession() {
   return null;

package/src/session/index.ts

@@ -1,7 +1,7 @@
 /*
  * File: /src/session/index.ts
  * Project: @multiplatform.one/keycloak
- * File Created: 04-04-2024 15:50:39
+ * File Created: 19-11-2024 20:26:31
  * Author: Clay Risser
  * -----
  * BitSpur (c) Copyright 2021 - 2024
@@ -19,4 +19,42 @@
  * limitations under the License.
  */
 
-export * from "./session";
+import { isBrowser, isElectron } from "multiplatform.one";
+import type { Session as NextSession } from "next-auth";
+import { useSession as useNextSession } from "next-auth/react";
+import type {
+  SessionContextValue as NextSessionContextValue,
+  UseSessionOptions,
+} from "next-auth/react";
+
+export type SessionContextValue<R extends boolean> = Partial<
+  Omit<NextSessionContextValue<R> & { session: Session }, "data">
+>;
+
+let useSession = <R extends boolean>(
+  _options?: UseSessionOptions<R>,
+): SessionContextValue<R> => {
+  return {};
+};
+
+if (isBrowser && !isElectron) {
+  useSession = <R extends boolean>(
+    options?: UseSessionOptions<R>,
+  ): SessionContextValue<R> => {
+    const nextSession = useNextSession(options);
+    return {
+      update: nextSession.update,
+      status: nextSession.status,
+      session: nextSession.data as Session,
+    } as SessionContextValue<R>;
+  };
+}
+
+export interface Session extends NextSession {
+  accessToken?: string;
+  err?: Error;
+  idToken?: string;
+  refreshToken?: string;
+}
+
+export { useSession };