I am getting an error when trying to pass a server component to a client component as props for a next-auth v5 in Next.js v14 implementation. I am trying to follow this pattern on the Next site https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props to pass a server component to a client component. The error is: Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding ‘use client’ to a module that was originally written for the server.

What needs to be altered to resolve this error?

The 3 components are as follows:

• Nav – client component & this is imported in the page
• AuthClientInOutWrapper – client component
• AuthServerInOutForms – server component

AuthClientInOutWrapper:

"use client";
import React from "react";
async function AuthClientInOutWrapper({
  children
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      {children}
    </>
  );
}
export default AuthClientInOutWrapper;

AuthServerInOutForms

"use server";
import { auth, signIn, signOut } from "auth";

async function AuthServerInOutForms() {
  const session = await auth();
  return (
    <>
      {session && session.user ? (
        <>
          <h1>sign out 44</h1>
          <form
            action={async () => {
              await signOut();
            }}
          >
            <button className="text-white" type="submit">Sign Out 44</button>
          </form>
        </>
      ) : (
        <>
          <h1>sign in 44</h1>
          <form
            action={async () => {
              await signIn();
            }}
          >
            <button className="text-white" type="submit">Sign In 44</button>
          </form>
        </>
      )}
    </>
  );
}
export default AuthServerInOutForms;

Nav client component:

<AuthClientInOutWrapper>
  <AuthServerInOutForms />
</AuthClientInOutWrapper>