access Nextjs httponly cookie

Question

I'm working on a Nextjs app and I'm using Laravel api for auth and other things. So I was searching about the best way to store the token that i will get when I sign a user in or sign him up from that Laravel external api and as I found storing it via httponly cookie is the best way and that's what I did using nextjs api routes to store it there. I create 3 api routes in /api directory for loging the user in and up and out. but now I'm facing an issue which is how to send this token on each request that i'm sending on client side to that api.

for now I'm using getServerSideProps to get the token and then send it by props to the needed component but this is solution is redundant and not handy at all. I'm using getServerSideProps just to get it on any page that need to communicate with backend.

so is there any way to forward the token on each request without the need to get the token from server side and send it to client side? or do u think there is a better way to store the token in somewhere else?

If the token is being placed into a cookie by the server, your browser will return that cookie with each request. There should be no need to mess with the token at all. — Randy Casburn, Feb 02 '23 at 21:30
I think you _might_ be suggesting that each request you send is an AJAX request, but your question lacks clarity. — Randy Casburn, Feb 02 '23 at 21:31
No, It's placed by me in next js api routes. I create 3 next js api routes to handle the auth and communicate with the external api and to set up the httponly cookie — Mooder, Feb 03 '23 at 22:29

score 0 · Answer 1 · answered Feb 03 '23 at 00:19

If you have a httpOnly cookie and you don't want to expose it to the client-side, I don't suggest to pass it in getServerSideProps as prop to the component. This will expose your token and will have the risk of scripts accessing the cookie. If the cookie is HttpOnly, it means it cannot be accessed through the client-side script. Instead, you can create a NextJS api and access your token there. Then call that api in your app.

This is an example of how to access the cookie in nextjs api:

// src > pages > api > endpoint.js
export default async function (req, res) {
  // assuming there is a token in your cookie
  const token = req.headers.cookie.token;

  // Attach the token to the headers of each request
  const fetchWithToken = (url, options = {}) => {
    options.headers = options.headers || {};
    options.headers.Authorization = `Bearer ${token}`;
    return fetch(url, options);
  };

  // Your API logic here
  // ...
}

Now in your component in client-side, you can easily the new endpoint in /api/endpoint/ instead of calling the API with the token. In this method, you will never expose the token to the browser:

import { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/endpoint');
      const data = await res.json();
      setData(data);
    };

    fetchData();
  }, []);

  // Your component logic here
  // ...
};

export default MyComponent;

But this solution is redundant too. by doing it I'm creating a parallel api to all the endpoints of the external api and I dont want to do a repetitive thing like i was doing with getServerSideProps despite the fact this way will cost me money on hosting them. — Mooder, Feb 03 '23 at 22:37
That is the whole point with NextJS API, we use them when we do not want to expose a token, API key, etc. — Mehran, Feb 04 '23 at 23:12
If we send the token to the client side, we will be in risk of XSS attack. I recommend to read [this article](https://owasp.org/www-community/HttpOnly) — Mehran, Feb 04 '23 at 23:20

access Nextjs httponly cookie

1 Answers1