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
Martoxdlol10mo 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
deforestor10mo 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
3eif
3eifOP10mo 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
Want results from more Discord servers?
Add your server