BA
Better Auth•3mo ago
adios

Repetead API post calls

I'm having a problem with the admin plugin. I check userHasPermission in a client component view selector. I keep getting this repeated post requests. POST /api/auth/admin/has-permission 200 in 179ms 100+ of these lines and its not stopping,
1 Reply
adios
adiosOP•3mo ago
My code looks like 
export function ViewSelector() {
    const pathname = usePathname()
    const page = pathname.split("/").at(-1);

    /* useStates */

    useEffect(() => {
        async function checkPermission() {
            const editPermission = (await checkPermissions({permissionProject: ["edit-event"]})).hasPermission;
            const statisticsPermission = (await checkPermissions({permissionProject: ["statistics"]})).hasPermission;
            const userArtistRelation = await checkUserRelation({eventId});

            if (editPermission || statisticsPermission || userArtistRelation) setCanSeePanel(true);
            if (userArtistRelation) {...}
            if (editPermission) {...}
            if (statisticsPermission) {...}
        };

        checkPermission();
    }, []);
export function ViewSelector() {
    const pathname = usePathname()
    const page = pathname.split("/").at(-1);

    /* useStates */

    useEffect(() => {
        async function checkPermission() {
            const editPermission = (await checkPermissions({permissionProject: ["edit-event"]})).hasPermission;
            const statisticsPermission = (await checkPermissions({permissionProject: ["statistics"]})).hasPermission;
            const userArtistRelation = await checkUserRelation({eventId});

            if (editPermission || statisticsPermission || userArtistRelation) setCanSeePanel(true);
            if (userArtistRelation) {...}
            if (editPermission) {...}
            if (statisticsPermission) {...}
        };

        checkPermission();
    }, []);
checkPermissions is a server function calling auth.api.getSession and auth.api.userHasPermission: 
export async function checkPermissions(params: Params) {
    const { permissionProject, permissionsProject } = params;

    const permission = permissionProject ? {project: permissionProject} : {};
    const permissions = permissionsProject ? {project: permissionsProject} : {};

    const session = await auth.api.getSession({
        headers: await headers()
    });

    if (!session?.user?.id) return {hasPermission: false, reason: "Not logged in"};

    if (!permission && !permissions) return {hasPermission: false, reason: "Invalid function calling. Missing fields."};

    const body = {
        userId: session.user.id,
        ...(permission ? { permission } : { permissions }),
    };
    
    try {
        const result = await auth.api.userHasPermission({ body });

        return {
            hasPermission: result.success === true,
            reason: result.error
        };
    }
}
export async function checkPermissions(params: Params) {
    const { permissionProject, permissionsProject } = params;

    const permission = permissionProject ? {project: permissionProject} : {};
    const permissions = permissionsProject ? {project: permissionsProject} : {};

    const session = await auth.api.getSession({
        headers: await headers()
    });

    if (!session?.user?.id) return {hasPermission: false, reason: "Not logged in"};

    if (!permission && !permissions) return {hasPermission: false, reason: "Invalid function calling. Missing fields."};

    const body = {
        userId: session.user.id,
        ...(permission ? { permission } : { permissions }),
    };
    
    try {
        const result = await auth.api.userHasPermission({ body });

        return {
            hasPermission: result.success === true,
            reason: result.error
        };
    }
}
The issue was that the checkPermission is serverAction that had to run on every ClientComponent mount. The better approach is to use client side useSession or getSession. This way it uses nanostore so id doesnt have to hard check it every time.

Did you find this page helpful?