How to properly implement user account deletion in Next.js using Supabase?

Question

I'm working on a Next.js application and I'm trying to implement a user account deletion feature. I'm using Next.js server actions and Supabase for authentication. I have a deleteUserAction function in my user.ts file that handles the deletion process. However, I'm encountering some issues and I would appreciate some guidance on how to properly implement this functionality.

Here's the current code in my deleteUserAction function:

export async function deleteUserAction(id: string) {
  const client = getSupabaseServerClient({ admin: true });

  const { data, error } = await client.auth.getUser();

  if (error) {
    throw error;
  }

  if (data.user.id !== id) {
    throw new Error('You are not authorized to delete this user');
  }

  const userId = data.user.id;

  await deletePost(client, userId);
  await deleteSubscription(client, userId);
  await deleteThresholds(client, userId);
  await deleteUser(client, userId);
  await client.auth.admin.deleteUser(userId);
  await client.auth.signOut();

  revalidatePath(`/`);
  redirect('/login');
}

My DeleteUserButton Component:

export function AccountForm() {

  // You can get the user's email and display name here.
  const session = useUserSession();
  const { email, user_metadata } = session?.user || {};

  return (
    <Form {...form}>
      <form className='space-y-8'>
        <FormField
          control={form.control}
          name='email'
          disabled
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input
                  placeholder={user_metadata?.full_name || email}
                  {...field}
                />
              </FormControl>
       <FormMessage />
            </FormItem>
          )}
        />
        <div>
          {fields.map((field, index) => (
            <FormField
              control={form.control}
              key={field.id}
              name={`urls.${index}.value`}
              disabled
              render={({ field }) => (
                <FormItem>
                  <FormLabel className={cn(index !== 0 && 'sr-only')}>
                    URLs
                  </FormLabel>
                  <FormDescription className={cn(index !== 0 && 'sr-only')}>
                    Add links to share with your followers.
                  </FormDescription>
                  <FormControl>
                    <Input {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          ))}
          <Button
            type='button'
            variant='outline'
            size='sm'
            className='mt-2'
            onClick={() => append({ value: '' })}
          >
            Add URL
          </Button>
        </div>
        <Button type='submit' className='mr-3'>
          Update profile
        </Button>
        <DeleteUserButton uid={session?.user?.id || ''} />
      </form>
    </Form>
  );
}

Error I see in my terminal when I click the delete button:

error AuthApiError: invalid claim: missing sub claim