What is the NextJS + NodeJS authorization principle?

Question

Node.js

Hello! I kind of made authorization crutch, but it's super crooked, because sometimes it crashes. Also my solution is not secure. I could not find a suitable option on the Internet.

Task: We need to check the user's role in order to block access to some of the functionality and pages. It is important to send requests from both the client (React) and Server side rendering (NextJS) with header authorization 'Bearer ${accessToken}'. Also, the accessToken expires every day and I renew it with a refreshToken.

How I did it:
On each page where authorization is required, I registered getServerSideProps, in which I request accessToken from the cookie and if it is not there, I try to request a new one using refreshToken (which is again in the cookie), if it is not, then return 404 page. If I successfully received the accessToken, I pass it to the header authorization 'Bearer ${accessToken}'. And thus, already on the server, through the middleware, I check the role and the token, if everything is OK, I issue an answer.

I tried to get accessToken in client side (React) but then I can't make authorized request in getServerSideProps.

Perhaps I forgot to describe something. I would be grateful if you could suggest a better solution. Thank you!