@multiplatform.one/keycloak 1.0.36 → 2.0.1

package/src/provider/AuthProvider/AuthProvider.tsx

@@ -19,28 +19,31 @@
  * limitations under the License.
  */
 
-'use client';
+"use client";
 
-import KeycloakClient from 'keycloak-js';
-import React, { useEffect, useMemo, useState } from 'react';
-import type { KeycloakInitOptions } from 'keycloak-js';
-import type { KeycloakConfig } from '../../keycloak';
-import type { PropsWithChildren } from 'react';
-import type { SessionProviderProps } from 'next-auth/react';
-import { AfterAuth } from '../AfterAuth';
-import { Keycloak, KeycloakConfigContext } from '../../keycloak';
-import { KeycloakContext } from '../../keycloak/context';
-import { MultiPlatform } from 'multiplatform.one';
-import { SessionProvider } from 'next-auth/react';
-import { persist, useAuthState } from '../../state';
-import { useAuthConfig } from '../../hooks';
-import { useRouter } from 'next/router';
-import { validOrRefreshableToken } from '../../token';
+import KeycloakClient from "keycloak-js";
+import type { KeycloakInitOptions } from "keycloak-js";
+import { MultiPlatform } from "multiplatform.one";
+import type { SessionProviderProps } from "next-auth/react";
+import { SessionProvider } from "next-auth/react";
+import { useRouter } from "next/router";
+import type { PropsWithChildren } from "react";
+import { type ComponentType, useEffect, useMemo, useState } from "react";
+import { Text } from "tamagui";
+import { Loading } from "../../Loading";
+import { useAuthConfig } from "../../hooks";
+import type { KeycloakConfig } from "../../keycloak";
+import { Keycloak, KeycloakConfigContext } from "../../keycloak";
+import { KeycloakContext } from "../../keycloak/context";
+import { persist, useAuthStore } from "../../state";
+import { validOrRefreshableToken } from "../../token";
+import { AfterAuth } from "../AfterAuth";
 
 export interface AuthProviderProps extends PropsWithChildren {
   keycloakConfig: KeycloakConfig;
   keycloakInitOptions?: KeycloakInitOptions;
-  sessionProvider?: Omit<SessionProviderProps, 'children'>;
+  sessionProvider?: Omit<SessionProviderProps, "children">;
+  loadingComponent?: ComponentType;
 }
 
 const logger = console;
@@ -51,17 +54,27 @@ export interface Tokens<B = boolean> {
   token?: string | B;
 }
 
