Bundler Configuration

logto-authkit provides pre-configured bundler settings to resolve common issues with the jose library and optimize dependencies.

Why Bundler Configuration?

The underlying Logto SDK uses the jose library for JWT handling, which can cause bundling issues in some environments. logto-authkit provides ready-to-use configurations that:

Resolve jose library compatibility issues
Optimize dependency bundling
Ensure proper module resolution

Vite Configuration

When editing a Vite config or other build-time script, import directly from the bundler-config subpath. This avoids executing the main library bundle (which pulls in React and may cause issues during Node startup).

vite.config.js

import { viteConfig } from '@ouim/logto-authkit/bundler-config'

export default {
  ...viteConfig,
  // your other config
}

What’s Included

The Vite configuration provides:

{
  optimizeDeps: {
    include: ['@logto/react', '@ouim/better-logto-react'],
  },
  resolve: {
    alias: {
      jose: 'jose/dist/node/cjs',
    },
  },
}

Webpack Configuration

webpack.config.js

import { webpackConfig } from '@ouim/logto-authkit'

module.exports = {
  ...webpackConfig,
  // your other config
}

What’s Included

The Webpack configuration provides:

{
  resolve: {
    alias: {
      jose: 'jose/dist/node/cjs',
    },
  },
}

Next.js Configuration

next.config.js

import { nextjsConfig } from '@ouim/logto-authkit'

module.exports = {
  ...nextjsConfig,
  // your other config
}

What’s Included

The Next.js configuration provides the same alias configuration as Webpack:

{
  resolve: {
    alias: {
      jose: 'jose/dist/node/cjs',
    },
  },
}

Custom Configuration

If you need more control or want to integrate the configuration differently, you can use the getBundlerConfig helper:

import { getBundlerConfig } from '@ouim/logto-authkit/bundler-config'

// Get configuration for specific bundler
const viteConfig = getBundlerConfig('vite')
const webpackConfig = getBundlerConfig('webpack')
const nextConfig = getBundlerConfig('nextjs')

Parameters

The getBundlerConfig function accepts one parameter:

bundler

'vite' | 'webpack' | 'nextjs'

default:"'vite'"

The bundler type to get configuration for

Merging with Existing Config

You can merge the provided configuration with your existing setup:

vite.config.js

import { getBundlerConfig } from '@ouim/logto-authkit/bundler-config'
import { defineConfig } from 'vite'

const logtoConfig = getBundlerConfig('vite')

export default defineConfig({
  // Merge optimize deps
  optimizeDeps: {
    ...logtoConfig.optimizeDeps,
    include: [
      ...logtoConfig.optimizeDeps.include,
      'your-other-deps',
    ],
  },
  // Merge resolve aliases
  resolve: {
    ...logtoConfig.resolve,
    alias: {
      ...logtoConfig.resolve.alias,
      '@': '/src',
    },
  },
  // Your other config
  plugins: [...],
})

The bundler configuration is minimal and designed to be easily merged with your existing setup. It only modifies what’s necessary for logto-authkit to work properly.

Troubleshooting

Module not found: jose

Make sure you’ve applied the bundler configuration. The jose alias resolves to the CommonJS distribution which is more compatible with bundlers.

React errors during build

If you’re importing from the main package in your build config, switch to importing from @ouim/logto-authkit/bundler-config instead. This avoids loading React during the build process.

Vite optimization errors

If you see errors about pre-bundling dependencies, make sure the optimizeDeps.include array includes both @logto/react and @ouim/better-logto-react.

Get Started

Frontend

Server

Configuration

Examples

API Reference

Bundler Configuration

Why Bundler Configuration?

Vite Configuration

What’s Included

Webpack Configuration

What’s Included

Next.js Configuration

What’s Included

Custom Configuration

Parameters

Merging with Existing Config

Troubleshooting

Next Steps

Guest Mode

Custom Navigation

​Why Bundler Configuration?

​Vite Configuration

​What’s Included

​Webpack Configuration

​What’s Included

​Next.js Configuration

​What’s Included

​Custom Configuration

​Parameters

​Merging with Existing Config

​Troubleshooting

​Next Steps

Guest Mode

Custom Navigation

Why Bundler Configuration?

Vite Configuration

What’s Included

Webpack Configuration

What’s Included

Next.js Configuration

What’s Included

Custom Configuration

Parameters

Merging with Existing Config

Troubleshooting

Next Steps