invocation97
invocation97
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.
7 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>
);
}
7 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'
}
7 replies