@multiplatform.one/keycloak 0.1.9 → 0.2.0

package/src/authConfig.ts

@@ -22,7 +22,7 @@
  * limitations under the License.
  */
 
-import { createContext } from "react";
+import { createContext } from 'react';
 
 export const defaultAuthConfig: AuthConfig = {
   ssr: true,

package/src/hooks/index.ts

@@ -22,6 +22,6 @@
  * limitations under the License.
  */
 
-export * from "./useCurrentRouteName";
-export * from "./useKeycloak";
-export * from "./useLogin";
+export * from './useCurrentRouteName';
+export * from './useKeycloak';
+export * from './useLogin';

package/src/hooks/useAuthConfig.ts

@@ -22,8 +22,8 @@
  * limitations under the License.
  */
 
-import { useContext } from "react";
-import { AuthConfigContext } from "../authConfig";
+import { useContext } from 'react';
+import { AuthConfigContext } from '../authConfig';
 
 export function useAuthConfig() {
   return useContext(AuthConfigContext);

package/{esm/hooks/useCurrentRouteName.js → src/hooks/useCurrentRouteName/index.native.ts}

@@ -1,13 +1,13 @@
 /**
- * File: /src/hooks/useCurrentRouteName.ts
- * Project: app
- * File Created: 08-11-2022 08:38:23
+ * File: /src/hooks/useCurrentRouteName/index.native.ts
+ * Project: @multiplatform.one/keycloak
+ * File Created: 24-02-2023 06:30:36
  * Author: Clay Risser
  * -----
- * Last Modified: 28-01-2023 13:47:18
+ * Last Modified: 24-02-2023 06:31:25
  * Modified By: Clay Risser
  * -----
- * Risser Labs LLC (c) Copyright 2021 - 2022
+ * Risser Labs LLC (c) Copyright 2022 - 2023
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,16 +22,11 @@
  * limitations under the License.
  */
 
-import { MultiPlatform } from "multiplatform.one";
-import { useRoute } from "@react-navigation/native";
-import { useRouter } from "next/router";
+import { MultiPlatform } from 'multiplatform.one';
+import { useRoute } from '@react-navigation/native';
+
 export function useCurrentRouteName() {
   if (MultiPlatform.isStorybook) return null;
-  if (MultiPlatform.isNext) {
-    const router = useRouter();
-    return router.route;
-  }
   const route = useRoute();
   return route.name;
 }
-//# sourceMappingURL=useCurrentRouteName.js.map

package/src/hooks/{useCurrentRouteName.ts → useCurrentRouteName/index.ts}

@@ -1,13 +1,13 @@
 /**
- * File: /src/hooks/useCurrentRouteName.ts
- * Project: app
- * File Created: 08-11-2022 08:38:23
+ * File: /src/hooks/useCurrentRouteName/index.ts
+ * Project: @multiplatform.one/keycloak
+ * File Created: 24-02-2023 06:30:32
  * Author: Clay Risser
  * -----
- * Last Modified: 28-01-2023 13:47:18
+ * Last Modified: 24-02-2023 06:30:54
  * Modified By: Clay Risser
  * -----
- * Risser Labs LLC (c) Copyright 2021 - 2022
+ * Risser Labs LLC (c) Copyright 2022 - 2023
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,9 +22,9 @@
  * limitations under the License.
  */
 
-import { MultiPlatform } from "multiplatform.one";
-import { useRoute } from "@react-navigation/native";
-import { useRouter } from "next/router";
+import { MultiPlatform } from 'multiplatform.one';
+import { useRoute } from '@react-navigation/native';
+import { useRouter } from 'next/router';
 
 export function useCurrentRouteName() {
   if (MultiPlatform.isStorybook) return null;

package/src/hooks/useKeycloak/index.ts

@@ -22,12 +22,8 @@
  * limitations under the License.
  */
 
-import type {
-  KeycloakResourceAccess,
-  KeycloakRoles,
-  KeycloakTokenParsed,
-} from "keycloak-js";
-export * from "./useKeycloak";
+import type { KeycloakResourceAccess, KeycloakRoles, KeycloakTokenParsed } from 'keycloak-js';
+export * from './useKeycloak';
 
 export interface IKeycloak {
   authenticated?: boolean;

package/src/hooks/useKeycloak/useKeycloak.native.ts

@@ -4,7 +4,7 @@
  * File Created: 08-11-2022 14:10:25
  * Author: Clay Risser
  * -----
- * Last Modified: 28-01-2023 13:47:33
+ * Last Modified: 24-02-2023 06:29:25
  * Modified By: Clay Risser
  * -----
  * Risser Labs LLC (c) Copyright 2021 - 2022
@@ -22,30 +22,18 @@
  * limitations under the License.
  */
 
-import atob from "core-js-pure/stable/atob";
-import escape from "core-js-pure/stable/escape";
-import { AuthRequestPromptOptions, AuthSessionResult } from "expo-auth-session";
-import { MultiPlatform } from "multiplatform.one";
-import {
-  KeycloakResourceAccess,
-  KeycloakRoles,
-  KeycloakTokenParsed,
-} from "keycloak-js";
-import { useKeycloak as useExpoKeycloak } from "expo-keycloak-auth";
-import { IKeycloak } from "./index";
+import atob from 'core-js-pure/stable/atob';
+import escape from 'core-js-pure/stable/escape';
+import type { AuthRequestPromptOptions, AuthSessionResult } from 'expo-auth-session';
+import type { IKeycloak } from './index';
+import type { KeycloakResourceAccess, KeycloakRoles, KeycloakTokenParsed } from 'keycloak-js';
+import { MultiPlatform } from 'multiplatform.one';
+import { useKeycloak as useExpoKeycloak } from 'expo-keycloak-auth';
 
 export function useKeycloak() {
   if (MultiPlatform.isStorybook) return { authenticated: true } as IKeycloak;
-  const { ready, login, isLoggedIn, token, logout, refreshToken } =
-    useExpoKeycloak();
-  const keycloak = new ExpoKeycloak(
-    ready,
-    isLoggedIn,
-    login,
-    logout,
-    token || undefined,
-    refreshToken || undefined
-  );
+  const { ready, login, isLoggedIn, token, logout, refreshToken } = useExpoKeycloak();
+  const keycloak = new ExpoKeycloak(ready, isLoggedIn, login, logout, token || undefined, refreshToken || undefined);
   return keycloak as IKeycloak;
 }
 
@@ -67,12 +55,10 @@ export class ExpoKeycloak implements IKeycloak {
   constructor(
     ready: boolean,
     isLoggedIn: boolean | undefined,
-    login: (
-      options?: AuthRequestPromptOptions
-    ) => Promise<AuthSessionResult | undefined>,
+    login: (options?: AuthRequestPromptOptions) => Promise<AuthSessionResult | undefined>,
     public logout: () => unknown,
     public token?: string,
-    public refreshToken?: string
+    public refreshToken?: string,
   ) {
     if (ready) this.authenticated = isLoggedIn;
     if (this.authenticated) {
@@ -91,20 +77,20 @@ export class ExpoKeycloak implements IKeycloak {
 }
 
 function decodeToken(str: string) {
-  str = str.split(".")[1];
-  str = str.replace(/-/g, "+");
-  str = str.replace(/_/g, "/");
+  str = str.split('.')[1];
+  str = str.replace(/-/g, '+');
+  str = str.replace(/_/g, '/');
   switch (str.length % 4) {
     case 0:
       break;
     case 2:
-      str += "==";
+      str += '==';
       break;
     case 3:
-      str += "=";
+      str += '=';
       break;
     default:
-      throw "Invalid token";
+      throw 'Invalid token';
   }
   str = decodeURIComponent(escape(atob(str)));
   str = JSON.parse(str);

package/src/hooks/useKeycloak/useKeycloak.ts

@@ -4,7 +4,7 @@
  * File Created: 08-11-2022 06:04:59
  * Author: Clay Risser
  * -----
- * Last Modified: 28-01-2023 13:48:24
+ * Last Modified: 24-02-2023 06:22:07
  * Modified By: Clay Risser
  * -----
  * Risser Labs LLC (c) Copyright 2021 - 2022
@@ -22,12 +22,12 @@
  * limitations under the License.
  */
 
-import Keycloak from "keycloak-js";
-import { MultiPlatform } from "multiplatform.one";
-import { useKeycloak as useReactKeycloak } from "@react-keycloak/web";
-import { useKeycloak as useSsrKeycloak } from "@react-keycloak/ssr";
-import { IKeycloak } from "./index";
-import { useAuthConfig } from "../useAuthConfig";
+import type Keycloak from 'keycloak-js';
+import type { IKeycloak } from './index';
+import { MultiPlatform } from 'multiplatform.one';
+import { useAuthConfig } from '../useAuthConfig';
+import { useKeycloak as useReactKeycloak } from '@react-keycloak/web';
+import { useKeycloak as useSsrKeycloak } from '@react-keycloak/ssr';
 
 export function useKeycloak() {
   const authConfig = useAuthConfig();

package/src/hooks/useLogin.ts

@@ -4,7 +4,7 @@
  * File Created: 08-11-2022 08:49:14
  * Author: Clay Risser
  * -----
- * Last Modified: 28-01-2023 13:47:42
+ * Last Modified: 24-02-2023 06:22:27
  * Modified By: Clay Risser
  * -----
  * Risser Labs LLC (c) Copyright 2021 - 2022
@@ -22,11 +22,11 @@
  * limitations under the License.
  */
 
-import { useRouter } from "solito/router";
-import { MultiPlatform } from "multiplatform.one";
-import { useCurrentRouteName } from "./useCurrentRouteName";
-import { useKeycloak } from "./useKeycloak/useKeycloak";
-import { useAuthConfig } from "./useAuthConfig";
+import { MultiPlatform } from 'multiplatform.one';
+import { useAuthConfig } from './useAuthConfig';
+import { useCurrentRouteName } from './useCurrentRouteName';
+import { useKeycloak } from './useKeycloak/useKeycloak';
+import { useRouter } from 'solito/router';
 
 export function useLogin(loginRoute?: string) {
   if (MultiPlatform.isStorybook) return () => null;
@@ -42,7 +42,7 @@ export function useLogin(loginRoute?: string) {
     }
     const url = new URL(`x://${loginRoute}`);
     const searchParams = new URLSearchParams(url.search);
-    if (currentRouteName) searchParams.append("backTo", currentRouteName);
+    if (currentRouteName) searchParams.append('backTo', currentRouteName);
     let query = searchParams.toString();
     if (query.length) query = `?${query}`;
     router.push(`${url.pathname.substring(2)}${query}`);

package/src/index.ts

@@ -22,7 +22,7 @@
  * limitations under the License.
  */
 
-export * from "./Authenticated";
-export * from "./authConfig";
-export * from "./hooks";
-export * from "./provider";
+export * from './Authenticated';
+export * from './authConfig';
+export * from './hooks';
+export * from './provider';

package/src/provider/afterAuth.tsx

@@ -22,10 +22,11 @@
  * limitations under the License.
  */
 
-import React, { FC, ReactNode, useEffect } from "react";
-import { useKeycloak } from "../hooks";
-import { useAuthConfig } from "../hooks/useAuthConfig";
-import { useAuthState } from "../state";
+import React, { useEffect } from 'react';
+import type { FC, ReactNode } from 'react';
+import { useAuthConfig } from '../hooks/useAuthConfig';
+import { useAuthState } from '../state';
+import { useKeycloak } from '../hooks';
 
 export interface AfterAuthProps {
   children: ReactNode;
@@ -36,21 +37,19 @@ const logger = console;
 export const AfterAuth: FC<AfterAuthProps> = ({ children }: AfterAuthProps) => {
   const authConfig = useAuthConfig();
   const { token, refreshToken, authenticated } = useKeycloak();
-  const [, setAuth] = useAuthState();
+  const authState = useAuthState();
 
   useEffect(() => {
     if (!authenticated) return;
     if (token) {
-      setAuth({
-        token,
-        ...(refreshToken ? { refreshToken } : {}),
-      });
+      authState.setToken(token);
+      if (refreshToken) authState.setRefreshToken(refreshToken);
     }
   }, [token, refreshToken]);
 
   if (authConfig.debug) {
-    logger.debug("authenticated", authenticated);
-    logger.debug("token", token);
+    logger.debug('authenticated', authenticated);
+    logger.debug('token', token);
   }
   return <>{children}</>;
 };

package/src/provider/index.tsx

@@ -22,21 +22,18 @@
  * limitations under the License.
  */
 
-import React, { FC, useMemo } from "react";
-import {
-  AuthConfig,
-  AuthConfigContext,
-  defaultAuthConfig,
-} from "../authConfig";
-import { KeycloakProvider, KeycloakProviderProps } from "./keycloakProvider";
+import React, { useMemo } from 'react';
+import type { AuthConfig } from '../authConfig';
+import type { FC } from 'react';
+import type { KeycloakProviderProps } from './keycloakProvider';
+import { AuthConfigContext, defaultAuthConfig } from '../authConfig';
+import { KeycloakProvider } from './keycloakProvider';
 
 export interface AuthProviderProps extends KeycloakProviderProps {
   authConfig?: Partial<AuthConfig>;
 }
 
-export const AuthProvider: FC<AuthProviderProps> = (
-  props: AuthProviderProps
-) => {
+export const AuthProvider: FC<AuthProviderProps> = (props: AuthProviderProps) => {
   const { authConfig, debug } = props;
   const authConfigValue = useMemo(
     () => ({
@@ -44,7 +41,7 @@ export const AuthProvider: FC<AuthProviderProps> = (
       ...authConfig,
       debug: !!debug,
     }),
-    []
+    [],
   );
 
   return (
@@ -54,4 +51,4 @@ export const AuthProvider: FC<AuthProviderProps> = (
   );
 };
 
-export * from "./keycloakProvider";
+export * from './keycloakProvider';

package/src/provider/keycloakProvider.native.tsx

@@ -22,18 +22,16 @@
  * limitations under the License.
  */
 
-import React, { FC } from "react";
-import type { KeycloakProviderProps } from "./keycloakProvider";
-import { AfterAuth } from "./afterAuth";
-import { KeycloakConfig } from "keycloak-js";
-import { KeycloakProvider as ExpoKeycloakProvider } from "expo-keycloak-auth";
+import React from 'react';
+import type { FC } from 'react';
+import type { KeycloakConfig } from 'keycloak-js';
+import type { KeycloakProviderProps } from './keycloakProvider';
+import { AfterAuth } from './afterAuth';
+import { KeycloakProvider as ExpoKeycloakProvider } from 'expo-keycloak-auth';
 
-export const KeycloakProvider: FC<KeycloakProviderProps> = ({
-  children,
-  keycloakConfig,
-}: KeycloakProviderProps) => {
+export const KeycloakProvider: FC<KeycloakProviderProps> = ({ children, keycloakConfig }: KeycloakProviderProps) => {
   const clonedKeycloakConfig = {
-    ...(keycloakConfig as Omit<KeycloakConfig, "baseUrl">),
+    ...(keycloakConfig as Omit<KeycloakConfig, 'baseUrl'>),
     url: keycloakConfig.baseUrl,
   };
   // @ts-ignore

package/src/provider/keycloakProvider.tsx

@@ -22,22 +22,17 @@
  * limitations under the License.
  */
 
-import Keycloak, { KeycloakInitOptions } from "keycloak-js";
-import { MultiPlatform } from "multiplatform.one";
-import { ReactKeycloakProvider } from "@react-keycloak/web";
-import { SSRKeycloakProvider, SSRCookies } from "@react-keycloak/ssr";
-import { useRouter } from "next/router";
-import React, {
-  FC,
-  ReactNode,
-  useMemo,
-  useEffect,
-  useState,
-  ComponentType,
-} from "react";
-import { useAuthConfig } from "../hooks/useAuthConfig";
-import { useAuthState } from "../state";
-import { AfterAuth } from "./afterAuth";
+import Keycloak from 'keycloak-js';
+import React, { useMemo, useEffect, useState } from 'react';
+import type { FC, ReactNode, ComponentType } from 'react';
+import type { KeycloakInitOptions } from 'keycloak-js';
+import { AfterAuth } from './afterAuth';
+import { MultiPlatform } from 'multiplatform.one';
+import { ReactKeycloakProvider } from '@react-keycloak/web';
+import { SSRKeycloakProvider, SSRCookies } from '@react-keycloak/ssr';
+import { useAuthConfig } from '../hooks/useAuthConfig';
+import { useAuthState } from '../state';
+import { useRouter } from 'next/router';
 
 export interface KeycloakProviderProps {
   children: ReactNode;
@@ -59,59 +54,52 @@ export const KeycloakProvider: FC<KeycloakProviderProps> = ({
   keycloakInitOptions,
   loadingComponent,
 }: KeycloakProviderProps) => {
-  const [auth] = useAuthState();
-  const LoadingComponent =
-    loadingComponent || (() => <>{debug ? "authenticating" : null}</>);
+  const authState = useAuthState();
+  const LoadingComponent = loadingComponent || (() => <>{debug ? 'authenticating' : null}</>);
   const { query } = MultiPlatform.isNext ? useRouter() : { query: {} };
   const authConfig = useAuthConfig();
   const [token, setToken] = useState<string | boolean>(
-    ("token" in query && (query.token?.toString() || true)) ||
-      auth.token ||
-      false
+    ('token' in query && (query.token?.toString() || true)) || authState.token || false,
   );
   const [refreshToken, setRefreshToken] = useState<string | boolean>(
-    ("refreshToken" in query && (query.refreshToken?.toString() || true)) ||
-      auth.refreshToken ||
-      false
+    ('refreshToken' in query && (query.refreshToken?.toString() || true)) || authState.refreshToken || false,
   );
 
   useEffect(() => {
     if (token !== true && refreshToken !== true) return;
-    if (debug) logger.debug("post message", { type: "LOADED" });
+    if (debug) logger.debug('post message', { type: 'LOADED' });
     (authConfig.messageHandlerKeys || []).forEach((key: string) => {
-      window?.webkit?.messageHandlers?.[key]?.postMessage(
-        JSON.stringify({ type: "LOADED" })
-      );
+      window?.webkit?.messageHandlers?.[key]?.postMessage(JSON.stringify({ type: 'LOADED' }));
     });
-    window?.ReactNativeWebView?.postMessage(JSON.stringify({ type: "LOADED" }));
-    window?.parent?.postMessage(JSON.stringify({ type: "LOADED" }));
+    window?.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'LOADED' }));
+    window?.parent?.postMessage(JSON.stringify({ type: 'LOADED' }));
   }, []);
 
   useEffect(() => {
     if (token !== true) return;
     const messageCallback = (e: MessageEvent<any>) => {
       let data = e?.data;
-      if (typeof data === "string") {
+      if (typeof data === 'string') {
         try {
           data = JSON.parse(data);
         } catch (err) {}
       }
-      if (debug) logger.debug("received message", data);
+      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);
+      if (message.type.toUpperCase() === 'TOKEN' && message.payload) {
+        if (debug) logger.debug('setting token', message.payload);
         setToken(message.payload);
       }
     };
     if (debug)
-      logger.debug("listening for message", {
-        type: "TOKEN",
-        payload: "<some_token>",
+      logger.debug('listening for message', {
+        type: 'TOKEN',
+        payload: '<some_token>',
       });
-    window.addEventListener("message", messageCallback);
+    window.addEventListener('message', messageCallback);
     return () => {
-      window.removeEventListener("message", messageCallback);
+      window.removeEventListener('message', messageCallback);
     };
   }, []);
 
@@ -119,39 +107,39 @@ export const KeycloakProvider: FC<KeycloakProviderProps> = ({
     if (refreshToken !== true) return;
     const messageCallback = (e: MessageEvent<any>) => {
       let data = e?.data;
-      if (typeof data === "string") {
+      if (typeof data === 'string') {
         try {
           data = JSON.parse(data);
         } catch (err) {}
       }
-      if (debug) logger.debug("received message", data);
+      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);
+      if (message.type.toUpperCase() === 'REFRESH_TOKEN' && message.payload) {
+        if (debug) logger.debug('setting refresh token', message.payload);
         setRefreshToken(message.payload);
       }
     };
     if (debug)
-      logger.debug("listening for message", {
-        type: "REFRESH_TOKEN",
-        payload: "<some_refresh_token>",
+      logger.debug('listening for message', {
+        type: 'REFRESH_TOKEN',
+        payload: '<some_refresh_token>',
       });
-    window.addEventListener("message", messageCallback);
+    window.addEventListener('message', messageCallback);
     return () => {
-      window.removeEventListener("message", messageCallback);
+      window.removeEventListener('message', messageCallback);
     };
   }, []);
 
   const keycloak = useMemo(
     () =>
-      typeof window !== "undefined" &&
+      typeof window !== 'undefined' &&
       new Keycloak({
         url: keycloakConfig.baseUrl,
         realm: keycloakConfig.realm,
         clientId: keycloakConfig.clientId,
       }),
-    []
+    [],
   );
 
   const initOptions = useMemo(() => {
@@ -159,10 +147,9 @@ export const KeycloakProvider: FC<KeycloakProviderProps> = ({
       ...defaultKeycloakInitOptions,
       ...keycloakInitOptions,
     };
-    if (token && typeof token === "string") {
+    if (token && typeof token === 'string') {
       initOptions.token = token;
-      if (refreshToken && typeof refreshToken === "string")
-        initOptions.refreshToken = refreshToken;
+      if (refreshToken && typeof refreshToken === 'string') initOptions.refreshToken = refreshToken;
       initOptions.checkLoginIframe = false;
       initOptions.onLoad = undefined;
     }
@@ -189,11 +176,7 @@ export const KeycloakProvider: FC<KeycloakProviderProps> = ({
   }
   if (!keycloak) return <>{children}</>;
   return (
-    <ReactKeycloakProvider
-      initOptions={initOptions}
-      authClient={keycloak}
-      LoadingComponent={<LoadingComponent />}
-    >
+    <ReactKeycloakProvider initOptions={initOptions} authClient={keycloak} LoadingComponent={<LoadingComponent />}>
       <AfterAuth>{children}</AfterAuth>
     </ReactKeycloakProvider>
   );
@@ -210,8 +193,8 @@ export const defaultKeycloakInitOptions: KeycloakInitOptions = {
   checkLoginIframe: true,
   checkLoginIframeInterval: 5,
   enableLogging: false,
-  onLoad: "check-sso",
-  pkceMethod: "S256",
+  onLoad: 'check-sso',
+  pkceMethod: 'S256',
 };
 
 export interface MessageSchema {

package/src/state/index.ts

@@ -4,7 +4,7 @@
  * File Created: 22-11-2022 17:40:53
  * Author: Clay Risser
  * -----
- * Last Modified: 01-02-2023 14:38:51
+ * Last Modified: 24-02-2023 06:26:51
  * Modified By: Clay Risser
  * -----
  * Risser Labs LLC (c) Copyright 2021 - 2022
@@ -22,15 +22,18 @@
  * limitations under the License.
  */
 
-import { atom, useRecoilState } from "recoil";
-import { persistAtom } from "multiplatform.one/recoil";
+import { createStateStore } from 'multiplatform.one/zustand';
+
+const { useStore } = createStateStore(
+  'auth',
+  {
+    token: '',
+    refreshToken: '',
+  },
+  undefined,
+  { persist: true },
+);
 
 export function useAuthState() {
-  return useRecoilState(authState);
+  return useStore();
 }
-
-export const authState = atom<{ token?: string; refreshToken?: string }>({
-  key: "auth",
-  default: {},
-  effects: [persistAtom],
-});