@multiplatform.one/keycloak 1.0.36 → 2.0.1

package/src/keycloak/config.ts

@@ -19,10 +19,10 @@
  * limitations under the License.
  */
 
-'use client';
+"use client";
 
-import type { KeycloakConfig as KeycloakJsConfig } from 'keycloak-js';
-import { createContext } from 'react';
+import type { KeycloakConfig as KeycloakJsConfig } from "keycloak-js";
+import { createContext } from "react";
 
 export interface KeycloakConfig extends KeycloakJsConfig {
   publicClientId?: string;
@@ -30,7 +30,7 @@ export interface KeycloakConfig extends KeycloakJsConfig {
 }
 
 export const KeycloakConfigContext = createContext<KeycloakConfig>({
-  clientId: '',
-  realm: '',
-  url: '',
+  clientId: "",
+  realm: "",
+  url: "",
 });

package/src/keycloak/context.ts

@@ -19,9 +19,9 @@
  * limitations under the License.
  */
 
-'use client';
+"use client";
 
-import type { Keycloak } from './keycloak';
-import { createContext } from 'react';
+import { createContext } from "react";
+import type { Keycloak } from "./keycloak";
 
 export const KeycloakContext = createContext<Keycloak | undefined>(undefined);

package/src/keycloak/index.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export * from './config';
-export * from './keycloak';
+export * from "./config";
+export * from "./keycloak";

package/src/keycloak/keycloak.native.ts

@@ -19,16 +19,16 @@
  * limitations under the License.
  */
 
-import type KeycloakClient from 'keycloak-js';
-import type { AccessTokenParsed, TokenParsed } from '../token';
-import type { KeycloakConfig } from 'keycloak-js';
-import type { KeycloakLoginOptions, KeycloakLogoutOptions } from '../keycloak';
-import type { KeycloakMock } from '../types';
-import { KeycloakConfigContext } from '../keycloak/config';
-import { KeycloakContext } from './context';
-import { MultiPlatform } from 'multiplatform.one';
-import { jwtDecode } from 'jwt-decode';
-import { useContext } from 'react';
+import { jwtDecode } from "jwt-decode";
+import type KeycloakClient from "keycloak-js";
+import type { KeycloakConfig } from "keycloak-js";
+import { MultiPlatform } from "multiplatform.one";
+import { useContext } from "react";
+import type { KeycloakLoginOptions, KeycloakLogoutOptions } from "../keycloak";
+import { KeycloakConfigContext } from "../keycloak/config";
+import type { AccessTokenParsed, TokenParsed } from "../token";
+import type { KeycloakMock } from "../types";
+import { KeycloakContext } from "./context";
 
 export class Keycloak {
   token?: string;
@@ -51,19 +51,21 @@ export class Keycloak {
     login?: (_options: KeycloakLoginOptions) => Promise<undefined>,
     logout?: (_options: KeycloakLogoutOptions) => Promise<undefined>,
   ) {
-    if (typeof input === 'string') {
+    if (typeof input === "string") {
       this.token = input;
       this.idToken = idToken;
       this.refreshToken = refreshToken;
-    } else if (typeof input === 'object') {
-      if (typeof (input as KeycloakClient).init === 'function') {
+    } else if (typeof input === "object") {
+      if (typeof (input as KeycloakClient).init === "function") {
         this.keycloakClient = input as KeycloakClient;
       } else {
         this.mock = input as KeycloakMock;
       }
     }
-    if (this.token && !this._tokenParsed) this._tokenParsed = jwtDecode(this.token) as AccessTokenParsed;
-    if (this.idToken && !this._idTokenParsed) this._idTokenParsed = jwtDecode(this.idToken) as TokenParsed;
+    if (this.token && !this._tokenParsed)
+      this._tokenParsed = jwtDecode(this.token) as AccessTokenParsed;
+    if (this.idToken && !this._idTokenParsed)
+      this._idTokenParsed = jwtDecode(this.idToken) as TokenParsed;
     if (this.refreshToken && !this._refreshTokenParsed) {
       this._refreshTokenParsed = jwtDecode(this.refreshToken) as TokenParsed;
     }
@@ -72,17 +74,20 @@ export class Keycloak {
   }
 
   get tokenParsed() {
-    if (this.keycloakClient) return this.keycloakClient.tokenParsed as AccessTokenParsed;
+    if (this.keycloakClient)
+      return this.keycloakClient.tokenParsed as AccessTokenParsed;
     return this._tokenParsed;
   }
 
   get idTokenParsed() {
-    if (this.keycloakClient) return this.keycloakClient.idTokenParsed as TokenParsed;
+    if (this.keycloakClient)
+      return this.keycloakClient.idTokenParsed as TokenParsed;
     return this._idTokenParsed;
   }
 
   get refreshTokenParsed() {
-    if (this.keycloakClient) return this.keycloakClient.refreshTokenParsed as TokenParsed;
+    if (this.keycloakClient)
+      return this.keycloakClient.refreshTokenParsed as TokenParsed;
     return this._refreshTokenParsed;
   }
 
@@ -99,7 +104,7 @@ export class Keycloak {
 
   get realm() {
     if (this.keycloakClient) return this.keycloakClient.realm;
-    return this.tokenParsed?.iss?.split('/').pop() || this.config.realm;
+    return this.tokenParsed?.iss?.split("/").pop() || this.config.realm;
   }
 
   get realmAccess() {
@@ -129,13 +134,16 @@ export class Keycloak {
 
   async getUserInfo() {
     if (!this.authenticated) return;
-    const response = await fetch(`${this.config.url}/realms/${this.config.realm}/protocol/openid-connect/userinfo`, {
-      method: 'GET',
-      headers: {
-        Authorization: 'Bearer ' + this.token,
-        Accept: 'application/json',
+    const response = await fetch(
+      `${this.config.url}/realms/${this.config.realm}/protocol/openid-connect/userinfo`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${this.token}`,
+          Accept: "application/json",
+        },
       },
-    });
+    );
     if (response.ok) return response.json();
   }
 
@@ -175,8 +183,8 @@ export function useKeycloak() {
   if (keycloak) return keycloak;
   if (MultiPlatform.isStorybook) {
     return new Keycloak(keycloakConfig, {
-      email: 'storybook@example.com',
-      username: 'storybook',
+      email: "storybook@example.com",
+      username: "storybook",
     });
   }
 }

package/src/keycloak/keycloak.ts

@@ -19,25 +19,26 @@
  * limitations under the License.
  */
 
-import type KeycloakClient from 'keycloak-js';
-import type { AccessTokenParsed, TokenParsed } from '../token';
-import type { AuthRequestPromptOptions } from 'expo-auth-session';
-import type { KeycloakMock } from '../types';
-import type { Session } from '../session/session';
-import { KeycloakConfigContext, type KeycloakConfig } from './config';
-import { KeycloakContext } from './context';
-import { MultiPlatform } from 'multiplatform.one';
-import { useSession } from '../session/session';
-import { jwtDecode } from 'jwt-decode';
-import { signIn, signOut } from 'next-auth/react';
-import { useAuthConfig } from '../hooks';
-import { useContext } from 'react';
+import type { AuthRequestPromptOptions } from "expo-auth-session";
+import { jwtDecode } from "jwt-decode";
+import type KeycloakClient from "keycloak-js";
 import type {
   KeycloakLoginOptions as KeycloakJsLoginOptions,
   KeycloakLogoutOptions as KeycloakJsLogoutOptions,
-} from 'keycloak-js';
-
-export type KeycloakLoginOptions = KeycloakJsLoginOptions & AuthRequestPromptOptions & { redirect?: boolean };
+} from "keycloak-js";
+import { MultiPlatform } from "multiplatform.one";
+import { signIn, signOut } from "next-auth/react";
+import { useContext } from "react";
+import { useAuthConfig } from "../hooks";
+import type { Session } from "../session/session";
+import { useSession } from "../session/session";
+import type { AccessTokenParsed, TokenParsed } from "../token";
+import type { KeycloakMock } from "../types";
+import { type KeycloakConfig, KeycloakConfigContext } from "./config";
+import { KeycloakContext } from "./context";
+
+export type KeycloakLoginOptions = KeycloakJsLoginOptions &
+  AuthRequestPromptOptions & { redirect?: boolean };
 export type KeycloakLogoutOptions = KeycloakJsLogoutOptions;
 
 export class Keycloak {
@@ -61,12 +62,12 @@ export class Keycloak {
     login?: (_options: KeycloakLoginOptions) => Promise<undefined>,
     logout?: (_options: KeycloakLogoutOptions) => Promise<undefined>,
   ) {
-    if (typeof input === 'string') {
+    if (typeof input === "string") {
       this.token = input;
       this.idToken = idToken;
       this.refreshToken = refreshToken;
-    } else if (typeof input === 'object') {
-      if (typeof (input as KeycloakClient).init === 'function') {
+    } else if (typeof input === "object") {
+      if (typeof (input as KeycloakClient).init === "function") {
         this.keycloakClient = input as KeycloakClient;
       } else if ((input as Session).accessToken) {
         const session = input as Session;
@@ -77,8 +78,10 @@ export class Keycloak {
         this.mock = input as KeycloakMock;
       }
     }
-    if (this.token && !this._tokenParsed) this._tokenParsed = jwtDecode(this.token) as AccessTokenParsed;
-    if (this.idToken && !this._idTokenParsed) this._idTokenParsed = jwtDecode(this.idToken) as TokenParsed;
+    if (this.token && !this._tokenParsed)
+      this._tokenParsed = jwtDecode(this.token) as AccessTokenParsed;
+    if (this.idToken && !this._idTokenParsed)
+      this._idTokenParsed = jwtDecode(this.idToken) as TokenParsed;
     if (this.refreshToken && !this._refreshTokenParsed) {
       this._refreshTokenParsed = jwtDecode(this.refreshToken) as TokenParsed;
     }
@@ -87,17 +90,20 @@ export class Keycloak {
   }
 
   get tokenParsed() {
-    if (this.keycloakClient) return this.keycloakClient.tokenParsed as AccessTokenParsed;
+    if (this.keycloakClient)
+      return this.keycloakClient.tokenParsed as AccessTokenParsed;
     return this._tokenParsed;
   }
 
   get idTokenParsed() {
-    if (this.keycloakClient) return this.keycloakClient.idTokenParsed as TokenParsed;
+    if (this.keycloakClient)
+      return this.keycloakClient.idTokenParsed as TokenParsed;
     return this._idTokenParsed;
   }
 
   get refreshTokenParsed() {
-    if (this.keycloakClient) return this.keycloakClient.refreshTokenParsed as TokenParsed;
+    if (this.keycloakClient)
+      return this.keycloakClient.refreshTokenParsed as TokenParsed;
     return this._refreshTokenParsed;
   }
 
@@ -114,7 +120,7 @@ export class Keycloak {
 
   get realm() {
     if (this.keycloakClient) return this.keycloakClient.realm;
-    return this.tokenParsed?.iss?.split('/').pop() || this.config.realm;
+    return this.tokenParsed?.iss?.split("/").pop() || this.config.realm;
   }
 
   get realmAccess() {
@@ -144,13 +150,16 @@ export class Keycloak {
 
   async getUserInfo() {
     if (!this.authenticated) return;
-    const response = await fetch(`${this.config.url}/realms/${this.config.realm}/protocol/openid-connect/userinfo`, {
-      method: 'GET',
-      headers: {
-        Authorization: 'Bearer ' + this.token,
-        Accept: 'application/json',
+    const response = await fetch(
+      `${this.config.url}/realms/${this.config.realm}/protocol/openid-connect/userinfo`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${this.token}`,
+          Accept: "application/json",
+        },
       },
-    });
+    );
     if (response.ok) return response.json();
   }
 
@@ -161,7 +170,7 @@ export class Keycloak {
     if (this.keycloakClient) {
       await this.keycloakClient.login(options);
     } else if (MultiPlatform.isNext && !MultiPlatform.isServer) {
-      await signIn('keycloak', {
+      await signIn("keycloak", {
         callbackUrl: options.redirectUri,
         redirect: options.redirect,
       });
@@ -177,7 +186,7 @@ export class Keycloak {
     if (this.keycloakClient) {
       await this.keycloakClient.logout(options);
     } else if (MultiPlatform.isNext && !MultiPlatform.isServer) {
-      await fetch('/api/auth/logout', { method: 'GET' });
+      await fetch("/api/auth/logout", { method: "GET" });
       await signOut({
         callbackUrl: options.redirectUri,
       });
@@ -203,12 +212,14 @@ export function useKeycloak() {
   const { session, status } = useSession();
   if (MultiPlatform.isStorybook) {
     return new Keycloak(keycloakConfig, {
-      email: 'storybook@example.com',
-      username: 'storybook',
+      email: "storybook@example.com",
+      username: "storybook",
     });
-  } else if (status === 'unauthenticated') {
+  }
+  if (status === "unauthenticated") {
     return new Keycloak(keycloakConfig);
-  } else if (status === 'authenticated' && session?.accessToken) {
+  }
+  if (status === "authenticated" && session?.accessToken) {
     return new Keycloak(keycloakConfig, session as Session);
   }
 }

package/src/provider/AfterAuth.tsx

@@ -19,46 +19,62 @@
  * limitations under the License.
  */
 
-'use client';
+"use client";
 
-import React, { useEffect } from 'react';
-import type { PropsWithChildren } from 'react';
-import { useAuthConfig } from '../hooks';
-import { useAuthState, persist } from '../state';
-import { useKeycloak } from '../keycloak';
+import React, {
+  type ComponentType,
+  type PropsWithChildren,
+  useEffect,
+} from "react";
+import { Loading } from "../Loading";
+import { useAuthConfig } from "../hooks";
+import { useKeycloak } from "../keycloak";
+import { persist, useAuthStore } from "../state";
 
-export interface AfterAuthProps extends PropsWithChildren {}
+export interface AfterAuthProps extends PropsWithChildren {
+  loadingComponent?: ComponentType;
+}
 
 const logger = console;
 
-export function AfterAuth({ children }: AfterAuthProps) {
+export function AfterAuth({ children, loadingComponent }: AfterAuthProps) {
   const authConfig = useAuthConfig();
-  const authState = useAuthState();
+  const authStore = useAuthStore();
   const keycloak = useKeycloak();
+  if (!authStore) return <Loading loadingComponent={loadingComponent} />;
 
   useEffect(() => {
     if (!persist || !keycloak?.authenticated) return;
     if (keycloak.token) {
-      authState.setToken(keycloak.token);
-      if (keycloak.idToken) authState.setIdToken(keycloak.idToken);
-      if (keycloak.refreshToken) authState.setRefreshToken(keycloak.refreshToken);
+      authStore.token = keycloak.token;
+      if (keycloak.idToken) authStore.idToken = keycloak.idToken;
+      if (keycloak.refreshToken) authStore.refreshToken = keycloak.refreshToken;
     }
-  }, [keycloak?.authenticated, keycloak?.token, keycloak?.idToken, keycloak?.refreshToken]);
+  }, [
+    keycloak?.authenticated,
+    keycloak?.token,
+    keycloak?.idToken,
+    keycloak?.refreshToken,
+  ]);
 
   useEffect(() => {
-    if (authConfig.debug && keycloak?.token) logger.debug('token', keycloak.token);
+    if (authConfig.debug && keycloak?.token)
+      logger.debug("token", keycloak.token);
   }, [keycloak?.token]);
 
   useEffect(() => {
-    if (authConfig.debug && keycloak?.idToken) logger.debug('idToken', keycloak.idToken);
+    if (authConfig.debug && keycloak?.idToken)
+      logger.debug("idToken", keycloak.idToken);
   }, [keycloak?.idToken]);
 
   useEffect(() => {
-    if (authConfig.debug && keycloak?.refreshToken) logger.debug('refreshToken', keycloak.refreshToken);
+    if (authConfig.debug && keycloak?.refreshToken)
+      logger.debug("refreshToken", keycloak.refreshToken);
   }, [keycloak?.refreshToken]);
 
   useEffect(() => {
-    if (authConfig.debug && keycloak?.authenticated) logger.debug('authenticated', keycloak.authenticated);
+    if (authConfig.debug && keycloak?.authenticated)
+      logger.debug("authenticated", keycloak.authenticated);
   }, [keycloak?.authenticated]);
 
   return <>{children}</>;

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

@@ -19,33 +19,65 @@
  * limitations under the License.
  */
 
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import type { AuthProviderProps, Tokens } from './AuthProvider';
-import type { KeycloakLoginOptions, KeycloakLogoutOptions } from '../../keycloak';
-import { AfterAuth } from '../AfterAuth';
-import { Keycloak, KeycloakConfigContext } from '../../keycloak';
-import { KeycloakContext } from '../../keycloak/context';
-import { makeRedirectUri, useAuthRequest, useAutoDiscovery, refreshAsync, exchangeCodeAsync } from 'expo-auth-session';
-import { persist, useAuthState } from '../../state';
-import { validOrRefreshableToken, isTokenExpired } from '../../token';
+import {
+  exchangeCodeAsync,
+  makeRedirectUri,
+  refreshAsync,
+  useAuthRequest,
+  useAutoDiscovery,
+} from "expo-auth-session";
+import React, { useState, useEffect, useMemo, useCallback } 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, Tokens } from "./AuthProvider";
 
 const REFRESH_THRESHOLD = 5;
 
-export function AuthProvider({ children, keycloakConfig }: AuthProviderProps) {
+export function AuthProvider({
+  children,
+  keycloakConfig,
+  loadingComponent,
+}: AuthProviderProps) {
   const [keycloak, setKeycloak] = useState<Keycloak>();
-  const authState = useAuthState();
-  const initialRefreshToken = useMemo(() => validOrRefreshableToken((persist && authState.refreshToken) || false), []);
+  const authStore = useAuthStore();
+  if (!authStore) return <Loading loadingComponent={loadingComponent} />;
+  const initialRefreshToken = useMemo(
+    () => validOrRefreshableToken((persist && authStore.refreshToken) || false),
+    [],
+  );
   const keycloakUrl = `${keycloakConfig?.url}/realms/${keycloakConfig?.realm}`;
-  const clientId = keycloakConfig.publicClientId || keycloakConfig?.clientId || '';
+  const clientId =
+    keycloakConfig.publicClientId || keycloakConfig?.clientId || "";
   const discovery = useAutoDiscovery(keycloakUrl);
   const redirectUri = makeRedirectUri();
   const [tokens, setTokens] = useState<Tokens<false>>({
     refreshToken: initialRefreshToken,
-    token: validOrRefreshableToken((persist && authState.token) || false, initialRefreshToken),
-    idToken: validOrRefreshableToken((persist && authState.idToken) || false, initialRefreshToken),
+    token: validOrRefreshableToken(
+      (persist && authStore.token) || false,
+      initialRefreshToken,
+    ),
+    idToken: validOrRefreshableToken(
+      (persist && authStore.idToken) || false,
+      initialRefreshToken,
+    ),
   });
   const scopes = useMemo(
-    () => [...new Set(['email', 'openid', 'profile', ...(keycloakConfig.scopes || [])])],
+    () => [
+      ...new Set([
+        "email",
+        "openid",
+        "profile",
+        ...(keycloakConfig.scopes || []),
+      ]),
+    ],
     [keycloakConfig.scopes],
   );
   const [request, response, promptAsync] = useAuthRequest(
@@ -58,9 +90,14 @@ export function AuthProvider({ children, keycloakConfig }: AuthProviderProps) {
   );
 
   useEffect(() => {
-    if (!discovery || !response?.type || !request?.codeVerifier || !clientId) return;
+    if (!discovery || !response?.type || !request?.codeVerifier || !clientId)
+      return;
     (async () => {
-      if (response?.type === 'success' && request.codeVerifier && response.params.code) {
+      if (
+        response?.type === "success" &&
+        request.codeVerifier &&
+        response.params.code
+      ) {
         const tokenResponse = await exchangeCodeAsync(
           {
             clientId,
@@ -85,16 +122,16 @@ export function AuthProvider({ children, keycloakConfig }: AuthProviderProps) {
   }, [
     !discovery,
     request?.codeVerifier,
-    response?.type === 'success' ? response?.params?.code : undefined,
+    response?.type === "success" ? response?.params?.code : undefined,
     clientId,
     scopes,
     redirectUri,
   ]);
 
   const resetTokens = useCallback(() => {
-    authState.setIdToken('');
-    authState.setRefreshToken('');
-    authState.setToken('');
+    authStore.idToken = "";
+    authStore.refreshToken = "";
+    authStore.token = "";
     setTokens({
       refreshToken: undefined,
       token: undefined,
@@ -104,7 +141,7 @@ export function AuthProvider({ children, keycloakConfig }: AuthProviderProps) {
 
   const refreshTokens = useCallback(async () => {
     if (!discovery) return;
-    if (typeof tokens.refreshToken === 'string') {
+    if (typeof tokens.refreshToken === "string") {
       if (!isTokenExpired(tokens.refreshToken)) {
         const tokenResponse = await refreshAsync(
           {
@@ -127,9 +164,9 @@ export function AuthProvider({ children, keycloakConfig }: AuthProviderProps) {
         resetTokens();
       }
     } else if (
-      authState.refreshToken &&
-      typeof authState.refreshToken === 'string' &&
-      isTokenExpired(authState.refreshToken)
+      authStore.refreshToken &&
+      typeof authStore.refreshToken === "string" &&
+      isTokenExpired(authStore.refreshToken)
     ) {
       resetTokens();
     }
@@ -162,7 +199,10 @@ export function AuthProvider({ children, keycloakConfig }: AuthProviderProps) {
         if (_keycloak.tokenParsed?.exp) {
           const timeout =
             Math.max(
-              Math.min(_keycloak.tokenParsed.exp, _keycloak.refreshTokenParsed?.exp || 0) -
+              Math.min(
+                _keycloak.tokenParsed.exp,
+                _keycloak.refreshTokenParsed?.exp || 0,
+              ) -
                 Math.floor(Date.now() / 1000) -
                 REFRESH_THRESHOLD,
               REFRESH_THRESHOLD,
@@ -172,7 +212,10 @@ export function AuthProvider({ children, keycloakConfig }: AuthProviderProps) {
               refreshTokens();
             }, timeout);
           } else {
-            setTimeout(() => _keycloak.logout(), Math.max(0, timeout + REFRESH_THRESHOLD) * 1000);
+            setTimeout(
+              () => _keycloak.logout(),
+              Math.max(0, timeout + REFRESH_THRESHOLD) * 1000,
+            );
             return;
           }
         }
@@ -182,7 +225,13 @@ export function AuthProvider({ children, keycloakConfig }: AuthProviderProps) {
     return () => {
       if (refreshHandle) clearTimeout(refreshHandle);
     };
-  }, [!request, tokens.token, tokens.idToken, tokens.refreshToken, refreshTokens]);
+  }, [
+    !request,
+    tokens.token,
+    tokens.idToken,
+    tokens.refreshToken,
+    refreshTokens,
+  ]);
 
   return (
     <KeycloakConfigContext.Provider value={keycloakConfig}>