-export function AuthProvider({ children, sessionProvider, keycloakInitOptions, keycloakConfig }: AuthProviderProps) {
+export function AuthProvider({
+  children,
+  keycloakConfig,
+  keycloakInitOptions,
+  loadingComponent,
+  sessionProvider,
+}: AuthProviderProps) {
   const { debug, messageHandlerKeys } = useAuthConfig();
   const { query } = MultiPlatform.isNext ? useRouter() : { query: {} };
-  const authState = useAuthState();
+  const authStore = useAuthStore();
+  if (typeof authStore === "undefined") {
+    return <Loading loadingComponent={loadingComponent} />;
+  }
   const [keycloak, setKeycloak] = useState<Keycloak>();
   const initialRefreshToken = useMemo(
     () =>
       validOrRefreshableToken(
         MultiPlatform.isIframe
-          ? ('refreshToken' in query && (query.refreshToken?.toString() || true)) ||
-              (persist && authState.refreshToken) ||
+          ? ("refreshToken" in query &&
+              (query.refreshToken?.toString() || true)) ||
+              (persist && authStore.refreshToken) ||
               undefined
           : undefined,
       ),
@@ -71,58 +84,72 @@ export function AuthProvider({ children, sessionProvider, keycloakInitOptions, k
     refreshToken: initialRefreshToken,
     token: validOrRefreshableToken(
       MultiPlatform.isIframe
-        ? ('token' in query && (query.token?.toString() || true)) || (persist && authState.token) || undefined
+        ? ("token" in query && (query.token?.toString() || true)) ||
+            (persist && authStore.token) ||
+            undefined
         : undefined,
       initialRefreshToken,
     ),
     idToken: validOrRefreshableToken(
       MultiPlatform.isIframe
-        ? ('idToken' in query && (query.idToken?.toString() || true)) || (persist && authState.idToken) || undefined
+        ? ("idToken" in query && (query.idToken?.toString() || true)) ||
+            (persist && authStore.idToken) ||
+            undefined
         : undefined,
       initialRefreshToken,
     ),
   });
 
   useEffect(() => {
-    if (tokens.token !== true && tokens.refreshToken !== true && tokens.idToken !== true) return;
-    if (debug) logger.debug('post message', JSON.stringify({ type: 'LOADED' }));
+    if (
+      tokens.token !== true &&
+      tokens.refreshToken !== true &&
+      tokens.idToken !== true
+    )
+      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?.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 (tokens.refreshToken !== true) return;
     const messageCallback = (e: MessageEvent<any>) => {
       let data = e?.data || null;
-      if (typeof data === 'string') {
+      if (typeof data === "string") {
         try {
           data = JSON.parse(data);
         } catch (err) {}
       }
-      if (debug) logger.debug('received message', JSON.stringify(data));
+      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);
+      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);
       }
     };
     if (debug) {
       logger.debug(
-        'listening for message',
+        "listening for message",
         JSON.stringify({
-          type: 'REFRESH_TOKEN',
-          payload: '<some_refresh_token>',
+          type: "REFRESH_TOKEN",
+          payload: "<some_refresh_token>",
         }),
       );
     }
-    window.addEventListener('message', messageCallback);
+    window.addEventListener("message", messageCallback);
     return () => {
-      window.removeEventListener('message', messageCallback);
+      window.removeEventListener("message", messageCallback);
     };
   }, []);
 
@@ -130,32 +157,35 @@ export function AuthProvider({ children, sessionProvider, keycloakInitOptions, k
     if (tokens.token !== true) return;
     const messageCallback = (e: MessageEvent<any>) => {
       let data = e?.data || null;
-      if (typeof data === 'string') {
+      if (typeof data === "string") {
         try {
           data = JSON.parse(data);
         } catch (err) {}
       }
-      if (debug) logger.debug('received message', JSON.stringify(data));
+      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);
+      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);
       }
     };
     if (debug) {
       logger.debug(
-        'listening for message',
+        "listening for message",
         JSON.stringify({
-          type: 'TOKEN',
-          payload: '<some_token>',
+          type: "TOKEN",
+          payload: "<some_token>",
         }),
       );
     }
-    window.addEventListener('message', messageCallback);
+    window.addEventListener("message", messageCallback);
     return () => {
-      window.removeEventListener('message', messageCallback);
+      window.removeEventListener("message", messageCallback);
     };
   }, []);
 
@@ -163,85 +193,117 @@ export function AuthProvider({ children, sessionProvider, keycloakInitOptions, k
     if (tokens.idToken !== true) return;
     const messageCallback = (e: MessageEvent<any>) => {
       let data = e?.data || null;
-      if (typeof data === 'string') {
+      if (typeof data === "string") {
         try {
           data = JSON.parse(data);
         } catch (err) {}
       }
-      if (debug) logger.debug('received message', JSON.stringify(data));
+      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);
+      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);
       }
     };
     if (debug) {
       logger.debug(
-        'listening for message',
+        "listening for message",
         JSON.stringify({
-          type: 'ID_TOKEN',
-          payload: '<some_id_token>',
+          type: "ID_TOKEN",
+          payload: "<some_id_token>",
         }),
       );
     }
