@multiplatform.one/keycloak 1.0.2 → 1.0.3

package/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@multiplatform.one/keycloak",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "keycloak client for multiplatform.one ecosystem",
-  "main": "lib/index.js",
-  "module": "lib/index.mjs",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
-  "types": "lib/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/index.mjs",
-      "require": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./types/index.d.ts"
     },
     "./routes": {
-      "import": "./lib/routes.mjs",
-      "require": "./lib/routes.js",
-      "types": "./lib/routes.d.ts"
+      "import": "./dist/esm/routes.js",
+      "require": "./dist/cjs/routes.js",
+      "types": "./dist/esm/routes.d.ts"
     }
   },
   "author": "BitSpur",
@@ -40,35 +41,31 @@
     "url": "https://gitlab.com/risserlabs/multiplatform.one/keycloak"
   },
   "peerDependencies": {
-    "@react-native-async-storage/async-storage": "1.19.3",
-    "expo-keycloak-auth": "1.0.14",
-    "multiplatform.one": "^1.0.2",
+    "@react-native-async-storage/async-storage": "1.21.0",
+    "multiplatform.one": "^1.0.3",
     "next": "^13.0.5",
-    "react": "^18.2.0",
-    "react-native": "~0.73.1"
+    "react": "18.2.0",
+    "react-native": "0.73.6"
   },
   "devDependencies": {
     "@react-native-async-storage/async-storage": "1.21.0",
-    "@react-navigation/native": "^6.1.9",
-    "@types/eslint": "^8.56.2",
-    "@types/jest": "^29.5.11",
+    "@tamagui/build": "^1.95.1",
+    "@types/eslint": "^8.56.10",
+    "@types/jest": "^29.5.12",
     "@types/lodash.camelcase": "^4.3.9",
     "@types/lodash.startcase": "^4.4.9",
-    "@types/react": "^18.2.48",
+    "@types/react": "^18.3.1",
     "@types/react-native": "^0.73.0",
-    "cspell": "^8.3.2",
-    "eslint": "^8.56.0",
-    "expo-keycloak-auth": "1.0.14",
+    "cspell": "^8.7.0",
+    "eslint": "~8.56.0",
     "jest": "^29.7.0",
     "jest-sonar-reporter": "^2.0.0",
-    "multiplatform.one": "^1.0.2",
-    "next": "^14.0.4",
-    "prettier": "^3.2.4",
-    "react": "^18.2.0",
-    "react-native": "~0.73.2",
-    "ts-node": "^10.9.2",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
+    "multiplatform.one": "^1.0.3",
+    "next": "^14.2.3",
+    "prettier": "^3.2.5",
+    "react": "18.2.0",
+    "react-native": "0.73.6",
+    "typescript": "5.3.3"
   },
   "engines": {
     "node": ">=6.0.0"
@@ -95,9 +92,10 @@
     "indent": 4
   },
   "dependencies": {
-    "@apollo/client": "^3.8.9",
-    "expo-auth-session": "^5.4.0",
-    "keycloak-js": "^23.0.4",
-    "next-auth": "^4.24.5"
+    "@apollo/client": "^3.10.1",
+    "expo-auth-session": "^5.5.1",
+    "expo-crypto": "^12.8.1",
+    "keycloak-js": "^24.0.3",
+    "next-auth": "^4.24.7"
   }
 }

package/routes/index.d.ts

@@ -19,4 +19,4 @@
  *  limitations under the License.
  */
 
-export * from '../lib/routes.js';
+export * from '../types/routes';

package/routes/index.js

@@ -19,4 +19,4 @@
  *  limitations under the License.
  */
 
-module.exports = require('../lib/routes/index');
+module.exports = require('../dist/cjs/routes.js');

package/src/Authenticated.tsx

@@ -19,11 +19,18 @@
  * limitations under the License.
  */
 
+'use client';
+
 import React, { ComponentType, PropsWithChildren, useEffect } from 'react';
 import { MultiPlatform } from 'multiplatform.one';
