BA
Better Auth•4w ago
rasteiner

Nuxt's useFetch in Admin plugin?

Hello all! I'm tryiong to build a small "users" dashboard in my Nuxt app, essentially by building a UI around the Admin plugin. In the core Better Auth functions I could pass the useFetch function to make SSR work, I'm not seeing the same option in the Admin plugin however. 
// Nuxt integrated client instance, works flawlessly
const { data: session } = await authClient.useSession(useFetch);

// Admin plugin works, but causes hydration error
const users = await authClient.admin.listUsers({
    query: {
        limit: 100
    },
})
// Nuxt integrated client instance, works flawlessly
const { data: session } = await authClient.useSession(useFetch);

// Admin plugin works, but causes hydration error
const users = await authClient.admin.listUsers({
    query: {
        limit: 100
    },
})
I'm pretty sure I'm not the first one doing this, but since I'm new to both Nuxt and Better Auth, it seems I'm the first one not knowing how to work around it. 😅 What is the formally correct way to use the Admin plugin with SSR in Nuxt? Should I just not use the client side api for the Admin plugin and create my own which I can use with useFetch?
Solution:
With SSR you'd typically use the auth.api client
Jump to solution
4 Replies
Solution
Timur
Timur•4w ago
With SSR you'd typically use the auth.api client
rasteiner
rasteinerOP•4w ago
So there is no isomorphic client for the Admin api? I mean the auth.api only works on the server (right?), so I can't just use it in a Nuxt "Page". For the auth.api client to work I'd need to wrap it in my own API: server/api/users/index.get.ts 
export default defineEventHandler(async (event) => {
    return auth.api.listUsers({
        query: getQuery(event),
        headers: event.headers
    });
});
export default defineEventHandler(async (event) => {
    return auth.api.listUsers({
        query: getQuery(event),
        headers: event.headers
    });
});
app/pages/dashboard/users.vue 
const {data: users} = await useFetch('/api/users', {
    query: {
        limit: 100
    }
});
const {data: users} = await useFetch('/api/users', {
    query: {
        limit: 100
    }
});
Correct?
Timur
Timur•4w ago
The auth.api only works in the server yes. I'm not familiar with Nuxt but if a Page is rendered on the client then auth.api will be inaccessible. The code you have provided above looks correct to me but again the docs say something about SSR and I am not 100% sure w.r.t the admin plugin with Nuxt Try it out and see if it works
rasteiner
rasteinerOP•4w ago
it works, it was just that I essentially need to dismiss the whole authClient.admin thing which seemed wrong to me. Edit: well not the whole thing, I guess I can still use the actions (like "banUser", and the stuff which doesn't need to render on the server)

Did you find this page helpful?