feat: auto refresh token after code exchange

Author: DanielRivers

lib/utils/base64UrlEncode.ts

@@ -7,17 +7,16 @@ export const base64UrlEncode = (str: string | ArrayBuffer): string => {
   if (str instanceof ArrayBuffer) {
     const numberArray = Array.from<number>(new Uint8Array(str));
     return btoa(String.fromCharCode.apply(null, numberArray))
-      .replace(/\+/g, '-')
-      .replace(/\//g, '_')
-      .replace(/=+$/, '');
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_")
+      .replace(/=+$/, "");
   }
-  
+
   const encoder = new TextEncoder();
   const uintArray = encoder.encode(str);
   const charArray = Array.from(uintArray);
   return btoa(String.fromCharCode.apply(null, charArray))
     .replace(/\+/g, "-")
     .replace(/\//g, "_")
     .replace(/=+$/, "");
-
 };

lib/utils/exchangeAuthCode.ts

@@ -1,4 +1,10 @@
-import { getActiveStorage, getInsecureStorage, StorageKeys } from "../main";
+import {
+  getActiveStorage,
+  getInsecureStorage,
+  refreshToken,
+  StorageKeys,
+} from "../main";
+import { clearRefreshTimer, setRefreshTimer } from "./refreshTimer";
 
 export const frameworkSettings: {
   framework: string;
@@ -13,6 +19,7 @@ interface ExchangeAuthCodeParams {
   domain: string;
   clientId: string;
   redirectURL: string;
+  autoReferesh?: boolean;
 }
 
 interface ExchangeAuthCodeResult {
@@ -28,6 +35,7 @@ export const exchangeAuthCode = async ({
   domain,
   clientId,
   redirectURL,
+  autoReferesh = false,
 }: ExchangeAuthCodeParams): Promise<ExchangeAuthCodeResult> => {
   const state = urlParams.get("state");
   const code = urlParams.get("code");
@@ -69,15 +77,16 @@ export const exchangeAuthCode = async ({
     StorageKeys.codeVerifier,
   )) as string;
 
+
   const headers: {
     "Content-type": string;
-    // "Cache-Control": string;
-    // Pragma: string;
+    "Cache-Control": string;
+    Pragma: string;
     "Kinde-SDK"?: string;
   } = {
     "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
-    // "Cache-Control": "no-store",
-    // Pragma: "no-cache",
+    "Cache-Control": "no-store",
+    Pragma: "no-cache",
   };
 
   if (frameworkSettings.framework) {
@@ -106,11 +115,13 @@ export const exchangeAuthCode = async ({
       error: `Token exchange failed: ${response.status} - ${errorText}`,
     };
   }
+  clearRefreshTimer()
 
   const data: {
     access_token: string;
     id_token: string;
     refresh_token: string;
+    expires_in: number;
   } = await response.json();
 
   const secureStore = getActiveStorage();
@@ -120,7 +131,17 @@ export const exchangeAuthCode = async ({
     [StorageKeys.refreshToken]: data.refresh_token,
   });
 
-  await activeStorage.removeItems(StorageKeys.state, StorageKeys.nonce, StorageKeys.codeVerifier);
+  if (autoReferesh) {
+    setRefreshTimer(data.expires_in * 1000, async () => {
+      refreshToken(domain, clientId);
+    });
+  }
+
+  await activeStorage.removeItems(
+    StorageKeys.state,
+    StorageKeys.nonce,
+    StorageKeys.codeVerifier,
+  );
 
   // Clear all url params
   const cleanUrl = (url: URL): URL => {

lib/utils/generateAuthUrl.ts

@@ -13,7 +13,12 @@ export const generateAuthUrl = async (
   domain: string,
   type: IssuerRouteTypes = IssuerRouteTypes.login,
   options: LoginOptions,
-): Promise<{ url: URL; state: string; nonce: string; codeChallenge: string }> => {
+): Promise<{
+  url: URL;
+  state: string;
+  nonce: string;
+  codeChallenge: string;
+}> => {
   const authUrl = new URL(`${domain}/oauth2/auth`);
   const activeStorage = getInsecureStorage();
   const searchParams: Record<string, string> = {

lib/utils/refreshTimer.ts

@@ -0,0 +1,12 @@
+export let refreshTimer: number | undefined;
+
+export function setRefreshTimer(timer: number, callback: () => void) {
+  window.setTimeout(callback, timer);
+}
+
+export function clearRefreshTimer() {
+  if (refreshTimer !== undefined) {
+    window.clearTimeout(refreshTimer);
+    refreshTimer = undefined;
+  }
+}

lib/utils/token/refreshToken.ts

@@ -1,6 +1,7 @@
 import { getActiveStorage } from ".";
 import { StorageKeys } from "../../sessionManager";
 import { sanitizeUrl } from "..";
+import { clearRefreshTimer, setRefreshTimer } from "../refreshTimer";
 
 /**
  * refreshes the token
@@ -28,23 +29,25 @@ export const refreshToken = async (
       return false;
     }
 
-    const refreshTokenValue = await storage.getSessionItem(
+    const refreshTokenValue = (await storage.getSessionItem(
       StorageKeys.refreshToken,
-    ) as string;
-
+    )) as string;
 
     if (!refreshTokenValue) {
       console.error("No refresh token found");
       return false;
     }
 
+    clearRefreshTimer();
+
     const response = await fetch(`${sanitizeUrl(domain)}/oauth2/token`, {
       method: "POST",
       headers: {
-        "Content-Type": "multipart/form-data",
-        "Kinde-SDK": "js-utils",
+        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
+        "Cache-Control": "no-store",
+        Pragma: "no-cache",
       },
-      body: JSON.stringify({
+      body:  new URLSearchParams({
         refresh_token: refreshTokenValue,
         grant_type: "refresh_token",
         client_id: clientId,
@@ -59,6 +62,9 @@ export const refreshToken = async (
     const data = await response.json();
 
     if (data.access_token) {
+      setRefreshTimer(data.expires_in * 1000, async () => {
+        refreshToken(domain, clientId);
+      });
       await storage.setSessionItem(StorageKeys.accessToken, data.access_token);
       if (data.id_token) {
         await storage.setSessionItem(StorageKeys.idToken, data.id_token);