impersonation code breaks the build

[dror-trail]

using Next.js (14.2.5) + "@workos-inc/authkit-nextjs": "^0.9.0"
i dont use the impersonation component but it still breaks

      Error: ./node_modules/@workos-inc/authkit-nextjs/dist/cjs/impersonation.js:54:21
      Ecmascript file had an error
        52 |             } },
        53 |             React.createElement("form", { action: async () => {
      > 54 |                     'use server';
           |                     ^^^^^^^^^^^^
        55 |                     await (0, auth_js_1.signOut)();
        56 |                 }, style: {
        57 |                     display: 'flex',
      
      It is not allowed to define inline "use server" annotated Server Actions in Client Components.
      To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component.

[PaulAsjes]

I'm unable to reproduce with both Next.js 14.2.5 and authkit-next 0.9.0. Could you provide more details or an example repo that shows the issue?

[MHendrieAIOT]

I'm having this same problem. I need to use signOut() in an onClick event handler (outside of a form) and I haven't been able to get it to work.

Some minimal code that throws this error for me:

"use client"
import { signOut } from "@workos-inc/authkit-nextjs";
export default async function Example() {
  return (
    <button onClick={async () => await signOut()}>Sign out</button>
  );
}

The error still occurs if I extract the signOut call to a server action in a separate file and import it in my client component.

[PaulAsjes]

Hi all, we've found that the issue only appears in client components. We're working on a fix, but in the meanwhile for client components you should be able to treat signOut and signIn as a server function:

"use client"
import { signOut } from "@workos-inc/authkit-nextjs";
export default async function Example() {
  return (
    <button onClick={signOut}>Sign out</button>
  );
}

Impersonation and AuthKitProvider won't currently work in client components, but we're working on a fix.

[kmankan]

is there a solution for this yet? this means a bunch of client side function like withAuth don't work either... that's pretty important.