Ensuring the safety of your NextJS SSR pages with a secure application

Question

Ensuring the safety of your NextJS SSR pages with a secure application

I am working on implementing a SSR page in nextjs, and I want to restrict access to only authenticated or logged-in users. How can I ensure this as the SSR is being generated on the server, without passing the token from local storage? Please share your thoughts 🙏

I don't have any idea how to solve this problem at the moment, so any help would be greatly appreciated.

security next.js server-side-rendering

Answer 1

Answer №1

In response to koolskateguy89's suggestion, one way to issue a client an access token (JWT) is by including a set-cookie header instructing the client to store the JWT as a cookie. When the client requests the specific page, remember to include the with credentials property in the request, although this may vary when using the native fetch API.

If you prefer not to utilize cookies, you can pass the authorization header and utilize the token from localstorage like so:

const res = await fetch(/api/authprotected, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${jwt-from-local-storage}`,
      },
      body: JSON.stringify(data),
    });

In the getServerSideProps function, extract and validate the JWT from the incoming request:

export const getServerSideProps: GetServerSideProps = async (context) => {
  const token =
    (context.req.headers.authorization as string) ||
    (context.req.cookies.jwt as string);

  //validate the JWT token here, send error if not authenticated

};

Keep in mind that it's recommended to handle token authorization in a centralized middleware file like middleware.ts. Avoid duplicating authorization logic across multiple api routes to adhere to the DRY principle.

Answer 2

In response to koolskateguy89's suggestion, one way to issue a client an access token (JWT) is by including a set-cookie header instructing the client to store the JWT as a cookie. When the client requests the specific page, remember to include the with credentials property in the request, although this may vary when using the native fetch API.

If you prefer not to utilize cookies, you can pass the authorization header and utilize the token from localstorage like so:

const res = await fetch(/api/authprotected, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${jwt-from-local-storage}`,
      },
      body: JSON.stringify(data),
    });

In the getServerSideProps function, extract and validate the JWT from the incoming request:

export const getServerSideProps: GetServerSideProps = async (context) => {
  const token =
    (context.req.headers.authorization as string) ||
    (context.req.cookies.jwt as string);

  //validate the JWT token here, send error if not authenticated

};

Keep in mind that it's recommended to handle token authorization in a centralized middleware file like middleware.ts. Avoid duplicating authorization logic across multiple api routes to adhere to the DRY principle.

Ensuring the safety of your NextJS SSR pages with a secure application

Answer №1

Similar questions

The plugin '@next/next' failed to load while executing the npm run lint command within the GitLab CI pipeline

Bringing in react to page elements in next.js (including React and CRA applications)

Does using req.params in an Express.js route without any validation pose a security risk?

The npm rollup.js error message reads: "ReferenceError: _default is not defined."

When in production, Express and NextJS do not allow origin for CORS

Why does the error message "DeprecationWarning: 'originalKeywordKind' deprecated" keep popping up while I'm trying to compile my project?

Start the node server, send a curl request, and then shut down the server within the Dockerfile

Running Vercel's AI SDK on AWS Lambda and API Gateway: Step-by-step guide

Encountering a Vercel deployment failure due to a TypeError: The 'split' property cannot be read from undefined within several objects

Tips for assigning information from a react hook within a function or event

Leveraging Nodemailer on Heroku

One developer session using MongoDB with NextJS/Vercel leads to the formation of numerous connections that continue to grow exponentially

Utilizing form data binding with multiple instances of forms in React

Bring in an asynchronous function from another file to the component

The font '<URL>' was denied from loading due to its violation of the Content Security Policy directive "font-src 'none'"

How to efficiently pass props between components in NextJs

I'm all set to launch my express js application! What are the major security concerns that I need to keep in

Differences in the rendering of SVG feDiffuseLighting between Chrome and Firefox

Establish a new data entry and link it to an already existing entry using the Prisma client (forming a one-to-one relationship)

My website is experiencing issues with LCP specifically on mobile devices. Instead of receiving a score, I am only presented with a question mark