Is it currently possible to use clerk auth with NextJS' 13.4 server actions?

I know it's currently in alpha, but I'd like to know if there is any way to use it right now.

Library versions are the latest.

@acme/nextjs:dev: - error Error: Clerk: auth() and currentUser() are only supported in App Router (/app directory).
@acme/nextjs:dev: If you're using /pages, try getAuth() instead.
@acme/nextjs:dev: Original error: Error: Invariant: Method expects to have requestAsyncStorage, none available
@acme/nextjs:dev:     at handleUpdateNoteContents (./src/app/@modal/(.)e/[id]/actions.ts:13:82)

@acme/nextjs:dev: - error Error: Clerk: auth() and currentUser() are only supported in App Router (/app directory).
@acme/nextjs:dev: If you're using /pages, try getAuth() instead.
@acme/nextjs:dev: Original error: Error: Invariant: Method expects to have requestAsyncStorage, none available
@acme/nextjs:dev:     at handleUpdateNoteContents (./src/app/@modal/(.)e/[id]/actions.ts:13:82)

@acme/nextjs:dev: - error Error: Clerk: auth() and currentUser() are only supported in App Router (/app directory).
@acme/nextjs:dev: If you're using /pages, try getAuth() instead.
@acme/nextjs:dev: Original error: Error: Invariant: Method expects to have requestAsyncStorage, none available
@acme/nextjs:dev:     at handleUpdateNoteContents (./src/app/@modal/(.)e/[id]/actions.ts:13:82)

@acme/nextjs:dev: - error Error: Clerk: auth() and currentUser() are only supported in App Router (/app directory).
@acme/nextjs:dev: If you're using /pages, try getAuth() instead.
@acme/nextjs:dev: Original error: Error: Invariant: Method expects to have requestAsyncStorage, none available
@acme/nextjs:dev:     at handleUpdateNoteContents (./src/app/@modal/(.)e/[id]/actions.ts:13:82)

// actions.ts
"use server";

import { currentUser } from "@clerk/nextjs";

import { db } from "@acme/db";

export const handleUpdateNoteContents = async (id: string, content: string) => {
  const user = await currentUser();
  if (!user) {
    return {
      error: "You must be logged in to update a note",
    };
  }
  const { id: userId } = user;
  await db
    .updateTable("Note")
    .set({
      content,
    })
    .where(({ and, cmpr }) =>
      and([cmpr("id", "=", id), cmpr("userId", "=", userId)]),
    )
    .executeTakeFirstOrThrow();
};

// actions.ts
"use server";

import { currentUser } from "@clerk/nextjs";

import { db } from "@acme/db";

export const handleUpdateNoteContents = async (id: string, content: string) => {
  const user = await currentUser();
  if (!user) {
    return {
      error: "You must be logged in to update a note",
    };
  }
  const { id: userId } = user;
  await db
    .updateTable("Note")
    .set({
      content,
    })
    .where(({ and, cmpr }) =>
      and([cmpr("id", "=", id), cmpr("userId", "=", userId)]),
    )
    .executeTakeFirstOrThrow();
};

// actions.ts
"use server";

import { currentUser } from "@clerk/nextjs";

import { db } from "@acme/db";

export const handleUpdateNoteContents = async (id: string, content: string) => {
  const user = await currentUser();
  if (!user) {
    return {
      error: "You must be logged in to update a note",
    };
  }
  const { id: userId } = user;
  await db
    .updateTable("Note")
    .set({
      content,
    })
    .where(({ and, cmpr }) =>
      and([cmpr("id", "=", id), cmpr("userId", "=", userId)]),
    )
    .executeTakeFirstOrThrow();
};

// actions.ts
"use server";

import { currentUser } from "@clerk/nextjs";

import { db } from "@acme/db";

export const handleUpdateNoteContents = async (id: string, content: string) => {
  const user = await currentUser();
  if (!user) {
    return {
      error: "You must be logged in to update a note",
    };
  }
  const { id: userId } = user;
  await db
    .updateTable("Note")
    .set({
      content,
    })
    .where(({ and, cmpr }) =>
      and([cmpr("id", "=", id), cmpr("userId", "=", userId)]),
    )
    .executeTakeFirstOrThrow();
};

// page.tsx
'use client'
// ...
export default function EditNoteModal({ params }: { params: { id?: string } }) {
  const [isPending, startTransition] = useTransition();
  // ...
  const router = useRouter();
  // ..
  const updateContent = ({ content }: EditFormData) => {
    const add = async () =>
      startTransition(() => {
        handleUpdateNoteContents(params.id!, content);
      });

    reset();
    add()
      .then(() => {
        router.refresh();
        router.back();
      })
      .catch((err) => console.error(err));
  };
//...
}

