Using rollup to package a pre-configured next-auth library

[davidbattalion]

My company wants to make a pre-configured next-auth package on a private npm repo. This sounds like a great idea because I can quickly add an npm package that has next-auth already included and pre-configured out of the gate for our servers, just need to provide the secrets.

I'm running into issues though when it comes to building the library. I have it working locally (a vanilla next project just importing the index.ts from the project files), but I am unable to do the same with the dist version.

This is my vite config for building the package

export default defineConfig(() => ({
    plugins: [
        react(),
        tsConfigPaths(),
        dts({ include: ['src']} ),
    ],
    build: {
        lib: {
            entry: resolve('src', 'index.ts'),
            name: 'company-auth',
            formats: ['es', 'cjs'],
            fileName: (format) => `company-auth.${format === 'cjs' ? 'cjs' : 'es.js'}`,
        },
        rollupOptions: {
            external: ['react', 'react-dom', 'next-auth'],
            output: {
                globals: {
                    react: 'React',
                    'react-dom': 'ReactDOM',
                    'next-auth': 'next-auth',
                },
            },
        },
        esbuild: {
            minify: true,
        },
    },
}));

I essentially created a preconfigured AuthOptions Object

export const CompanyAuthHandler = NextAuth({
 ... configuration
})

which the idea is to be used like so

// app/api/auth/[...nextauth]/route.ts

import { CompanyAuthHandler } from '@companypackage';
export { CompanyAuthHandler as GET, CompanyAuthHandler as POST };

This works when testing locally, but when I build and I import it into a project, I get

TypeError: next_auth__WEBPACK_IMPORTED_MODULE_0__ is not a function

------------------------------------------------------------------------
../dist/company-auth.es.js (82:11) @ Qt

  80 | }
  81 | }
> 82 | const ea = Qt({
     |         ^
  83 | pages: {
  84 |   signIn: "/login"
  85 | },

When I look into company-auth.es.js output I see this:

import Qt from "next-auth";

.
.
.

const ea = Qt({
  pages: { ... },
  providers: [ ... ],
  callbacks: { ... }
});

Which it seems Qt is the NextAuth function. I sense it has something to do with rolling up the dependcy or the way Qt (NextAuth) is exported?

[joachimdalen]

Did you ever figure out a solution for this? I'm facing the same issue, but so far not found a solution that works

[davidbattalion]

I sorta did. First I upgraded to v5 beta which does a great job of separating the client / server stuff. Next in my rollup I basically defined two entry points in the package

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import tsConfigPaths from 'vite-tsconfig-paths';
export default defineConfig(() => ({
    plugins: [
        react(),
        tsConfigPaths(),
        dts({
            include: ['src'],
        }),
    ],
    build: {
        lib: {
            entry: {
                library: './src/index.ts',
                client: './src/client.ts',
            },
        },
        rollupOptions: {
            external: ['react', 'react-dom', 'next-auth', 'next', 'next/server'],
            output: {
                globals: {
                    react: 'React',
                    'react-dom': 'ReactDOM',
                    'next-auth': 'next-auth',
                    next: 'next',
                },
            },
        },
        esbuild: {
            minify: false,
        },
    },
}));

Then in my package.json I defined the entrypoints for those two files

 "exports": {
        ".": {
            "require": "./dist/library.cjs",
            "import": "./dist/library.js",
            "types": "./dist/index.d.ts"
        },
        "./client": {
            "require": "./dist/client.cjs",
            "import": "./dist/client.js",
            "types": "./dist/client.d.ts"
        },
    },

Then in my component library I have a client.ts file which I export all the client sided code that I need from nextauth (SessionProvider, and useSession) for example and then index.ts exports all the server side stuff.

When I build I have a script that adds "use client" to the top the client.js after it is built.

Now in the consuming app if I need a client side method (like useSession) it's called like this

"use client"
import { useSession } from "@company/auth/client"
... rest of the code

and in the server side it's

import { auth } from "@company/auth
... rest of code

Couldn't get this method working with v4 only with v5 which is beta which I don't like. So we're not using this package in external apps just yet. Just internal

[joachimdalen]

Thank you for the thorough explanation, you probably saved me a few hours of headache 😅
I'll look into upgrading to V5 and try it out this way.

[alliecassano]

For anyone who stumbles across this issue and isn't able to upgrade to v5, we were able to get this working by changing import NextAuth from "next-auth"; to const NextAuth = require("next-auth").default;. We aren't happy with this solution, but it is working for now.