-    window.addEventListener('message', messageCallback);
+    window.addEventListener("message", messageCallback);
     return () => {
-      window.removeEventListener('message', messageCallback);
+      window.removeEventListener("message", messageCallback);
     };
   }, []);
 
   const keycloakClient = useMemo(
     () =>
-      (!MultiPlatform.isNext || MultiPlatform.isElectron || MultiPlatform.isIframe) && keycloakConfig
+      (!MultiPlatform.isNext ||
+        MultiPlatform.isElectron ||
+        MultiPlatform.isIframe) &&
+      keycloakConfig
         ? new KeycloakClient({
             url: keycloakConfig.url,
             realm: keycloakConfig.realm,
             clientId: keycloakConfig.publicClientId || keycloakConfig.clientId,
           })
         : undefined,
-    [keycloakInitOptions, keycloakConfig, tokens.token, tokens.refreshToken, tokens.idToken],
+    [
+      keycloakInitOptions,
+      keycloakConfig,
+      tokens.token,
+      tokens.refreshToken,
+      tokens.idToken,
+    ],
   );
 
   const initOptions = useMemo(() => {
-    if (MultiPlatform.isNext && !MultiPlatform.isElectron && !MultiPlatform.isIframe) return;
+    if (
+      MultiPlatform.isNext &&
+      !MultiPlatform.isElectron &&
+      !MultiPlatform.isIframe
+    )
+      return;
     const initOptions: KeycloakInitOptions = {
       ...defaultKeycloakInitOptions,
       ...keycloakInitOptions,
       scope: [
         ...new Set([
-          'email',
-          'openid',
-          'profile',
-          ...(defaultKeycloakInitOptions.scope?.split(' ') || []),
-          ...(keycloakInitOptions?.scope?.split(' ') || []),
+          "email",
+          "openid",
+          "profile",
+          ...(defaultKeycloakInitOptions.scope?.split(" ") || []),
+          ...(keycloakInitOptions?.scope?.split(" ") || []),
           ...(keycloakConfig.scopes || []),
         ]),
-      ].join(' '),
+      ].join(" "),
     };
     if (debug) initOptions.enableLogging = true;
-    if (tokens.token && typeof tokens.token === 'string') {
+    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')
+      if (tokens.idToken && typeof tokens.idToken === "string")
+        initOptions.idToken = tokens.idToken;
+      if (tokens.refreshToken && typeof tokens.refreshToken === "string")
         initOptions.refreshToken = tokens.refreshToken;
     }
-    if ((typeof window !== 'undefined' && window.self !== window.top) || (tokens.token && !tokens.refreshToken)) {
+    if (
+      (typeof window !== "undefined" && window.self !== window.top) ||
+      (tokens.token && !tokens.refreshToken)
+    ) {
       initOptions.checkLoginIframe = false;
-      initOptions.flow = 'implicit';
+      initOptions.flow = "implicit";
       initOptions.onLoad = undefined;
     }
     return initOptions;
-  }, [keycloakInitOptions, keycloakConfig.scopes, tokens.token, tokens.idToken, tokens.refreshToken]);
+  }, [
+    keycloakInitOptions,
+    keycloakConfig.scopes,
+    tokens.token,
+    tokens.idToken,
+    tokens.refreshToken,
+  ]);
 
   useEffect(() => {
     function onError() {
-      if (keycloakClient && initOptions) setKeycloak(new Keycloak(keycloakConfig, keycloakClient));
+      if (keycloakClient && initOptions)
+        setKeycloak(new Keycloak(keycloakConfig, keycloakClient));
     }
     function onUpdate() {
-      if (keycloakClient && initOptions) setKeycloak(new Keycloak(keycloakConfig, keycloakClient));
+      if (keycloakClient && initOptions)
+        setKeycloak(new Keycloak(keycloakConfig, keycloakClient));
     }
     if (keycloakClient && initOptions) {
       (async () => {
@@ -268,7 +330,7 @@ export function AuthProvider({ children, sessionProvider, keycloakInitOptions, k
     return (
       <KeycloakConfigContext.Provider value={keycloakConfig}>
         <KeycloakContext.Provider value={keycloak}>
-          <AfterAuth>{children}</AfterAuth>
+          <AfterAuth loadingComponent={loadingComponent}>{children}</AfterAuth>
         </KeycloakContext.Provider>
       </KeycloakConfigContext.Provider>
     );
@@ -284,8 +346,8 @@ const defaultKeycloakInitOptions: KeycloakInitOptions = {
   checkLoginIframe: true,
   checkLoginIframeInterval: 5,
   enableLogging: false,
-  onLoad: 'check-sso',
-  pkceMethod: 'S256',
+  onLoad: "check-sso",
+  pkceMethod: "S256",
 };
 
 export interface MessageSchema {

package/src/provider/AuthProvider/index.ts

@@ -19,4 +19,4 @@
  * limitations under the License.
  */
 
-export * from './AuthProvider';
+export * from "./AuthProvider";

package/src/provider/KeycloakProvider.tsx

@@ -19,12 +19,12 @@
  * 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 { Session } from "next-auth";
+import React, { useMemo } from "react";
+import type { PropsWithChildren } from "react";
+import type { AuthConfig } from "../authConfig";
+import { AuthConfigContext } from "../authConfig";
+import { AuthProvider } from "./AuthProvider";
 
 export interface KeycloakProviderProps extends PropsWithChildren, AuthConfig {
   baseUrl?: string;
@@ -45,7 +45,10 @@ export function KeycloakProvider({
   realm,
   session,
 }: KeycloakProviderProps) {
-  const authConfig = useMemo(() => ({ debug, disabled, loginRedirectUri }), [debug, disabled, loginRedirectUri]);
+  const authConfig = useMemo(
+    () => ({ debug, disabled, loginRedirectUri }),
+    [debug, disabled, loginRedirectUri],
+  );
   return (
     <AuthConfigContext.Provider value={authConfig}>
       {disabled ? (
@@ -54,9 +57,9 @@ export function KeycloakProvider({
         <AuthProvider
           sessionProvider={{ session }}
           keycloakConfig={{
-            clientId: clientId || 'app',
+            clientId: clientId || "app",
             publicClientId,
-            realm: realm || 'main',
+            realm: realm || "main",
             url: baseUrl,
           }}
         >

package/src/provider/index.ts

@@ -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/routes.ts

@@ -19,20 +19,22 @@
  * limitations under the License.
  */
 
-import type { AccessTokenParsed } from './token';
-import type { AuthOptions, CallbacksOptions } from 'next-auth';
-import type { JWT } from 'next-auth/jwt';
-import type { OAuthUserConfig } from 'next-auth/providers';
-import type { Session } from './session';
-import { getServerSession } from 'next-auth';
-import { jwtDecode } from 'jwt-decode';
+import { jwtDecode } from "jwt-decode";
+import type { AuthOptions, CallbacksOptions } from "next-auth";
+import { getServerSession } from "next-auth";
+import type { JWT } from "next-auth/jwt";
+import type { OAuthUserConfig } from "next-auth/providers";
+import type { Session } from "./session";
+import type { AccessTokenParsed } from "./token";
 
-const NextAuth = require('next-auth').default as typeof import('next-auth').default;
-const NextResponse = require('next/server').NextResponse as typeof import('next/server').NextResponse;
+const NextAuth = require("next-auth")
+  .default as typeof import("next-auth").default;
+const NextResponse = require("next/server")
+  .NextResponse as typeof import("next/server").NextResponse;
 const logger = console;
 let _nextAuth: AuthOptions | undefined;
-const KeycloakProvider = require('next-auth/providers/keycloak')
-  .default as typeof import('next-auth/providers/keycloak').default;
+const KeycloakProvider = require("next-auth/providers/keycloak")
+  .default as typeof import("next-auth/providers/keycloak").default;
 
 export function createAuthHandler(options: AuthHandlerOptions) {
   return NextAuth(createNextAuthOptions(options));
@@ -40,15 +42,17 @@ export function createAuthHandler(options: AuthHandlerOptions) {
 
 const defaults = {
   keycloak: {
-    baseUrl: 'http://localhost:8080',
-    realm: 'master',
+    baseUrl: "http://localhost:8080",
+    realm: "master",
   },
 };
 
 export function createLogoutHandler(options: AuthHandlerOptions) {
   return {
     async GET() {
-      const idToken = ((await getServerSession(createNextAuthOptions(options))) as Session)?.idToken;
+      const idToken = (
+        (await getServerSession(createNextAuthOptions(options))) as Session
+      )?.idToken;
       if (idToken) {
         try {
           await fetch(
@@ -57,7 +61,7 @@ export function createLogoutHandler(options: AuthHandlerOptions) {
             }/protocol/openid-connect/logout?id_token_hint=${idToken}&post_logout_redirect_uri=${encodeURIComponent(
               options.baseUrl,
             )}`,
-            { method: 'GET' },
+            { method: "GET" },
           );
         } catch (err) {
           logger.error(err);
@@ -72,7 +76,8 @@ export function createLogoutHandler(options: AuthHandlerOptions) {
 export function createNextAuthOptions(options: AuthHandlerOptions) {
   if (_nextAuth) return _nextAuth;
   const authorization =
-    options.keycloak.authorization && typeof options.keycloak.authorization === 'object'
+    options.keycloak.authorization &&
+    typeof options.keycloak.authorization === "object"
       ? options.keycloak.authorization
       : {};
   _nextAuth = {
@@ -85,13 +90,13 @@ export function createNextAuthOptions(options: AuthHandlerOptions) {
           params: {
             scope: [
               ...new Set([
-                'email',
-                'openid',
-                'profile',
-                ...(authorization.params?.scope?.split(' ') || []),
+                "email",
+                "openid",
+                "profile",
+                ...(authorization.params?.scope?.split(" ") || []),
                 ...(options.scopes || []),
               ]),
-            ].join(' '),
+            ].join(" "),
           },
         },
         ...options.keycloak,
@@ -101,12 +106,14 @@ export function createNextAuthOptions(options: AuthHandlerOptions) {
     callbacks: {
       ...options.nextAuth?.callbacks,
       async jwt(params) {
-        if (typeof options.nextAuth?.callbacks?.jwt === 'function') {
+        if (typeof options.nextAuth?.callbacks?.jwt === "function") {
           return options.nextAuth?.callbacks.jwt(params);
         }
         const { token, account } = params;
         if (account) {
-          const decoded = jwtDecode(account.access_token || '') as AccessTokenParsed;
+          const decoded = jwtDecode(
+            account.access_token || "",
+          ) as AccessTokenParsed;
           token.decoded = decoded;
           token.accessToken = account.access_token;
           token.idToken = account.id_token;
@@ -114,18 +121,18 @@ export function createNextAuthOptions(options: AuthHandlerOptions) {
           token.refreshToken = account.refresh_token;
           token.roles = decoded.realm_access?.roles;
           return token;
-        } else if (Math.floor(Date.now() / 1000) < Number(token.expiresAt)) {
+        }
+        if (Math.floor(Date.now() / 1000) < Number(token.expiresAt)) {
           return token;
-        } else {
-          try {
-            return refreshAccessToken(options, token as NextToken);
-          } catch (err) {
-            return { ...token, err };
-          }
+        }
+        try {
+          return refreshAccessToken(options, token as NextToken);
+        } catch (err) {
+          return { ...token, err };
         }
       },
       async session(params) {
-        if (typeof options.nextAuth?.callbacks?.session === 'function') {
+        if (typeof options.nextAuth?.callbacks?.session === "function") {
           return options.nextAuth.callbacks.session(params);
         }
         const { session: nextSession, token: nextToken } = params;
@@ -165,20 +172,23 @@ export interface NextToken extends JWT {
   roles: string[];
 }
 
-async function refreshAccessToken(options: AuthHandlerOptions, nextToken: NextToken) {
+async function refreshAccessToken(
+  options: AuthHandlerOptions,
+  nextToken: NextToken,
+) {
   const res = await fetch(
     `${options.keycloak?.baseUrl || defaults.keycloak.baseUrl}/realms/${
       options.keycloak?.realm || defaults.keycloak.realm
     }/protocol/openid-connect/token`,
     {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
+        "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams({
         client_id: options.keycloak.clientId,
         client_secret: options.keycloak.clientSecret,
-        grant_type: 'refresh_token',
+        grant_type: "refresh_token",
         refresh_token: nextToken.refreshToken,
       }),
     },

package/src/session/index.ts

@@ -19,4 +19,4 @@
  * limitations under the License.
  */
 
-export * from './session';
+export * from "./session";

package/src/session/session.native.ts

@@ -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 "./session";
 
 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 {};
 }