@workos-inc/authkit-nextjs 0.17.2 → 1.0.1

package/src/components/authkit-provider.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import { checkSessionAction, getAuthAction, refreshAuthAction } from '../actions.js';
+import type { Impersonator, User } from '@workos-inc/node';
+
+type AuthContextType = {
+  user: User | null;
+  sessionId: string | undefined;
+  organizationId: string | undefined;
+  role: string | undefined;
+  permissions: string[] | undefined;
+  entitlements: string[] | undefined;
+  impersonator: Impersonator | undefined;
+  accessToken: string | undefined;
+  loading: boolean;
+  getAuth: (options?: { ensureSignedIn?: boolean }) => Promise<void>;
+  refreshAuth: (options?: { ensureSignedIn?: boolean; organizationId?: string }) => Promise<void | { error: string }>;
+};
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+interface AuthKitProviderProps {
+  children: ReactNode;
+  /**
+   * Customize what happens when a session is expired. By default,the entire page will be reloaded.
+   * You can also pass this as `false` to disable the expired session checks.
+   */
+  onSessionExpired?: false | (() => void);
+}
+
+export const AuthKitProvider = ({ children, onSessionExpired }: AuthKitProviderProps) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [sessionId, setSessionId] = useState<string | undefined>(undefined);
+  const [organizationId, setOrganizationId] = useState<string | undefined>(undefined);
+  const [role, setRole] = useState<string | undefined>(undefined);
+  const [permissions, setPermissions] = useState<string[] | undefined>(undefined);
+  const [entitlements, setEntitlements] = useState<string[] | undefined>(undefined);
+  const [impersonator, setImpersonator] = useState<Impersonator | undefined>(undefined);
+  const [accessToken, setAccessToken] = useState<string | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
+
+  const getAuth = async ({ ensureSignedIn = false }: { ensureSignedIn?: boolean } = {}) => {
+    try {
+      const auth = await getAuthAction(ensureSignedIn);
+      setUser(auth.user);
+      setSessionId(auth.sessionId);
+      setOrganizationId(auth.organizationId);
+      setRole(auth.role);
+      setPermissions(auth.permissions);
+      setEntitlements(auth.entitlements);
+      setImpersonator(auth.impersonator);
+      setAccessToken(auth.accessToken);
+    } catch (error) {
+      setUser(null);
+      setSessionId(undefined);
+      setOrganizationId(undefined);
+      setRole(undefined);
+      setPermissions(undefined);
+      setEntitlements(undefined);
+      setImpersonator(undefined);
+      setAccessToken(undefined);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const refreshAuth = async ({
+    ensureSignedIn = false,
+    organizationId,
+  }: { ensureSignedIn?: boolean; organizationId?: string } = {}) => {
+    try {
+      setLoading(true);
+      const auth = await refreshAuthAction({ ensureSignedIn, organizationId });
+
+      setUser(auth.user);
+      setSessionId(auth.sessionId);
+      setOrganizationId(auth.organizationId);
+      setRole(auth.role);
+      setPermissions(auth.permissions);
+      setEntitlements(auth.entitlements);
+      setImpersonator(auth.impersonator);
+      setAccessToken(auth.accessToken);
+    } catch (error) {
+      return error instanceof Error ? { error: error.message } : { error: String(error) };
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getAuth();
+
+    // Return early if the session expired checks are disabled.
+    if (onSessionExpired === false) {
+      return;
+    }
+
+    let visibilityChangedCalled = false;
+
+    const handleVisibilityChange = async () => {
+      if (visibilityChangedCalled) {
+        return;
+      }
+
+      // In the case where we're using middleware auth mode, a user that has signed out in a different tab
+      // will run into an issue if they attempt to hit a server action in the original tab.
+      // This will force a refresh of the page in that case, which will redirect them to the sign-in page.
+      if (document.visibilityState === 'visible') {
+        visibilityChangedCalled = true;
+
+        try {
+          const hasSession = await checkSessionAction();
+          if (!hasSession) {
+            throw new Error('Session expired');
+          }
+        } catch (error) {
+          // '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;
+        }
+      }
+    };
+
+    window.addEventListener('visibilitychange', handleVisibilityChange);
+    window.addEventListener('focus', handleVisibilityChange);
+
+    return () => {
+      window.removeEventListener('focus', handleVisibilityChange);
+      window.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [onSessionExpired]);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        sessionId,
+        organizationId,
+        role,
+        permissions,
+        entitlements,
+        impersonator,
+        accessToken,
+        loading,
+        getAuth,
+        refreshAuth,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthKitProvider');
+  }
+  return context;
+}

package/src/{impersonation.tsx → components/impersonation.tsx}

@@ -1,20 +1,27 @@
+'use client';
+
 import * as React from 'react';
-import { withAuth } from './session.js';
-import { workos } from './workos.js';
 import { Button } from './button.js';
 import { MinMaxButton } from './min-max-button.js';
-import { handleSignOutAction } from './actions.js';
+import { getOrganizationAction, handleSignOutAction } from '../actions.js';
+import type { Organization } from '@workos-inc/node';
+import { useAuth } from './authkit-provider.js';
 
 interface ImpersonationProps extends React.ComponentPropsWithoutRef<'div'> {
   side?: 'top' | 'bottom';
 }
 
-export async function Impersonation({ side = 'bottom', ...props }: ImpersonationProps) {
-  const { impersonator, user, organizationId } = await withAuth();
+export function Impersonation({ side = 'bottom', ...props }: ImpersonationProps) {
+  const { user, impersonator, organizationId, loading } = useAuth();
+
+  const [organization, setOrganization] = React.useState<Organization | null>(null);
 
-  if (!impersonator) return null;
+  React.useEffect(() => {
+    if (!organizationId) return;
+    getOrganizationAction(organizationId).then(setOrganization);
+  }, [organizationId]);
 
-  const organization = organizationId ? await workos.organizations.getOrganization(organizationId) : null;
+  if (loading || !impersonator || !user) return null;
 
   return (
     <div

package/src/components/index.ts

@@ -0,0 +1,4 @@
+import { Impersonation } from './impersonation.js';
+import { AuthKitProvider, useAuth } from './authkit-provider.js';
+
+export { Impersonation, AuthKitProvider, useAuth };

package/src/cookie.ts

@@ -1,18 +1,39 @@
 import { WORKOS_REDIRECT_URI, WORKOS_COOKIE_MAX_AGE, WORKOS_COOKIE_DOMAIN } from './env-variables.js';
 import { CookieOptions } from './interfaces.js';
 
-export function getCookieOptions(redirectUri?: string | null): CookieOptions {
+export function getCookieOptions(): CookieOptions;
+export function getCookieOptions(redirectUri?: string | null): CookieOptions;
+export function getCookieOptions(redirectUri: string | null | undefined, asString: true, expired?: boolean): string;
+export function getCookieOptions(
+  redirectUri: string | null | undefined,
+  asString: false,
+  expired?: boolean,
+): CookieOptions;
+export function getCookieOptions(
+  redirectUri?: string | null,
+  asString?: boolean,
+  expired?: boolean,
+): CookieOptions | string;
+export function getCookieOptions(
+  redirectUri?: string | null,
+  asString: boolean = false,
+  expired: boolean = false,
+): CookieOptions | string {
   const url = new URL(redirectUri || WORKOS_REDIRECT_URI);
 
-  return {
-    path: '/',
-    httpOnly: true,
-    secure: url.protocol === 'https:',
-    sameSite: 'lax' as const,
-    // Defaults to 400 days, the maximum allowed by Chrome
-    // It's fine to have a long cookie expiry date as the access/refresh tokens
-    // act as the actual time-limited aspects of the session.
-    maxAge: WORKOS_COOKIE_MAX_AGE ? parseInt(WORKOS_COOKIE_MAX_AGE, 10) : 60 * 60 * 24 * 400,
-    domain: WORKOS_COOKIE_DOMAIN,
-  };
+  const maxAge = expired ? 0 : WORKOS_COOKIE_MAX_AGE ? parseInt(WORKOS_COOKIE_MAX_AGE, 10) : 60 * 60 * 24 * 400;
+
+  return asString
+    ? `Path=/; HttpOnly; Secure=${url.protocol === 'https:'}; SameSite="Lax"; Max-Age=${maxAge}; Domain=${WORKOS_COOKIE_DOMAIN || ''}`
+    : {
+        path: '/',
+        httpOnly: true,
+        secure: url.protocol === 'https:',
+        sameSite: 'lax' as const,
+        // Defaults to 400 days, the maximum allowed by Chrome
+        // It's fine to have a long cookie expiry date as the access/refresh tokens
+        // act as the actual time-limited aspects of the session.
+        maxAge,
+        domain: WORKOS_COOKIE_DOMAIN || '',
+      };
 }

package/src/env-variables.ts

@@ -1,15 +1,20 @@
+/* istanbul ignore file */
+
 function getEnvVariable(name: string): string | undefined {
   return process.env[name];
 }
 
+// Optional env variables
 const WORKOS_API_HOSTNAME = getEnvVariable('WORKOS_API_HOSTNAME');
 const WORKOS_API_HTTPS = getEnvVariable('WORKOS_API_HTTPS');
-const WORKOS_API_KEY = getEnvVariable('WORKOS_API_KEY') ?? '';
 const WORKOS_API_PORT = getEnvVariable('WORKOS_API_PORT');
-const WORKOS_CLIENT_ID = getEnvVariable('WORKOS_CLIENT_ID') ?? '';
 const WORKOS_COOKIE_DOMAIN = getEnvVariable('WORKOS_COOKIE_DOMAIN');
 const WORKOS_COOKIE_MAX_AGE = getEnvVariable('WORKOS_COOKIE_MAX_AGE');
 const WORKOS_COOKIE_NAME = getEnvVariable('WORKOS_COOKIE_NAME');
+
+// Required env variables
+const WORKOS_API_KEY = getEnvVariable('WORKOS_API_KEY') ?? '';
+const WORKOS_CLIENT_ID = getEnvVariable('WORKOS_CLIENT_ID') ?? '';
 const WORKOS_COOKIE_PASSWORD = getEnvVariable('WORKOS_COOKIE_PASSWORD') ?? '';
 const WORKOS_REDIRECT_URI = process.env.NEXT_PUBLIC_WORKOS_REDIRECT_URI ?? '';
 

package/src/index.ts

@@ -1,22 +1,17 @@
 import { handleAuth } from './authkit-callback-route.js';
-import { authkitMiddleware } from './middleware.js';
-import { withAuth, refreshSession, getSession } from './session.js';
+import { authkit, authkitMiddleware } from './middleware.js';
+import { withAuth, refreshSession } from './session.js';
 import { getSignInUrl, getSignUpUrl, signOut } from './auth.js';
-import { Impersonation } from './impersonation.js';
-import { AuthKitProvider } from './authkit-provider.js';
 
 export {
   handleAuth,
   //
   authkitMiddleware,
-  getSession,
+  authkit,
   //
   getSignInUrl,
   getSignUpUrl,
   withAuth,
   refreshSession,
   signOut,
-  //
-  Impersonation,
-  AuthKitProvider,
 };

package/src/interfaces.ts

@@ -37,6 +37,7 @@ export interface NoUserInfo {
   organizationId?: undefined;
   role?: undefined;
   permissions?: undefined;
+  entitlements?: undefined;
   impersonator?: undefined;
   accessToken?: undefined;
 }
@@ -68,6 +69,18 @@ export interface AuthkitMiddlewareOptions {
   signUpPaths?: string[];
 }
 
+export interface AuthkitOptions {
+  debug?: boolean;
+  redirectUri?: string;
+  screenHint?: 'sign-up' | 'sign-in';
+}
+
+export interface AuthkitResponse {
+  session: UserInfo | NoUserInfo;
+  headers: Headers;
+  authorizationUrl?: string;
+}
+
 export interface CookieOptions {
   path: '/';
   httpOnly: true;

package/src/middleware.ts

@@ -1,6 +1,6 @@
-import { NextMiddleware } from 'next/server';
-import { updateSession } from './session.js';
-import { AuthkitMiddlewareOptions } from './interfaces.js';
+import { NextMiddleware, NextRequest } from 'next/server';
+import { updateSessionMiddleware, updateSession } from './session.js';
+import { AuthkitMiddlewareOptions, AuthkitOptions, AuthkitResponse } from './interfaces.js';
 import { WORKOS_REDIRECT_URI } from './env-variables.js';
 
 export function authkitMiddleware({
@@ -10,6 +10,10 @@ export function authkitMiddleware({
   signUpPaths = [],
 }: AuthkitMiddlewareOptions = {}): NextMiddleware {
   return function (request) {
-    return updateSession(request, debug, middlewareAuth, redirectUri, signUpPaths);
+    return updateSessionMiddleware(request, debug, middlewareAuth, redirectUri, signUpPaths);
   };
 }
+
+export async function authkit(request: NextRequest, options: AuthkitOptions = {}): Promise<AuthkitResponse> {
+  return await updateSession(request, options);
+}