@multiplatform.one/keycloak 3.0.0 → 5.0.0

package/src/provider/AuthProvider/index.tsx

@@ -0,0 +1,417 @@
+/**
+ * File: /src/provider/AuthProvider/index.tsx
+ * Project: @multiplatform.one/keycloak
+ * 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
+ *
+ * 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 KeycloakClient from "keycloak-js";
+import type { KeycloakInitOptions } from "keycloak-js";
+import { isIframe, isWindowDefined, logger } from "multiplatform.one";
+import { SessionProvider } from "next-auth/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Loading } from "../../Loading";
+import { useAuthConfig } from "../../hooks";
+import { KeycloakContext } from "../../keycloak/context";
+import { Keycloak, KeycloakConfigContext } from "../../keycloak/index";
+import { persist, useAuthStore } from "../../state";
+import { validOrRefreshableToken } from "../../token";
+import { AfterAuth } from "../AfterAuth";
+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, iframeSso } = useAuthConfig();
+  const query = new URLSearchParams(
+    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 [listeningRefreshToken, setListeningRefreshToken] = useState(false);
+  const [listeningToken, setListeningToken] = useState(false);
+  const [listeningIdToken, setListeningIdToken] = useState(false);
+  const [loadedMessagePosted, setLoadedMessagePosted] = useState(false);
+  const initialRefreshTokenQuery = useMemo(
+    () =>
+      validOrRefreshableToken(
+        (!iframeSso && isIframe) || typeof refreshTokenQuery === "string"
+          ? refreshTokenQuery || true
+          : undefined,
+      ),
+    [refreshTokenQuery, iframeSso],
+  );
+  const initialIdTokenQuery = useMemo(
+    () =>
+      validOrRefreshableToken(
+        (!iframeSso && isIframe) || typeof idTokenQuery === "string"
+          ? idTokenQuery || true
+          : undefined,
+        initialRefreshTokenQuery,
+      ),
+    [idTokenQuery, initialRefreshTokenQuery, iframeSso],
+  );
+  const initialTokenQuery = useMemo(
+    () =>
+      validOrRefreshableToken(
+        isIframe
+          ? typeof tokenQuery === "string"
+            ? tokenQuery || true
+            : undefined
+          : undefined,
+        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 (
+      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(
+        JSON.stringify({ type: "LOADED" }),
+      );
+    });
+    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 (disabled || tokens.refreshToken !== true || listeningRefreshToken) {
+      return;
+    }
+    setListeningRefreshToken(true);
+    function messageCallback(e: MessageEvent<any>) {
+      let data = e?.data || null;
+      if (typeof data === "string") {
+        try {
+          data = JSON.parse(data);
+        } catch (err) {}
+      }
+      if (debug) logger.debug("received message", JSON.stringify(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);
+        setTokens((tokens) => ({
+          ...tokens,
+          refreshToken: validOrRefreshableToken(message.payload),
+        }));
+        window.removeEventListener("message", messageCallback);
+        setListeningRefreshToken(false);
+      }
+    }
+    if (debug) {
+      logger.debug(
+        "listening for message",
+        JSON.stringify({
+          type: "REFRESH_TOKEN",
+          payload: "<some_refresh_token>",
+        }),
+      );
+    }
+    window.addEventListener("message", messageCallback);
+    return () => {
+      window.removeEventListener("message", messageCallback);
+    };
+  }, [disabled, tokens.refreshToken, listeningRefreshToken]);
+
+  useEffect(() => {
+    if (disabled || tokens.token !== true || listeningToken) return;
+    setListeningToken(true);
+    function messageCallback(e: MessageEvent<any>) {
+      let data = e?.data || null;
+      if (typeof data === "string") {
+        try {
+          data = JSON.parse(data);
+        } catch (err) {}
+      }
+      if (debug) logger.debug("received message", JSON.stringify(data));
+      const message: MessageSchema = data;
+      if (!message.type) return;
+      if (message.type.toUpperCase() === "TOKEN" && message.payload) {
+        if (debug) logger.debug("setting token", message.payload);
+        setTokens((tokens) => ({
+          ...tokens,
+          token: validOrRefreshableToken(message.payload, tokens.refreshToken),
+        }));
+        window.removeEventListener("message", messageCallback);
+        setListeningToken(false);
+      }
+    }
+    if (debug) {
+      logger.debug(
+        "listening for message",
+        JSON.stringify({
+          type: "TOKEN",
+          payload: "<some_token>",
+        }),
+      );
+    }
+    window.addEventListener("message", messageCallback);
+    return () => {
+      window.removeEventListener("message", messageCallback);
+    };
+  }, [disabled, tokens.token, listeningToken]);
+
+  useEffect(() => {
+    if (disabled || tokens.idToken !== true || listeningIdToken) return;
+    setListeningIdToken(true);
+    function messageCallback(e: MessageEvent<any>) {
+      let data = e?.data || null;
+      if (typeof data === "string") {
+        try {
+          data = JSON.parse(data);
+        } catch (err) {}
+      }
+      if (debug) logger.debug("received message", JSON.stringify(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);
+        setTokens((tokens) => ({
+          ...tokens,
+          idToken: validOrRefreshableToken(
+            message.payload,
+            tokens.refreshToken,
+          ),
+        }));
+        window.removeEventListener("message", messageCallback);
+        setListeningIdToken(false);
+      }
+    }
+    if (debug) {
+      logger.debug(
+        "listening for message",
+        JSON.stringify({
+          type: "ID_TOKEN",
+          payload: "<some_id_token>",
+        }),
+      );
+    }
+    window.addEventListener("message", messageCallback);
+    return () => {
+      window.removeEventListener("message", messageCallback);
+    };
+  }, [disabled, tokens.idToken, listeningIdToken]);
+
+  const keycloakClient = useMemo(
+    () =>
+      !disabled &&
+      !isLoading &&
+      (authStrategy === AuthStrategy.KeycloakClientStandard ||
+        authStrategy === AuthStrategy.KeycloakClientImplicit) &&
+      keycloakConfig
+        ? new KeycloakClient({
+            clientId: keycloakConfig.publicClientId || keycloakConfig.clientId,
+            realm: keycloakConfig.realm,
+            url: keycloakConfig.url,
+          })
+        : undefined,
+    [
+      authStrategy,
+      disabled,
+      isLoading,
+      keycloakConfig,
+      keycloakInitOptions,
+      tokens.idToken,
+      tokens.refreshToken,
+      tokens.token,
+    ],
+  );
+
+  const initOptions = useMemo(() => {
+    if (!keycloakClient) return;
+    const initOptions: KeycloakInitOptions = {
+      ...defaultKeycloakInitOptions,
+      ...keycloakInitOptions,
+      scope: [
+        ...new Set([
+          "email",
+          "openid",
+          "profile",
+          ...(defaultKeycloakInitOptions.scope?.split(" ") || []),
+          ...(keycloakInitOptions?.scope?.split(" ") || []),
+          ...(keycloakConfig.scopes || []),
+        ]),
+      ].join(" "),
+    };
+    if (debug) initOptions.enableLogging = true;
+    if (tokens.token && typeof tokens.token === "string") {
+      initOptions.token = tokens.token;
+      initOptions.timeSkew = 0;
+      if (tokens.idToken && typeof tokens.idToken === "string") {
+        initOptions.idToken = tokens.idToken;
+      }
+      if (tokens.refreshToken && typeof tokens.refreshToken === "string") {
+        initOptions.refreshToken = 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));
+      }
+    }
+    function onUpdate() {
+      if (keycloakClient && initOptions) {
+        setKeycloak(new Keycloak(keycloakConfig, keycloakClient));
+      }
+    }
+    (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]);
+
+  const render = useCallback(
+    () => (
+      <KeycloakConfigContext.Provider value={keycloakConfig}>
+        <KeycloakContext.Provider value={keycloak}>
+          <AfterAuth loadingComponent={loadingComponent}>{children}</AfterAuth>
+        </KeycloakContext.Provider>
+      </KeycloakConfigContext.Provider>
+    ),
+    [children, keycloak, keycloakConfig],
+  );
+  if (disabled) return <>{children}</>;
+  if (authStrategy === AuthStrategy.AuthJS) {
+    return <SessionProvider {...sessionProvider}>{render()}</SessionProvider>;
+  }
+  if (isLoading) return <Loading loadingComponent={loadingComponent} />;
+  return render();
+}

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

@@ -19,19 +19,17 @@
  * limitations under the License.
  */
 
