lucia-auth / examples

A collection of example projects built with Lucia
MIT License
171 stars 41 forks source link

Server action issues with V3 In Next app router #12

Closed rodrigocezarluz closed 3 months ago

rodrigocezarluz commented 6 months ago

Error when calling server action in a project using lucia auth.

 ⨯ node_modules/lucia/dist/core.js (26:61) @ new Lucia
 ⨯ TypeError: oslo__WEBPACK_IMPORTED_MODULE_0__.TimeSpan is not a constructor
    at eval (./lib/auth.ts:24:15)
    at (action-browser)/./lib/auth.ts (/home/rodrigo/Web_dev/FullStack_projects/Tailwind/examples-lucia-v3/nextjs-app/username-and-password/.next/server/app/test/page.js:330:1)
    at __webpack_require__ (/home/rodrigo/Web_dev/FullStack_projects/Tailwind/examples-lucia-v3/nextjs-app/username-and-password/.next/server/webpack-runtime.js:33:42)
    at eval (./lib/actions.ts:9:67)
    at (action-browser)/./lib/actions.ts (/home/rodrigo/Web_dev/FullStack_projects/Tailwind/examples-lucia-v3/nextjs-app/username-and-password/.next/server/app/test/page.js:319:1)
    at Function.__webpack_require__ (/home/rodrigo/Web_dev/FullStack_projects/Tailwind/examples-lucia-v3/nextjs-app/username-and-password/.next/server/webpack-runtime.js:33:42)

Steps to reproduce:

  1. Download the "username-and-password" example from "nextjs-app".
  2. Create a "test" folder in the app folder to create a /test route.
  3. Add this page.tsx:
    
    import DummyForm from "./dummy-form";

export default async function DummyPage() { return (

Dummy Form

); }

4. Add this dummy-form.tsx:

"use client";

import { dummy } from "@/lib/actions"; export default function DummyForm() { console.log("DummyForm client"); return (

); }

5. Create a lib folder and add the following actions.ts:

"use server";

export async function dummy(formData: FormData) { console.log("dummy", formData); }

import { lucia, validateRequest } from "@/lib/auth";

export interface ActionResult { error: string | null; }

export async function dummyAuth( formData: FormData ) { const { session } = await validateRequest(); }



6. Run the project, go to /test route and click the "Click Me" button.

Any idea as to why this happens?
zeekrey commented 4 months ago

I'm experiencing the same issue. I've checked the example repository (https://github.com/lucia-auth/examples/tree/main) and it's working perfectly. However, in my current repository, I'm encountering the following error:

TypeError: oslo_password__WEBPACK_IMPORTED_MODULE_7__.Argon2id is not a constructor
    at signUp (signup/actions.ts:50:34)
  44 |
> 45 |   const hashedPassword = await new Argon2id().hash(password);
     |                               ^
  46 |   const id = generateId(15);
  47 |
  48 |   try {

I tried different nextjs configs:

/** @type {import('next').NextConfig} */
const nextConfig = {
    // webpack: (config) => {
    //     config.externals.push("@node-rs/argon2", "@node-rs/bcrypt");
    //     return config;
    // },
    experimental: {
        serverComponentsExternalPackages: ["oslo"]
    },
    transpilePackages: ['@vesk/components']
}

module.exports = nextConfig

@rodrigocezarluz Could you solve the issue?

pilcrowOnPaper commented 3 months ago

This should be fixed with the latest versions