Merge pull request #178 from kinde-oss/feat/store-injection

Feat/store injection

Author: DanielRivers

src/state/KindeProvider.tsx

@@ -28,6 +28,7 @@ import {
   Role,
   GeneratePortalUrlParams,
   navigateToKinde,
+  setActiveStorage,
 } from "@kinde/js-utils";
 import * as storeState from "./store";
 import React, {
@@ -41,7 +42,11 @@ import { KindeContext, KindeContextProps } from "./KindeContext";
 import { getRedirectUrl } from "../utils/getRedirectUrl";
 import packageJson from "../../package.json";
 import { ErrorProps, LogoutOptions, PopupOptions } from "./types";
-import type { RefreshTokenResult } from "@kinde/js-utils";
+import type {
+  RefreshTokenResult,
+  Scopes,
+  SessionManager,
+} from "@kinde/js-utils";
 // TODO: need to look for old token store and convert.
 storageSettings.keyPrefix = "";
 
@@ -104,6 +109,7 @@ type KindeProviderProps = {
    * This is the options for the popup window.
    */
   popupOptions?: PopupOptions;
+  store?: SessionManager;
 };
 
 const defaultCallbacks: KindeCallbacks = {
@@ -138,9 +144,14 @@ export const KindeProvider = ({
   logoutUri,
   forceChildrenRender = false,
   popupOptions = {},
+  store = storeState.memoryStorage,
 }: KindeProviderProps) => {
   const mergedCallbacks = { ...defaultCallbacks, ...callbacks };
 
+  useEffect(() => {  
+    setActiveStorage(store);  
+  }, [store]);  
+
   frameworkSettings.framework = "react";
   frameworkSettings.frameworkVersion = React.version;
   frameworkSettings.sdkVersion = packageJson.version;
@@ -154,17 +165,6 @@ export const KindeProvider = ({
   });
   const initRef = useRef(false);
 
-  useEffect(() => {
-    storeState.memoryStorage.setItems({
-      [storeState.LocalKeys.domain]: domain,
-      [storeState.LocalKeys.clientId]: clientId,
-      [storeState.LocalKeys.audience]: audience,
-      [storeState.LocalKeys.redirectUri]: redirectUri,
-      [storeState.LocalKeys.logoutUri]: logoutUri,
-    });
-    return;
-  }, [audience, scope, clientId, domain, redirectUri, logoutUri]);
-
   const login = useCallback(
     async (
       options: LoginMethodParams & { state?: Record<string, string> } = {},
@@ -178,6 +178,7 @@ export const KindeProvider = ({
         clientId,
         ...options,
         supportsReauth: true,
+        scope: scope?.split(" ") as Scopes[],
         state: base64UrlEncode(
           JSON.stringify({
             kinde: { event: AuthEvent.login },
@@ -187,10 +188,6 @@ export const KindeProvider = ({
         redirectURL: getRedirectUrl(options.redirectURL || redirectUri),
       };
 
-      const domain = (await storeState.memoryStorage.getSessionItem(
-        storeState.LocalKeys.domain,
-      )) as string;
-
       const authUrl = await generateAuthUrl(
         domain,
         IssuerRouteTypes.login,
@@ -214,7 +211,7 @@ export const KindeProvider = ({
         );
       }
     },
-    [audience, clientId, redirectUri, popupOptions, mergedCallbacks],
+    [audience, clientId, redirectUri, popupOptions, mergedCallbacks, domain, scope],
   );
 
   const register = useCallback(
@@ -234,21 +231,13 @@ export const KindeProvider = ({
           }),
         ),
         supportsReauth: true,
-        audience: (await storeState.memoryStorage.getSessionItem(
-          storeState.LocalKeys.audience,
-        )) as string,
-        clientId: (await storeState.memoryStorage.getSessionItem(
-          storeState.LocalKeys.clientId,
-        )) as string,
+        audience,
+        clientId,
         redirectURL: getRedirectUrl(options?.redirectURL || redirectUri),
         prompt: PromptTypes.create,
       };
 
       try {
-        const domain = (await storeState.memoryStorage.getSessionItem(
-          storeState.LocalKeys.domain,
-        )) as string;
-
         const authUrl = await generateAuthUrl(
           domain,
           IssuerRouteTypes.register,
@@ -282,75 +271,74 @@ export const KindeProvider = ({
         );
       }
     },
-    [redirectUri, popupOptions, mergedCallbacks],
+    [redirectUri, popupOptions, mergedCallbacks, audience, clientId, domain],
   );
 
-  const logout = useCallback(async (options?: string | LogoutOptions) => {
-    try {
-      const domain = (await storeState.memoryStorage.getSessionItem(
-        storeState.LocalKeys.domain,
-      )) as string;
-
-      const params = new URLSearchParams();
-
-      if (options) {
-        if (options && typeof options === "string") {
-          params.append("redirect", options);
-        } else if (typeof options === "object") {
-          if (options.redirectUrl || logoutUri) {
-            params.append("redirect", options.redirectUrl || logoutUri || "");
-          }
-          if (options.allSessions) {
-            params.append("all_sessions", String(options.allSessions));
+  const logout = useCallback(
+    async (options?: string | LogoutOptions) => {
+      try {
+        const params = new URLSearchParams();
+
+        if (options) {
+          if (options && typeof options === "string") {
+            params.append("redirect", options);
+          } else if (typeof options === "object") {
+            if (options.redirectUrl || logoutUri) {
+              params.append("redirect", options.redirectUrl || logoutUri || "");
+            }
+            if (options.allSessions) {
+              params.append("all_sessions", String(options.allSessions));
+            }
           }
+        } else {
+          params.append("redirect", logoutUri || "");
         }
-      } else {
-        params.append("redirect", logoutUri || "");
-      }
 
-      setState((val) => {
-        return { ...val, user: undefined, isAuthenticated: false };
-      });
+        await Promise.all([
+          store.removeSessionItem(StorageKeys.idToken),
+          store.removeSessionItem(StorageKeys.accessToken),
+          store.removeSessionItem(StorageKeys.refreshToken),
+          storeState.localStorage.removeSessionItem(StorageKeys.refreshToken),
+        ]);
 
-      await Promise.all([
-        storeState.memoryStorage.removeSessionItem(StorageKeys.idToken),
-        storeState.memoryStorage.removeSessionItem(StorageKeys.accessToken),
-        storeState.memoryStorage.removeSessionItem(StorageKeys.refreshToken),
-        storeState.localStorage.removeSessionItem(StorageKeys.refreshToken),
-      ]);
+        setState((val) => {
+          return { ...val, user: undefined, isAuthenticated: false };
+        });
 
-      await storeState.localStorage.setSessionItem(
-        storeState.LocalKeys.performingLogout,
-        "true",
-      );
+        await storeState.localStorage.setSessionItem(
+          storeState.LocalKeys.performingLogout,
+          "true",
+        );
 
-      try {
-        await navigateToKinde({
-          url: `${domain}/logout?${params.toString()}`,
-          popupOptions,
-        });
+        try {
+          await navigateToKinde({
+            url: `${domain}/logout?${params.toString()}`,
+            popupOptions,
+          });
+        } catch (error) {
+          mergedCallbacks.onError?.(
+            {
+              error: "ERR_POPUP",
+              errorDescription: (error as Error).message,
+            },
+            {},
+            {} as KindeContextProps,
+          );
+        }
       } catch (error) {
+        console.error("Logout error:", error);
         mergedCallbacks.onError?.(
           {
-            error: "ERR_POPUP",
-            errorDescription: (error as Error).message,
+            error: "ERR_LOGOUT",
+            errorDescription: String(error),
           },
           {},
-          {} as KindeContextProps,
+          contextValue,
         );
       }
-    } catch (error) {
-      console.error("Logout error:", error);
-      mergedCallbacks.onError?.(
-        {
-          error: "ERR_LOGOUT",
-          errorDescription: String(error),
-        },
-        {},
-        contextValue,
-      );
-    }
-  }, []);
+    },
+    [store, popupOptions, mergedCallbacks, logoutUri, domain],
+  );
 
   const contextValue = useMemo((): KindeContextProps => {
     return {
@@ -553,13 +541,13 @@ export const KindeProvider = ({
   const init = useCallback(async () => {
     if (initRef.current) return;
     try {
-      try {  
-        await checkAuth({ domain, clientId });  
-      } catch (err) {  
-        console.warn("checkAuth failed:", err);  
-        setState((v: ProviderState) => ({ ...v, isLoading: false }));  
-      }  
-      initRef.current = true;  
+      try {
+        await checkAuth({ domain, clientId });
+      } catch (err) {
+        console.warn("checkAuth failed:", err);
+        setState((v: ProviderState) => ({ ...v, isLoading: false }));
+      }
+      initRef.current = true;
       const params = new URLSearchParams(window.location.search);
 
       if (params.has("error")) {

src/state/store.ts

@@ -6,19 +6,12 @@ import {
 } from "@kinde/js-utils";
 
 enum LocalKeys {
-  domain = "domain",
-  clientId = "client_id",
-  audience = "audience",
-  redirectUri = "redirect_uri",
-  logoutUri = "logout_uri",
   performingLogout = "performing_logout",
 }
 
-const memoryStorage = new MemoryStorage<LocalKeys>();
+const memoryStorage = new MemoryStorage();
 const localStorage = new LocalStorage<LocalKeys>();
 
-// TODO: Resolve type issue
-//@ts-expect-error valid assignment
 setActiveStorage(memoryStorage);
 //@ts-expect-error valid assignment
 setInsecureStorage(localStorage);