4

I have a next js app that is server side rendered and I am trying to implement authentication using JWT token.

However, I get the following error when I try to read the cookie from the client cookie:

Warning: Did not expect server HTML to contain a <header> in <div>.
    at div
    ...error stack

This is the code I am running when the root route renders in my app:

const cookies = Cookie.getCookie() // {jwt_teken: 'token'};
const isUserAuthenticated = !!cookies.jwt_token;
t97
  • 721
  • 1
  • 7
  • 19
  • Can you show the rest of the component where that code is located? The issue happens because the HTML rendered on the server differs from the one rendered on the client. You may need to apply the changes on the client using `useEffect`/`useState`. – juliomalves Apr 07 '21 at 23:05
  • To easily debug this kind of errors, open your browser devtools in the network tab: the first response when loading the page is the prerendered HTML. Here I guess you'll see an error, because you are trying to get a client cookie during SSR. You need to wrap this with a `useEffect` indeed, see for redirection https://stackoverflow.com/a/58182678/5513532 – Eric Burel Apr 08 '21 at 13:01

0 Answers0