Theo's Typesafe Cult•12mo ago

How to protect pages using Next Auth

I am really confused right now. I'm being told it's not recommended to use JWT for OAuth but I need to use JWTs to have middleware that protects routes from being exposed to unauthenticated users. So what am I supposed to do?

3 Replies

Martoxdlol•12mo ago

I don't think using JWT or other method of authentication changes how you protect your pages. Are you using some auth library or something?

deforestor•12mo ago

This is how I do it:

export const authorizedServerSideProps = async (
    ctx: GetServerSidePropsContext,
    requiredPerms: {
        admin?: boolean;
        host?: {
            all?: boolean;
            eventSlug?: string;
        };
        communityManager?: {
            all?: boolean;
            communitySlug?: string;
        };
    },
) => {
    const session = await getServerAuthSession(ctx);
    const queriedPerms: Promise<boolean>[] = [];
    const trpc = await getTrpcCaller(ctx);

    if (requiredPerms.admin) {
        queriedPerms.push(trpc.permissions.hasAdminPerms());
    }

    if (requiredPerms.communityManager?.all) {
        queriedPerms.push(trpc.permissions.hasCommunityManagerPerms());
    } else if (requiredPerms.communityManager?.communitySlug) {
        queriedPerms.push(
            trpc.permissions.hasCommunityManagerPerms(
                requiredPerms.communityManager.communitySlug,
            ),
        );
    }

    if (requiredPerms.host?.all) {
        queriedPerms.push(trpc.permissions.hasHostPerms());
    } else if (requiredPerms.host?.eventSlug) {
        queriedPerms.push(
            trpc.permissions.hasHostPerms(requiredPerms.host.eventSlug),
        );
    }

    try {
        const perms = await Promise.all(queriedPerms);
        if (!session || !session.user.id || !perms.every((perm) => perm)) {
            return {
                redirect: {
                    destination: "/home",
                    permanent: false,
                },
            };
        }
    } catch (err) {
        return { notFound: true };
    }

    return { props: { session } };
};

export const authorizedServerSideProps = async (
    ctx: GetServerSidePropsContext,
    requiredPerms: {
        admin?: boolean;
        host?: {
            all?: boolean;
            eventSlug?: string;
        };
        communityManager?: {
            all?: boolean;
            communitySlug?: string;
        };
    },
) => {
    const session = await getServerAuthSession(ctx);
    const queriedPerms: Promise<boolean>[] = [];
    const trpc = await getTrpcCaller(ctx);

    if (requiredPerms.admin) {
        queriedPerms.push(trpc.permissions.hasAdminPerms());
    }

    if (requiredPerms.communityManager?.all) {
        queriedPerms.push(trpc.permissions.hasCommunityManagerPerms());
    } else if (requiredPerms.communityManager?.communitySlug) {
        queriedPerms.push(
            trpc.permissions.hasCommunityManagerPerms(
                requiredPerms.communityManager.communitySlug,
            ),
        );
    }

    if (requiredPerms.host?.all) {
        queriedPerms.push(trpc.permissions.hasHostPerms());
    } else if (requiredPerms.host?.eventSlug) {
        queriedPerms.push(
            trpc.permissions.hasHostPerms(requiredPerms.host.eventSlug),
        );
    }

    try {
        const perms = await Promise.all(queriedPerms);
        if (!session || !session.user.id || !perms.every((perm) => perm)) {
            return {
                redirect: {
                    destination: "/home",
                    permanent: false,
                },
            };
        }
    } catch (err) {
        return { notFound: true };
    }

    return { props: { session } };
};

then I do this in the page:

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
    const { slug } = ctx.query;
    return authorizedServerSideProps(ctx, {
        communityManager: {
            communitySlug: slug as string,
        },
    });
};

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
    const { slug } = ctx.query;
    return authorizedServerSideProps(ctx, {
        communityManager: {
            communitySlug: slug as string,
        },
    });
};

Keep in mind this will add another client->server->db->server->client to your requests So you can always keep this client-side by just adding a hook that redirects if user doesn't have the permissions

3eifOP•12mo ago

Yes I'm using next auth I have to use JWT tokens if I'm using middleware Cuz I can't call the db to get the secret in middleware Thank you for sending this I think it's a bit too complicated for me though I might just use JWT for simplicity at this point I think ima just use jwt tokens i dont think its that bad

Gaming

Programming

How to protect pages using Next Auth