TypeScript Configuration

Relevant source files

The following files were used as context for generating this wiki page:

• tsconfig.json
• src/types.ts
• tsup.config.ts
• package.json
• src/index.ts
• src/hooks.ts

The TypeScript configuration in the @pcstyle/auth repository defines the compilation, type-checking, and distribution strategy for the unified authentication SDK. The system is designed to provide strict type safety while supporting multiple module formats (CommonJS and ESM) for various PCSTYLE services.

The configuration ensures that the source code, written in TypeScript using modern React and Next.js features, is correctly transformed into consumable packages with accompanying type definitions (.d.ts files).

Compiler Settings

The project utilizes a tsconfig.json file to manage the behavior of the TypeScript compiler (tsc). It targets modern environments while ensuring strict development standards.

Core Compiler Options

The configuration targets ES2020 and uses the ESNext module system, which is optimized for modern bundlers.

Option	Value	Description
target	ES2020	Specifies the ECMAScript target version for output.
module	ESNext	Sets the module system for the generated code.
moduleResolution	bundler	Optimized for modern build tools like tsup.
strict	true	Enables all strict type-checking options.
jsx	react-jsx	Supports React 17+ JSX transform.
declaration	true	Generates corresponding .d.ts files.

Sources: tsconfig.json:2-15

Project Structure and Scope

The compiler is restricted to the src directory for input and outputs to the dist directory.

The diagram shows the flow from source TypeScript files to the bundled distribution outputs.
Sources: tsconfig.json:17-23, tsup.config.ts:4-13

Build and Distribution Configuration

The repository uses tsup for bundling, which works in tandem with TypeScript to generate multiple output formats.

Build Orchestration

The build process is defined in tsup.config.ts, specifying entry points for the main SDK, middleware, and Convex integration.

• Entry Points: src/index.ts, src/middleware.ts, and src/convex.ts.
• Formats: Both cjs (CommonJS) and esm (ES Modules) are generated to ensure compatibility across different Node.js and browser environments.
• Type Generation: dts: true ensures that type definitions are bundled, providing consumers with full IntelliSense support.
• External Dependencies: To prevent bloating the bundle, react, next, and @workos-inc/authkit-nextjs are marked as external.

Sources: tsup.config.ts:4-15, package.json:30-34

Package Exports

The package.json file maps these build outputs to specific export paths, allowing users to import only what they need (e.g., @pcstyle/auth/middleware).

The class diagram illustrates the mapping between source entry points and the final package exports.
Sources: package.json:7-23

Type System Architecture

The project maintains a centralized type definition file (src/types.ts) that serves as the single source of truth for the SDK's data structures.

Key Data Structures

TypeScript interfaces are used to define the shape of user objects and authentication states.

Interface	Purpose
User	Represents the WorkOS user object (id, email, names, etc.).
AuthState	Defines the return type for the useAuth hook.
AuthMiddlewareOptions	Configuration object for the middleware factory.
ConvexUser	Specific record structure for Convex database integration.

Sources: src/types.ts:4-65

Hook Implementation and Type Safety

The hooks leverage these types to provide a consistent API. For example, useAuth() returns an AuthState object, ensuring that components consuming the hook can safely access user or isAuthenticated properties.

// src/hooks.ts:18-26
export function useAuth(): AuthState {
    const { user, loading } = useWorkOSAuth();

    return {
        user: user ?? null,
        isLoading: loading,
        isAuthenticated: !!user,
    };
}

Sources: src/hooks.ts:18-26, src/types.ts:18-22

Scripts and Quality Control

The project includes scripts to ensure type integrity throughout the development lifecycle.

• typecheck: Runs tsc --noEmit to validate types without generating output files.
• build: Executes the tsup bundling process.
• dev: Runs tsup in watch mode for local development.

Sources: package.json:25-29

Summary: The TypeScript configuration of @pcstyle/auth is built around a strict, multi-entry point architecture. By combining tsconfig.json for language rules, tsup for multi-format bundling, and centralized type definitions, the project provides a robust and type-safe SDK for PCSTYLE services.