Next.js: How to use getInitialProps to get cookies?

[jackmatrix]

I'm facing an issue with next.js

I cannot get my cookies when i make a request from async static getInitialProps. i get undefined

However when i am making it in componentWillMount there is no problem. Unfortunately, it's too late because i need to get the cookie info before the component be called. So i need to get it in getInitialProps

Here what i've already tried without success :

static async getInitialProps () { const res = await axios.get('http://mybackend/getCookie'); return {data : res.data} } //res.data = undefined

the purpose is to check the user authentication status in firebase in order to render the appropriate page

Any suggestion ? thanks

[AugustinLF]

I'm not totally sure what you mean here, because based on your example, you seem to simply query your back-end for some data, if the returned value is undefined, I don't see the link with cookies :/

However, if you'd like to read the cookies from your page (and not from your API), there's not much really specific to Next.

Client side, any library that lets you read cookies, such as js-cookie should work, you just have to call Cookies.get('yourCookieName').

Server-side, the req and res fields of the context object (getInitialProps's param) are the usual express res/res objects, where you can find your cookies. Using express middleware's cookie-parser might make your life easier!

[jackmatrix]

Thanks for replying.

First i set a httpOnly cookie so i have no access from client side.

Second I don't have any problem to get the cookie anywhere else. Only in the getInitialProps.

I already use cookies middleware in express.

I don't know why getInitProps give me an empty object when i request for my cookie whereas constructor and componentDidMount send it successfully.

[AugustinLF]

The first call of getInitialProps is done server-side, could that be the reason of your problem? Server-side, the only way to access the cookies is with the req object. I'm sorry if that's not helpful to you, I never go beyond a simple use case of cookies, and I'm not sure I understand well your set up :/

[davidnguyen179]

you can use cookie-parser package. Use it in server.js as follows:

app.prepare().then(() => {
  const server = express();
  server.use(cookieParser());
});

index.js

  static async getInitialProps(context) {
    const { store, isServer, query, req } = context;
    if (isServer) {
      if (isServer) {
         console.log(req.cookies);
      }
    }
    return { isServer };
  }

[jackmatrix]

I definitely can't access to the cookies with req.cookies ( it return empty value). You should try by yourself.

One little more prrecision i am runnig in dev mode (localhost) . Maybe the issue is related to this .

However i definitely can'y access my cookies in the getInitialProps which is a crucial step for my app development. I don't know how to solve this problem, i can't do anything more without this.

[canadaduane]

"By design, domain names must have at least two dots; otherwise the browser will consider them invalid."

https://stackoverflow.com/questions/1134290/cookies-on-localhost-with-explicit-domain#1188145

[jackmatrix]

I could finally solve this issue. the problem was inside the getinitialprops rather than making req.cookies, i had to do req.headers.cookie and all are working just as expected. Thanks for help.