It is not allowed to define inline "use server" annotated Server Actions in Client Components.

[moroshko]

When AuthKitProvider is used directly in the layout, it works fine:

layout.tsx

import type { PropsWithChildren } from "react";
import { AuthKitProvider } from "@workos-inc/authkit-nextjs";

const SignedInLayout = ({ children }: PropsWithChildren) => {
  return (
    <AuthKitProvider>
      <main>{children}</main>
    </AuthKitProvider>
  );
};

export default SignedInLayout;

However, if it's used inside a custom Providers client component, it produces an error:

layout.tsx

import type { PropsWithChildren } from "react";
import { Providers } from "./components/Providers/Providers";

const SignedInLayout = ({ children }: PropsWithChildren) => {
  return (
    <Providers>
      <main>{children}</main>
    </Providers>
  );
};

export default SignedInLayout;

Providers.tsx

"use client";

import { AuthKitProvider } from "@workos-inc/authkit-nextjs";
import type { PropsWithChildren } from "react";

const Providers = ({ children }: PropsWithChildren) => {
  return <AuthKitProvider>{children}</AuthKitProvider>;
};

export { Providers };

Removing "use client" from Providers.tsx solves the issue, but this solution won't work if I have other third-party providers that don't have their own "use client" or if I want to add an onSessionExpired prop to AuthKitProvider.

Any ideas?

I'm using @workos-inc/authkit-nextjs@0.10.0

[PaulAsjes]

Thanks for the report and the detailed reproduction steps! This is a duplicate of https://github.com/workos/authkit-nextjs/issues/80 so I'm closing this, but we're looking into fixing this.