-import { useAuthConfig, useTokensFromQuery, useTokensFromState } from './hooks';
+import { Text } from 'tamagui';
+import { useAuthConfig, useTokensFromQuery } from './hooks';
 import { useKeycloak } from './keycloak';
 
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+global.AsyncStorage = AsyncStorage;
+
 export interface AuthenticatedProps extends PropsWithChildren {
   disabled?: boolean;
   loadingComponent?: ComponentType;
@@ -34,33 +41,25 @@ export function Authenticated({ children, disabled, loggedOutComponent, loadingC
   const authConfig = useAuthConfig();
   const keycloak = useKeycloak();
   const tokensFromQuery = useTokensFromQuery();
-  const tokensFromState = useTokensFromState();
 
   useEffect(() => {
-    if (
-      !keycloak ||
-      MultiPlatform.isIframe ||
-      MultiPlatform.isServer ||
-      keycloak.authenticated ||
-      tokensFromQuery ||
-      tokensFromState
-    ) {
+    if (!keycloak || MultiPlatform.isIframe || MultiPlatform.isServer || keycloak.authenticated || tokensFromQuery) {
       return;
     }
     keycloak.login({
       redirectUri: authConfig.loginRedirectUri,
     });
-  }, [keycloak]);
+  }, [keycloak?.authenticated]);
 
   if (typeof disabled === 'undefined') disabled = authConfig.disabled;
   if (disabled) return <>{children}</>;
   if (typeof keycloak === 'undefined') {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? <LoadingComponent /> : <>{authConfig.debug ? 'loading' : null}</>;
+    return LoadingComponent ? <LoadingComponent /> : <Text>{authConfig.debug ? 'loading' : null}</Text>;
   }
   if (keycloak.authenticated) return <>{children}</>;
   const LoggedOutComponent = loggedOutComponent;
-  return LoggedOutComponent ? <LoggedOutComponent /> : <>{authConfig.debug ? 'not authenticated' : null}</>;
+  return LoggedOutComponent ? <LoggedOutComponent /> : <Text>{authConfig.debug ? 'not authenticated' : null}</Text>;
 }
 
 export function withAuthenticated<P extends object>(Component: ComponentType<P>) {

package/src/apollo.ts

@@ -1,7 +1,7 @@
 /*
  *  File: /src/apollo.ts
  *  Project: @multiplatform.one/keycloak
- *  File Created: 13-01-2024 13:37:13
+ *  File Created: 04-04-2024 15:50:39
  *  Author: Clay Risser
  *  -----
  *  BitSpur (c) Copyright 2021 - 2024

package/src/authConfig.ts

@@ -19,6 +19,8 @@
  *  limitations under the License.
  */
 
+'use client';
+
 import { createContext } from 'react';
 
 export const defaultAuthConfig: AuthConfig = {};

package/src/hooks/useTokensFromQuery/index.ts

@@ -19,6 +19,8 @@
  *  limitations under the License.
  */
 
+'use client';
+
 import { MultiPlatform } from 'multiplatform.one';
 import { useRouter } from 'next/router';
 

package/src/hooks/useTokensFromState.ts

@@ -20,9 +20,9 @@
  */
 
 import { useAuthState } from '../state';
-import { validToken } from '../token';
+import { validOrRefreshableToken } from '../token';
 
 export function useTokensFromState() {
   const authState = useAuthState();
-  return !!validToken(authState.token, authState.refreshToken);
+  return !!validOrRefreshableToken(authState.token, authState.refreshToken);
 }

package/{lib/@types/expoKeycloakAuth.d.d.mts → src/keycloak/config.ts}

@@ -1,10 +1,10 @@
 /*
- *  File: /src/@types/expoKeycloakAuth.d.ts
+ *  File: /src/keycloak/config.ts
  *  Project: @multiplatform.one/keycloak
- *  File Created: 22-06-2023 10:07:56
+ *  File Created: 27-04-2024 10:53:19
  *  Author: Clay Risser
  *  -----
- *  BitSpur (c) Copyright 2021 - 2023
+ *  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.
@@ -19,7 +19,18 @@
  *  limitations under the License.
  */
 
-declare module 'expo-keycloak-auth' {
-  export function useKeycloak(): any;
-  export const KeycloakProvider: any;
+'use client';
+
+import type { KeycloakConfig as KeycloakJsConfig } from 'keycloak-js';
+import { createContext } from 'react';
+
+export interface KeycloakConfig extends KeycloakJsConfig {
+  publicClientId?: string;
+  scopes?: string[];
 }
+
+export const KeycloakConfigContext = createContext<KeycloakConfig>({
+  clientId: '',
+  realm: '',
+  url: '',
+});

package/src/keycloak/context.ts

@@ -1,7 +1,7 @@
 /*
  *  File: /src/keycloak/context.ts
  *  Project: @multiplatform.one/keycloak
- *  File Created: 10-01-2024 15:10:13
+ *  File Created: 04-04-2024 15:50:39
  *  Author: Clay Risser
  *  -----
  *  BitSpur (c) Copyright 2021 - 2024
@@ -19,6 +19,8 @@
  *  limitations under the License.
  */
 
+'use client';
+
 import type { Keycloak } from './keycloak';
 import { createContext } from 'react';
 

package/src/keycloak/index.ts

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

package/src/keycloak/keycloak.native.ts

@@ -21,25 +21,36 @@
 
 import type KeycloakClient from 'keycloak-js';
 import type { AccessTokenParsed, TokenParsed } from '../token';
-import type { KeycloakLoginOptions, KeycloakLogoutOptions } from 'keycloak-js';
+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 { getSession } from '../session/session';
 import { jwtDecode } from 'jwt-decode';
-import { useKeycloak as useExpoKeycloak } from 'expo-keycloak-auth';
+import { useContext } from 'react';
 
 export class Keycloak {
-  token: string;
+  token?: string;
   idToken?: string;
   refreshToken?: string;
 
-  private _tokenParsed?: AccessTokenParsed;
   private _idTokenParsed?: TokenParsed;
+  private _login?: (_options: KeycloakLoginOptions) => Promise<undefined>;
+  private _logout?: (_options: KeycloakLogoutOptions) => Promise<undefined>;
   private _refreshTokenParsed?: TokenParsed;
+  private _tokenParsed?: AccessTokenParsed;
   private keycloakClient?: KeycloakClient;
   private mock: KeycloakMock | undefined;
 
-  constructor(input: string | KeycloakClient | KeycloakMock, idToken?: string, refreshToken?: string) {
+  constructor(
+    public readonly config: KeycloakConfig,
+    input?: string | KeycloakClient | KeycloakMock,
+    idToken?: string,
+    refreshToken?: string,
+    login?: (_options: KeycloakLoginOptions) => Promise<undefined>,
+    logout?: (_options: KeycloakLogoutOptions) => Promise<undefined>,
+  ) {
     if (typeof input === 'string') {
       this.token = input;
       this.idToken = idToken;
@@ -56,6 +67,8 @@ export class Keycloak {
     if (this.refreshToken && !this._refreshTokenParsed) {
       this._refreshTokenParsed = jwtDecode(this.refreshToken) as TokenParsed;
     }
+    this._login = login;
+    this._logout = logout;
   }
 
   get tokenParsed() {
@@ -75,7 +88,7 @@ export class Keycloak {
 
   get clientId() {
     if (this.keycloakClient) return this.keycloakClient.clientId;
-    return this.tokenParsed?.azp;
+    return this.tokenParsed?.azp || this.config.clientId;
   }
 
   get email() {
@@ -86,7 +99,7 @@ export class Keycloak {
 
   get realm() {
     if (this.keycloakClient) return this.keycloakClient.realm;
-    return this.tokenParsed?.iss?.split('/').pop();
+    return this.tokenParsed?.iss?.split('/').pop() || this.config.realm;
   }
 
   get realmAccess() {
@@ -114,35 +127,56 @@ export class Keycloak {
     return this.tokenParsed?.preferred_username;
   }
 
+  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',
+      },
+    });
+    if (response.ok) return response.json();
+  }
+
   async login(options: KeycloakLoginOptions = {}) {
+    this.idToken = undefined;
+    this.refreshToken = undefined;
+    this.token = undefined;
     if (this.keycloakClient) {
       await this.keycloakClient.login(options);
+    } else {
+      await this._login?.(options);
     }
   }
 
   async logout(options: KeycloakLogoutOptions = {}) {
+    this.idToken = undefined;
+    this.refreshToken = undefined;
+    this.token = undefined;
     if (this.keycloakClient) {
       await this.keycloakClient.logout(options);
+    } else {
+      await this._logout?.(options);
     }
   }
 
-  async isAuthenticated() {
+  get authenticated() {
     if (this.mock) return true;
     if (this.keycloakClient) return !!this.keycloakClient.authenticated;
-    if (MultiPlatform.isNext) return !!(await getSession());
-    if (!this.tokenParsed?.exp) return false;
+    if (!this.tokenParsed?.exp || !this.idToken) return false;
     return this.tokenParsed.exp > Date.now() / 1000;
   }
 }
 
 export function useKeycloak() {
-  const { token, refreshToken, idToken } = useExpoKeycloak();
-  if (MultiPlatform.isServer) return;
+  const keycloak = useContext(KeycloakContext);
+  const keycloakConfig = useContext(KeycloakConfigContext);
+  if (keycloak) return keycloak;
   if (MultiPlatform.isStorybook) {
-    return new Keycloak({
+    return new Keycloak(keycloakConfig, {
       email: 'storybook@example.com',
       username: 'storybook',
     });
   }
-  if (token) return new Keycloak(token, idToken, refreshToken);
 }

package/src/keycloak/keycloak.ts

@@ -22,16 +22,25 @@
 import type KeycloakClient from 'keycloak-js';
 import type { AccessTokenParsed, TokenParsed } from '../token';
 import type { AuthOptions } from 'next-auth';
-import type { GetSessionParams } from 'next-auth/react';
-import type { KeycloakLoginOptions, KeycloakLogoutOptions } from 'keycloak-js';
+import type { AuthRequestPromptOptions } from 'expo-auth-session';
 import type { KeycloakMock } from '../types';
+import type { KeycloakProfile } from 'next-auth/providers/keycloak';
+import type { OAuthConfig } from 'next-auth/providers';
 import type { Session } from '../session/session';
+import { KeycloakConfigContext, type KeycloakConfig } from './config';
 import { KeycloakContext } from './context';
 import { MultiPlatform } from 'multiplatform.one';
 import { getSession, useSession } from '../session/session';
 import { jwtDecode } from 'jwt-decode';
 import { signIn, signOut } from 'next-auth/react';
 import { useContext } from 'react';
+import type {
+  KeycloakLoginOptions as KeycloakJsLoginOptions,
+  KeycloakLogoutOptions as KeycloakJsLogoutOptions,
+} from 'keycloak-js';
+
+export type KeycloakLoginOptions = KeycloakJsLoginOptions & AuthRequestPromptOptions & { redirect?: boolean };
+export type KeycloakLogoutOptions = KeycloakJsLogoutOptions;
 
 export class Keycloak {
   token?: string;
@@ -39,12 +48,21 @@ export class Keycloak {
   refreshToken?: string;
 
   private _idTokenParsed?: TokenParsed;
+  private _login?: (_options: KeycloakLoginOptions) => Promise<undefined>;
+  private _logout?: (_options: KeycloakLogoutOptions) => Promise<undefined>;
   private _refreshTokenParsed?: TokenParsed;
   private _tokenParsed?: AccessTokenParsed;
   private keycloakClient?: KeycloakClient;
   private mock: KeycloakMock | undefined;
 
-  constructor(input?: string | KeycloakClient | KeycloakMock | Session, idToken?: string, refreshToken?: string) {
+  constructor(
+    public readonly config: KeycloakConfig,
+    input?: string | KeycloakClient | KeycloakMock | Session,
+    idToken?: string,
+    refreshToken?: string,
+    login?: (_options: KeycloakLoginOptions) => Promise<undefined>,
+    logout?: (_options: KeycloakLogoutOptions) => Promise<undefined>,
+  ) {
     if (typeof input === 'string') {
       this.token = input;
       this.idToken = idToken;
@@ -66,6 +84,8 @@ export class Keycloak {
     if (this.refreshToken && !this._refreshTokenParsed) {
       this._refreshTokenParsed = jwtDecode(this.refreshToken) as TokenParsed;
     }
+    this._login = login;
+    this._logout = logout;
   }
 
   get tokenParsed() {
@@ -85,7 +105,7 @@ export class Keycloak {
 
   get clientId() {
     if (this.keycloakClient) return this.keycloakClient.clientId;
-    return this.tokenParsed?.azp;
+    return this.tokenParsed?.azp || this.config.clientId;
   }
 
   get email() {
@@ -96,7 +116,7 @@ export class Keycloak {
 
   get realm() {
     if (this.keycloakClient) return this.keycloakClient.realm;
-    return this.tokenParsed?.iss?.split('/').pop();
+    return this.tokenParsed?.iss?.split('/').pop() || this.config.realm;
   }
 
   get realmAccess() {
@@ -124,17 +144,38 @@ export class Keycloak {
     return this.tokenParsed?.preferred_username;
   }
 
+  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',
+      },
+    });
+    if (response.ok) return response.json();
+  }
+
   async login(options: KeycloakLoginOptions = {}) {
+    this.idToken = undefined;
+    this.refreshToken = undefined;
+    this.token = undefined;
     if (this.keycloakClient) {
       await this.keycloakClient.login(options);
     } else if (MultiPlatform.isNext && !MultiPlatform.isServer) {
       await signIn('keycloak', {
         callbackUrl: options.redirectUri,
+        redirect: options.redirect,
       });
+    } else {
+      await this._login?.(options);
     }
   }
 
   async logout(options: KeycloakLogoutOptions = {}) {
+    this.idToken = undefined;
+    this.refreshToken = undefined;
+    this.token = undefined;
     if (this.keycloakClient) {
       await this.keycloakClient.logout(options);
     } else if (MultiPlatform.isNext && !MultiPlatform.isServer) {
@@ -142,6 +183,8 @@ export class Keycloak {
       await signOut({
         callbackUrl: options.redirectUri,
       });
+    } else {
+      await this._logout?.(options);
     }
   }
 
@@ -155,22 +198,34 @@ export class Keycloak {
 
 export function useKeycloak() {
   const keycloak = useContext(KeycloakContext);
+  const keycloakConfig = useContext(KeycloakConfigContext);
   if (keycloak) return keycloak;
   const { session, status } = useSession();
   if (MultiPlatform.isStorybook) {
-    return new Keycloak({
+    return new Keycloak(keycloakConfig, {
       email: 'storybook@example.com',
       username: 'storybook',
     });
   } else if (status === 'unauthenticated') {
-    return new Keycloak();
+    return new Keycloak(keycloakConfig);
   } else if (status === 'authenticated' && session?.accessToken) {
-    return new Keycloak(session as Session);
+    return new Keycloak(keycloakConfig, session as Session);
   }
 }
 
-export async function getKeycloak(options?: AuthOptions | GetSessionParams, req?: any, res?: any) {
+export async function getKeycloak(options?: AuthOptions, req?: any, res?: any) {
+  const keycloakProvider: OAuthConfig<KeycloakProfile> | undefined = options?.providers.find(
+    (provider) => provider.id === 'keycloak',
+  )?.options;
+  const parts = keycloakProvider?.issuer?.split('/realms/');
+  const keycloakConfig: KeycloakConfig = {
+    realm: parts?.[1]?.split('/')[0] || '',
+    url: parts?.[0] || '',
+    clientId: keycloakProvider?.clientId || '',
+  };
   const session = await getSession(options, req, res);
-  if (session?.accessToken) return new Keycloak(session as Session);
-  return new Keycloak();
+  if (session?.accessToken) {
+    return new Keycloak(keycloakConfig, session as Session);
+  }
+  return new Keycloak(keycloakConfig);
 }

package/src/provider/AfterAuth.tsx

@@ -19,6 +19,8 @@
  * limitations under the License.
  */
 
+'use client';
+
 import React, { useEffect } from 'react';
 import type { PropsWithChildren } from 'react';
 import { useAuthConfig } from '../hooks';