// page.tsx
'use client'
// ...
export default function EditNoteModal({ params }: { params: { id?: string } }) {
  const [isPending, startTransition] = useTransition();
  // ...
  const router = useRouter();
  // ..
  const updateContent = ({ content }: EditFormData) => {
    const add = async () =>
      startTransition(() => {
        handleUpdateNoteContents(params.id!, content);
      });

    reset();
    add()
      .then(() => {
        router.refresh();
        router.back();
      })
      .catch((err) => console.error(err));
  };
//...
}

// page.tsx
'use client'
// ...
export default function EditNoteModal({ params }: { params: { id?: string } }) {
  const [isPending, startTransition] = useTransition();
  // ...
  const router = useRouter();
  // ..
  const updateContent = ({ content }: EditFormData) => {
    const add = async () =>
      startTransition(() => {
        handleUpdateNoteContents(params.id!, content);
      });

    reset();
    add()
      .then(() => {
        router.refresh();
        router.back();
      })
      .catch((err) => console.error(err));
  };
//...
}

// page.tsx
'use client'
// ...
export default function EditNoteModal({ params }: { params: { id?: string } }) {
  const [isPending, startTransition] = useTransition();
  // ...
  const router = useRouter();
  // ..
  const updateContent = ({ content }: EditFormData) => {
    const add = async () =>
      startTransition(() => {
        handleUpdateNoteContents(params.id!, content);
      });

    reset();
    add()
      .then(() => {
        router.refresh();
        router.back();
      })
      .catch((err) => console.error(err));
  };
//...
}

inselbegabterOP•5/13/23, 3:25 PM

I feel like @James Perkins knows a lot about clerk

James Perkins•5/13/23, 3:25 PM

I know too much about Clerk.

inselbegabterOP•5/13/23, 3:25 PM

hahahaha

James Perkins•5/13/23, 3:26 PM

So there is a bug in Next.js that causes this problem.

James Perkins•5/13/23, 3:26 PM

Which hasn't been fixed by them yet, we reported it like 2 months ago or so.

James Perkins•5/13/23, 3:27 PM

But it can still be used, just gotta dig it up

JJames Perkins Which hasn't been fixed by them yet, we reported it like 2 months ago or so.

inselbegabterOP•5/13/23, 3:27 PM

Thats good to know! I was going crazy already. Thank you for your reply

JJames Perkins But it can still be used, just gotta dig it up

inselbegabterOP•5/13/23, 3:28 PM

Really? I'd love to know how

James Perkins•5/13/23, 3:30 PM

So I think I remember correctly. you need to import auth() on the page that the action is also happening.

James Perkins•5/13/23, 3:31 PM

So for example, this should work as a server action. even though it's all on one page:

import { auth, currentUser } from '@clerk/nextjs';

export default function AddToCart() {
  async function addItem(data: any) {
    'use server';
    console.log(auth().userId);
    console.log((await currentUser())?.firstName);
    console.log('add item server action', data);
  }

  return (
    // @ts-ignore
    <form action={addItem}>
      <input
        value={'test'}
        type='text'
        name='name'
      />
      <button type='submit'>Add to Cart</button>
    </form>
  );
}

import { auth, currentUser } from '@clerk/nextjs';

export default function AddToCart() {
  async function addItem(data: any) {
    'use server';
    console.log(auth().userId);
    console.log((await currentUser())?.firstName);
    console.log('add item server action', data);
  }

  return (
    // @ts-ignore
    <form action={addItem}>
      <input
        value={'test'}
        type='text'
        name='name'
      />
      <button type='submit'>Add to Cart</button>
    </form>
  );
}

inselbegabterOP•5/13/23, 3:32 PM

I'll try it and let you know it it works. Thanks James!

James Perkins•5/13/23, 3:34 PM

Yeah, it may or may not work it's very much a early early alpha a lot of usage seems to break even though it should work

inselbegabterOP•5/13/23, 3:39 PM

When adding your server actions to a actions.tsactions.ts file, it doesn't work. I like to use this pattern, bc it allows me to use the server actions in a client component.
When using clerk in a pure server component, I don't need to use

auth()

auth()

to get it working.
I know it's still in alpha. Can't wait to use everything properly once it gets released

saM69420•5/17/23, 7:38 AM

I ran into this issue with my client component and the solution was to import the server action into the parent server component and pass it down to the client component.

When using client components you need to make sure you use prop drilling to ensure that headers are available.

https://clerk.com/docs/nextjs/server-actions#with-client-components

Server Actions | Clerk

Learn how to use Clerk with Next.js Server Actions

James Perkins•5/18/23, 2:46 PM

Yup forgot to circle back. We release docs to explain how to use it today.

Is it currently possible to use clerk auth with NextJS' 13.4 server actions?

Similar Threads

Similar Threads

Similar Threads