How to protect routes

[theprobugmaker]

I was wondering, what is the best way to protect routes that needs the user to be authenticated or for example that requires the user to have the email confirmed.

In PHP applications for example we usually do that on the server side using middlewares this way we avoid the user going into places that s/he is not allowed.

In Next.JS as we are dealing with SSR and we have the client and server side in the same application we can't just create middlewares on the server side as it won't work on the client side so I was wondering, what is the best way to handle those things?

In my case I have an external API for authentication and things like that with session so the API is going to return a cookie, I saw the examples specially the with-passport and it works perfectly but I noticed that something isn't work properly. The profile page is rendering first and them redirecting, the useUser hook is not behaving like a middleware to avoid the user to see the page before checking.

How do you guys handle this?

Thanks

[theprobugmaker]

bump

[JanTvrdik]

We use cookies for authentication and check them in getServerSideProps().

// src/server/auth.ts
type GetServerSidePropsWithAuth<P extends { [key: string]: any }> = (context: GetServerSidePropsContext, auth: AuthData) => Promise<{ props: P }>

export const requirePageAuth = <P extends { [key: string]: any }>(inner?: GetServerSidePropsWithAuth<P>): GetServerSideProps => {
  return async (ctx) => {
    const auth = getValidAuthCookie(ctx.req)

    if (auth === null) {
      removeAuthCookie(ctx.res)
      ctx.res.writeHead(302, { Location: '/' })
      ctx.res.end()

      return { props: {} }
    }

    return inner ? inner(ctx, auth) : { props: { auth } }
  }
}

// pages/payments.ts
export const getServerSideProps = requirePageAuth()
export default function Payments(props) { ... }

[theprobugmaker]

I'm confused regarding the server. Are you using an external API as well or it's only Next? I'm asking this cause I mentioned before that I'm using an external API and there is where the session is created and the cookie returned.

For example here: ctx.res.writeHead(302, { Location: '/' }) you are redirecting the user if he is not authenticated but how am I supposed to do that when I have an external API and I can't just redirect like that?

Thank you very much for answering.

[zbnauj]

we can't just create middlewares on the server side as it won't work on the client side

You can create middlewares and use them in getServerSideProps so you will redirect the user before the page renders.

This is an example of how I do it. In the example, you can make authorize verify the session against your API or query your database or run any logic related to verification.

If you have an external API and you want to protect the routes you can manage your session in Next.js. However, if your API is in a different domain I think you can't use httpOnly.

[theprobugmaker]

It's going to be in the same domain, it's a monorepo project, the API is only running in a different port.
A question tho: getServerSideProps is going to be triggered on the server side right? But what about if the user is on the client side and enters in an url, it won't be called? Or Next has some kind of "hidden api" that calls this even on the client side (that I don't know about)?

[theprobugmaker]

I just saw in the docs:

When you request this page on client-side page transitions through next/link (documentation) or next/router (documentation), Next.js sends an API request to the server, which runs getServerSideProps. It’ll return JSON that contains the result of running getServerSideProps, and the JSON will be used to render the page. All this work will be handled automatically by Next.js, so you don’t need to do anything extra as long as you have getServerSideProps defined.

That is really nice.

[timneutkens]

Opened a RFC for redirecting here: #14890