How can I built a HOC for guarding routes if I am using httpOnly cookie? - next.js

Question

I am storing my token in a httpOnly cookie, but when I want to built a HOC for guarding the routes there is no way to access the cookie directly inside a component, I have to do it inside the server side,
I tried to do something like this but it doesn't work:
import Cookie from "cookies";
const withAuth = (Page) => {
Page.getServerSideProps = async ({ req, res }) => {
const cookie = new Cookie(req, res);
const token = cookie.get("token");
if (!token)
return {
redirect: {
permanent: false,
destination: "/login",
},
};
return {
props: {
token,
},
};
};
return Page;
};
export default withAuth;

Answer 1

The getServerSideProps function only works in pages, not components.
The following snippet should help you create a HOC for authentication. This example uses the concepts of closures. I'll call this one withAdministrator.jsx.
// withAdministrator.jsx
export default (GetServerSidePropsFunction) => async (ctx) => {
// 1. Check if there is a token.
const token = ctx.req.cookies?.jwt || null;
// 2. Perform an authorized HTTP GET request to the private API to get user data.
// In here, assume that 'getAuth' is a function to perform authorized GET request using the token value in the 'Authorization' header.
const { data } = await getAuth(`${process.env.PRIVATE_API_URL}/api/v1/users/user`, token);
// 3. If there is no user, or the user is not an admin, then redirect to unauthorized.
if (!data || data.role !== 'admin') {
return {
redirect: {
destination: '/unauthorized',
permanent: false,
},
};
}
// 4. Return via closure: 'GetServerSidePropsFunction'.
return await GetServerSidePropsFunction(ctx);
};
You'll call it like this. Let's say you want to access the /admin route.
export const getServerSideProps = withAdministrator(() => {
return {
props: {},
};
});
const Admin = () => {
return (
<YourComponent />
);
};
You can do anything you want inside the returned function. For example, you might want to fetch data after authenticating the user.
Further reading: Data fetching in Next.js.