invocation97
invocation97
PostsComments
BABetter Auth
Created by invocation97 on 2/7/2025 in #help
listUsers returns status 401 UNAUTHORIZED even though the current user is an admin.
Hey 😉 That's more of a "react" way to do it, which is completely fine, but you're loosing the benefits of nextjs server rendering. It works because the client already has the headers containing the information about the current users session (I'm assuming you're logged in as the admin). The idea is that the HTML is rendered ahead of time in my example, and in yours the <script> tag containing your javaScript is in the initial HTML, then it runs and gets the data, and lastly it appends it to the DOM. That process is obviously a bit slower and has more requests. The way you can improve it, if you want to keep it client-side, is you could use a fetching library like (tanstack query)[https://tanstack.com/query/latest/docs/framework/react/overview]. There you can set a key for each query, which you can invalidate whenever you do a mutation, which in your case would be doing any CRUD operations with the users. Just make sure that the keys match, and the data would get re-fetched everywhere. However, I'd still recommend my approach for Nextjs specifically since it is inherently faster.
11 replies
BABetter Auth
Created by invocation97 on 2/7/2025 in #help
listUsers returns status 401 UNAUTHORIZED even though the current user is an admin.
@belikebee Have you seen my latest message? It turns out you just need to pass in the headers: await headers() to the object because it is a server function and can't know if there's a session on the request time without including the headers.
11 replies
BABetter Auth
Created by invocation97 on 2/7/2025 in #help
listUsers returns status 401 UNAUTHORIZED even though the current user is an admin.
It turns out you need to pass in the headers the same way you would with any other auth form, so this is the final solution to the conundrum 
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { auth } from "@/lib/auth";
import { headers } from "next/headers";
import { redirect } from "next/navigation";

export default async function UsersPage() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (!session) {
    return redirect("/auth/sign-in");
  } else {
    console.log("SESSION: ", session);
  }
  const response = await auth.api.listUsers({
    headers: await headers(),
    query: {
      limit: 10,
      offset: 0,
    },
    next: {
      tags: ["users"],
    },
  });
  console.log("RESPONSE: ", response);

  const users = response.users;

  if (!users || users.length === 0) {
    return (
      <div className="space-y-4">
        <h1 className="text-3xl font-bold">Users</h1>
        <p>No users found.</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <h1 className="text-3xl font-bold">Users</h1>
      <Card>
        <CardHeader>
          <CardTitle>Users</CardTitle>
        </CardHeader>
        <CardContent>
          <ul>
            {users && users.map((user) => <li key={user.id}>{user.email}</li>)}
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { auth } from "@/lib/auth";
import { headers } from "next/headers";
import { redirect } from "next/navigation";

export default async function UsersPage() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (!session) {
    return redirect("/auth/sign-in");
  } else {
    console.log("SESSION: ", session);
  }
  const response = await auth.api.listUsers({
    headers: await headers(),
    query: {
      limit: 10,
      offset: 0,
    },
    next: {
      tags: ["users"],
    },
  });
  console.log("RESPONSE: ", response);

  const users = response.users;

  if (!users || users.length === 0) {
    return (
      <div className="space-y-4">
        <h1 className="text-3xl font-bold">Users</h1>
        <p>No users found.</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <h1 className="text-3xl font-bold">Users</h1>
      <Card>
        <CardHeader>
          <CardTitle>Users</CardTitle>
        </CardHeader>
        <CardContent>
          <ul>
            {users && users.map((user) => <li key={user.id}>{user.email}</li>)}
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}
11 replies
BABetter Auth
Created by invocation97 on 2/7/2025 in #help
listUsers returns status 401 UNAUTHORIZED even though the current user is an admin.
Okay, so I realized I was using the authClient on the server side. I've changed it since to use the server side auth. However, the issue persists. This is what I changed it to: 
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { auth } from "@/lib/auth";
import { headers } from "next/headers";
import { redirect } from "next/navigation";

export default async function UsersPage() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (!session) {
    return redirect("/auth/sign-in");
  } else {
    console.log("SESSION: ", session);
  }
  const response = await auth.api.listUsers({
    query: {
      limit: 10,
      offset: 0,
    },
  });
  console.log("RESPONSE: ", response);

  const users = response.users;

  if (!users || users.length === 0) {
    return (
      <div className="space-y-4">
        <h1 className="text-3xl font-bold">Users</h1>
        <p>No users found.</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <h1 className="text-3xl font-bold">Users</h1>
      <Card>
        <CardHeader>
          <CardTitle>Users</CardTitle>
        </CardHeader>
        <CardContent>
          <ul>
            {users && users.map((user) => <li key={user.id}>{user.email}</li>)}
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { auth } from "@/lib/auth";
import { headers } from "next/headers";
import { redirect } from "next/navigation";

export default async function UsersPage() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (!session) {
    return redirect("/auth/sign-in");
  } else {
    console.log("SESSION: ", session);
  }
  const response = await auth.api.listUsers({
    query: {
      limit: 10,
      offset: 0,
    },
  });
  console.log("RESPONSE: ", response);

  const users = response.users;

  if (!users || users.length === 0) {
    return (
      <div className="space-y-4">
        <h1 className="text-3xl font-bold">Users</h1>
        <p>No users found.</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <h1 className="text-3xl font-bold">Users</h1>
      <Card>
        <CardHeader>
          <CardTitle>Users</CardTitle>
        </CardHeader>
        <CardContent>
          <ul>
            {users && users.map((user) => <li key={user.id}>{user.email}</li>)}
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}
I added the manual auth check, thinking that it might be the culprit. The session logs correctly and the role is still set to admin, however I get the same error as before 
 ⨯ [Error [BetterCallAPIError]: API Error: UNAUTHORIZED ] {
  status: 'UNAUTHORIZED',
  headers: Headers {},
  body: [Object],
  digest: '3161027971'
}
 ⨯ [Error [BetterCallAPIError]: API Error: UNAUTHORIZED ] {
  status: 'UNAUTHORIZED',
  headers: Headers {},
  body: [Object],
  digest: '3161027971'
}
11 replies