-import React, { useMemo } from 'react';
-import type { AuthConfig } from '../authConfig';
-import type { PropsWithChildren } from 'react';
-import type { Session } from 'next-auth';
-import { AuthConfigContext } from '../authConfig';
-import { AuthProvider } from './AuthProvider';
+import type { PropsWithChildren } from "react";
+import { useMemo } from "react";
+import type { AuthConfig } from "../authConfig";
+import { AuthConfigContext } from "../authConfig";
+import { AuthProvider } from "./AuthProvider";
 
 export interface KeycloakProviderProps extends PropsWithChildren, AuthConfig {
   baseUrl?: string;
   clientId?: string;
   publicClientId?: string;
   realm?: string;
-  session?: Session;
 }
 
 export function KeycloakProvider({
@@ -41,28 +39,27 @@ export function KeycloakProvider({
   loginRedirectUri,
   debug,
   disabled,
+  iframeSso,
   publicClientId,
   realm,
-  session,
 }: KeycloakProviderProps) {
-  const authConfig = useMemo(() => ({ debug, disabled, loginRedirectUri }), [debug, disabled, loginRedirectUri]);
+  const authConfig = useMemo(
+    () => ({ debug, disabled, iframeSso, loginRedirectUri }),
+    [debug, disabled, iframeSso, loginRedirectUri],
+  );
   return (
     <AuthConfigContext.Provider value={authConfig}>
-      {disabled ? (
-        <>{children}</>
-      ) : (
-        <AuthProvider
-          sessionProvider={{ session }}
-          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
@@ -19,6 +19,6 @@
  * limitations under the License.
  */
 
-export * from './AfterAuth';
-export * from './AuthProvider';
-export * from './KeycloakProvider';
+export * from "./AfterAuth";
+export * from "./AuthProvider";
+export * from "./KeycloakProvider";

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
@@ -19,13 +19,15 @@
  * limitations under the License.
  */
 
-import type { SessionContextValue } from './session';
-import type { UseSessionOptions } from 'next-auth/react';
+import type { UseSessionOptions } from "next-auth/react";
+import type { SessionContextValue } from "./index";
 
 export async function getSession() {
   return null;
 }
 
-export function useSession<R extends boolean>(_options?: UseSessionOptions<R>): SessionContextValue<R> {
+export function useSession<R extends boolean>(
+  _options?: UseSessionOptions<R>,
+): SessionContextValue<R> {
   return {};
 }

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 };

package/src/state.ts

@@ -1,7 +1,7 @@
 /*
  * File: /src/state.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,22 +19,17 @@
  * limitations under the License.
  */
 
-import { MultiPlatform } from 'multiplatform.one';
-import { createStateStore } from '@multiplatform.one/zustand';
+import { createUseStore } from "@multiplatform.one/use-store";
+import { isBrowser, isElectron, isIframe, isServer } from "multiplatform.one";
 
-export const persist = MultiPlatform.isIframe || (!MultiPlatform.isNext && !MultiPlatform.isServer);
+export const persist = isIframe || isElectron || (!isBrowser && !isServer);
 
-const { useStore } = createStateStore(
-  'auth',
-  {
-    idToken: '',
-    refreshToken: '',
-    token: '',
-  },
-  undefined,
-  { persist },
-);
-
-export function useAuthState() {
-  return useStore();
+class AuthStore {
+  idToken = "";
+  refreshToken = "";
+  token = "";
 }
+
+export const useAuthStore = createUseStore(AuthStore, {
+  persist: persist as true,
+});