@multiplatform.one/keycloak 3.0.0 → 5.0.0

package/src/provider/AuthProvider/index.electron.tsx

@@ -0,0 +1,410 @@
+/**
+ * File: /src/provider/AuthProvider/index.electron.tsx
+ * Project: @multiplatform.one/keycloak
+ * File Created: 23-12-2024 19:24:17
+ * 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 { 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,
+}: 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)) as string | boolean,
+      ),
+    [refreshTokenQuery, iframeSso],
+  );
+  const initialIdTokenQuery = useMemo(
+    () =>
+      validOrRefreshableToken(
+        ((!iframeSso && isIframe) ||
+          (typeof idTokenQuery === "string"
+            ? idTokenQuery || true
+            : undefined)) as string | boolean,
+        initialRefreshTokenQuery,
+      ),
+    [idTokenQuery, initialRefreshTokenQuery, iframeSso],
+  );
+  const initialTokenQuery = useMemo(
+    () =>
+      validOrRefreshableToken(
+        ((!iframeSso && isIframe) ||
+          (typeof tokenQuery === "string" ? tokenQuery || true : undefined)) as
+          | string
+          | boolean,
+        initialRefreshTokenQuery,
+      ),
+    [tokenQuery, initialRefreshTokenQuery, iframeSso],
+  );
+  const [tokens, setTokens] = useState<Tokens>({
+    refreshToken: initialRefreshTokenQuery,
+    token: initialTokenQuery,
+    idToken: initialIdTokenQuery,
+  });
+  const authSource = useMemo(() => {
+    if (!iframeSso && isIframe && initialTokenQuery) return AuthSource.Query;
+    return AuthSource.Store;
+  }, [initialTokenQuery, iframeSso]);
+  const authStrategy = useMemo(() => {
+    if (authSource === AuthSource.Query) {
+      return AuthStrategy.KeycloakClientImplicit;
+    }
+    if (!persist) return AuthStrategy.KeycloakClientStandard;
+    if (typeof authStore === "undefined") return;
+    if (authStore.token) {
+      if (typeof tokens.token === "undefined") return;
+      if (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,
+      refreshToken: refreshToken,
+      token: token,
+    });
+  }, [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 (isLoading) return <Loading loadingComponent={loadingComponent} />;
+  return render();
+}

package/src/provider/AuthProvider/index.native.tsx

@@ -0,0 +1,298 @@
+/**
+ * File: /src/provider/AuthProvider/index.native.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 {
+  exchangeCodeAsync,
+  makeRedirectUri,
+  refreshAsync,
+  useAuthRequest,
+  useAutoDiscovery,
+} from "expo-auth-session";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Loading } from "../../Loading";
+import { Keycloak, KeycloakConfigContext } from "../../keycloak";
+import type {
+  KeycloakLoginOptions,
+  KeycloakLogoutOptions,
+} from "../../keycloak";
+import { KeycloakContext } from "../../keycloak/context";
+import { persist, useAuthStore } from "../../state";
+import { isTokenExpired, validOrRefreshableToken } from "../../token";
+import { AfterAuth } from "../AfterAuth";
+import type { AuthProviderProps, MessageSchema, Tokens } from "./shared";
+
+const REFRESH_THRESHOLD = 5;
+
+export function AuthProvider({
+  children,
+  disabled,
+  keycloakConfig,
+  loadingComponent,
+}: AuthProviderProps) {
+  const [keycloak, setKeycloak] = useState<Keycloak>();
+  const authStore = useAuthStore();
+  const initialRefreshToken = useMemo(
+    () =>
+      validOrRefreshableToken(
+        persist && authStore !== undefined && authStore?.refreshToken,
+      ),
+    [persist, authStore],
+  );
+  const keycloakUrl = `${keycloakConfig?.url}/realms/${keycloakConfig?.realm}`;
+  const clientId =
+    keycloakConfig.publicClientId || keycloakConfig?.clientId || "";
+  const discovery = useAutoDiscovery(keycloakUrl);
+  const redirectUri = makeRedirectUri();
+  const [tokens, setTokens] = useState<Tokens<false>>(() => {
+    if (response?.type === "success" && response.params) {
+      const refreshToken = validOrRefreshableToken(
+        response.params.refresh_token,
+      );
+      return {
+        refreshToken,
+        token: validOrRefreshableToken(
+          response.params.access_token,
+          refreshToken,
+        ),
+        idToken: validOrRefreshableToken(
+          response.params.id_token,
+          refreshToken,
+        ),
+      };
+    }
+    return {
+      refreshToken: initialRefreshToken,
+      token: validOrRefreshableToken(
+        persist && authStore !== undefined ? authStore.token : undefined,
+        initialRefreshToken,
+      ),
+      idToken: validOrRefreshableToken(
+        persist && authStore !== undefined ? authStore.idToken : undefined,
+        initialRefreshToken,
+      ),
+    };
+  });
+  const scopes = useMemo(
+    () => [
+      ...new Set([
+        "email",
+        "openid",
+        "profile",
+        ...(keycloakConfig.scopes || []),
+      ]),
+    ],
+    [keycloakConfig.scopes],
+  );
+  const [request, response, promptAsync] = useAuthRequest(
+    {
+      clientId,
+      redirectUri,
+      scopes,
+    },
+    discovery,
+  );
+
+  useEffect(() => {
+    if (authStore === undefined) return;
+    if (!persist) return;
+    if (tokens.token || tokens.refreshToken || tokens.idToken) return;
+    if (response?.type === "success") return;
+    setTokens({
+      refreshToken: initialRefreshToken,
+      token: validOrRefreshableToken(authStore.token, initialRefreshToken),
+      idToken: validOrRefreshableToken(authStore.idToken, initialRefreshToken),
+    });
+  }, [authStore, persist, response, initialRefreshToken]);
+
+  useEffect(() => {
+    if (
+      disabled ||
+      !discovery ||
+      !response?.type ||
+      !request?.codeVerifier ||
+      !clientId
+    ) {
+      return;
+    }
+    (async () => {
+      if (
+        response?.type === "success" &&
+        request.codeVerifier &&
+        response.params.code
+      ) {
+        const tokenResponse = await exchangeCodeAsync(
+          {
+            clientId,
+            code: response.params.code,
+            redirectUri,
+            scopes,
+            extraParams: {
+              code_verifier: request.codeVerifier,
+            },
+          },
+          discovery,
+        );
+        if (tokenResponse) {
+          setTokens({
+            idToken: tokenResponse.idToken,
+            refreshToken: tokenResponse.refreshToken,
+            token: tokenResponse.accessToken,
+          });
+        }
+      }
+    })();
+  }, [
+    disabled,
+    !discovery,
+    request?.codeVerifier,
+    response?.type === "success" ? response?.params?.code : undefined,
+    clientId,
+    scopes,
+    redirectUri,
+  ]);
+
+  const resetTokens = useCallback(() => {
+    if (disabled || authStore === undefined) return;
+    authStore.idToken = "";
+    authStore.refreshToken = "";
+    authStore.token = "";
+    setTokens({
+      refreshToken: undefined,
+      token: undefined,
+      idToken: undefined,
+    });
+  }, [disabled, authStore]);
+
+  const refreshTokens = useCallback(async () => {
+    if (disabled || !discovery || !tokens || authStore === undefined) return;
+    if (typeof tokens.refreshToken === "string") {
+      if (!isTokenExpired(tokens.refreshToken)) {
+        const tokenResponse = await refreshAsync(
+          {
+            clientId,
+            refreshToken: tokens.refreshToken,
+            scopes,
+          },
+          discovery,
+        );
+        if (tokenResponse) {
+          const refreshToken = validOrRefreshableToken(
+            tokenResponse.refreshToken,
+          );
+          setTokens({
+            refreshToken,
+            token: validOrRefreshableToken(
+              tokenResponse.accessToken,
+              refreshToken,
+            ),
+            idToken: validOrRefreshableToken(
+              tokenResponse.idToken,
+              refreshToken,
+            ),
+          });
+        } else {
+          resetTokens();
+        }
+      } else {
+        resetTokens();
+      }
+    } else if (
+      authStore.refreshToken &&
+      typeof authStore.refreshToken === "string" &&
+      isTokenExpired(authStore.refreshToken)
+    ) {
+      resetTokens();
+    }
+  }, [disabled, !discovery, tokens?.refreshToken, clientId, scopes, authStore]);
+
+  useEffect(() => {
+    if (disabled || !discovery) return;
+    if (authStore === undefined && !response?.type) return;
+    refreshTokens();
+  }, [disabled, !discovery, authStore, response]);
+
+  useEffect(() => {
+    if (disabled || !request || !tokens) return;
+    let refreshHandle: NodeJS.Timeout;
+    (async () => {
+      if (tokens.token && isTokenExpired(tokens.token)) {
+        await refreshTokens();
+      } else {
+        const _keycloak = new Keycloak(
+          keycloakConfig,
+          tokens.token || undefined,
+          tokens.idToken || undefined,
+          tokens.refreshToken || undefined,
+          async (options: KeycloakLoginOptions) => {
+            await promptAsync(options);
+          },
+          async (_options: KeycloakLogoutOptions) => {
+            resetTokens();
+          },
+        );
+        if (_keycloak.tokenParsed?.exp) {
+          const timeout =
+            Math.max(
+              Math.min(
+                _keycloak.tokenParsed.exp,
+                _keycloak.refreshTokenParsed?.exp || 0,
+              ) -
+                Math.floor(Date.now() / 1000) -
+                REFRESH_THRESHOLD,
+              REFRESH_THRESHOLD,
+            ) * 1000;
+          if (timeout > 0) {
+            refreshHandle = setTimeout(() => {
+              refreshTokens();
+            }, timeout);
+          } else {
+            setTimeout(
+              () => _keycloak.logout(),
+              Math.max(0, timeout + REFRESH_THRESHOLD) * 1000,
+            );
+            return;
+          }
+        }
+        setKeycloak(_keycloak);
+      }
+    })();
+    return () => {
+      if (refreshHandle) clearTimeout(refreshHandle);
+    };
+  }, [
+    disabled,
+    !request,
+    tokens?.token,
+    tokens?.idToken,
+    tokens?.refreshToken,
+    refreshTokens,
+  ]);
+
+  if (disabled) return <>{children}</>;
+  if (!authStore || !tokens) <Loading loadingComponent={loadingComponent} />;
+  return (
+    <KeycloakConfigContext.Provider value={keycloakConfig}>
+      <KeycloakContext.Provider value={keycloak}>
+        <AfterAuth>{children}</AfterAuth>
+      </KeycloakContext.Provider>
+    </KeycloakConfigContext.Provider>
+  );
+}