Build package using esm over cjs (#87)

* Build using esm over cjs to fix nextjs usage

* Only trigger callback/reload if error matches 'Failed to fetch'

package.json

@@ -3,9 +3,9 @@
   "version": "0.10.1",
   "description": "Authentication and session helpers for using WorkOS & AuthKit with Next.js",
   "sideEffects": false,
-  "type": "commonjs",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/cjs/index.d.ts",
+  "type": "module",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
   "files": [
     "dist",
     "src",
@@ -15,7 +15,7 @@
   "scripts": {
     "clean": "rm -rf dist",
     "prebuild": "npm run clean",
-    "build": "tsc --project tsconfig-cjs.json",
+    "build": "tsc --project tsconfig.json",
     "prepublishOnly": "npm run lint",
     "lint": "eslint \"src/**/*.ts*\"",
     "test": "echo \"Error: no test specified\" && exit 1"

src/auth.ts

@@ -1,3 +1,5 @@
+'use server';
+
 import { getAuthorizationUrl } from './get-authorization-url.js';
 import { cookies } from 'next/headers';
 import { cookieName } from './cookie.js';

src/provider.tsx → src/authkit-provider.tsx

@@ -12,7 +12,7 @@ interface AuthKitProviderProps {
   onSessionExpired?: false | (() => void);
 }
 
-export const AuthKitProvider = ({ children, onSessionExpired = false }: AuthKitProviderProps) => {
+export const AuthKitProvider = ({ children, onSessionExpired }: AuthKitProviderProps) => {
   React.useEffect(() => {
     // Return early if the session expired checks are disabled.
     if (onSessionExpired === false) {
@@ -38,10 +38,14 @@ export const AuthKitProvider = ({ children, onSessionExpired = false }: AuthKitP
             throw new Error('Session expired');
           }
         } catch (error) {
-          if (onSessionExpired) {
-            onSessionExpired();
-          } else {
-            window.location.reload();
+          // 'Failed to fetch' is the error we are looking for if the action fails
+          // If any other error happens, for other reasons, we should not reload the page
+          if (error instanceof Error && error.message.includes('Failed to fetch')) {
+            if (onSessionExpired) {
+              onSessionExpired();
+            } else {
+              window.location.reload();
+            }
           }
         } finally {
           visibilityChangedCalled = false;

src/index.ts

@@ -3,7 +3,7 @@ import { authkitMiddleware } from './middleware.js';
 import { getUser, refreshSession, getSession } from './session.js';
 import { getSignInUrl, getSignUpUrl, signOut } from './auth.js';
 import { Impersonation } from './impersonation.js';
-import { AuthKitProvider } from './provider.js';
+import { AuthKitProvider } from './authkit-provider.js';
 
 export {
   handleAuth,

src/session.ts

@@ -1,3 +1,5 @@
+'use server';
+
 import { redirect } from 'next/navigation';
 import { cookies, headers } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';

tsconfig-base.json → tsconfig.json

@@ -3,16 +3,16 @@
     "target": "ES2018",
     "lib": ["DOM", "ESNext", "DOM.Iterable"],
     "jsx": "react",
-    "module": "ES2020",
-    "moduleResolution": "Node",
     "sourceMap": true,
     "declaration": true,
-    "outDir": "./dist",
     "importHelpers": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "alwaysStrict": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "outDir": "./dist/esm",
+    "module": "ES2020",
+    "moduleResolution": "Node"
   }
 }