Next.js SSR store access token without using redux

Question

I've implemented a server-side rendering application using NextJS and ReactJS.

When the user login into the application, I want to store some of the user details like access token, refresh token, email address and use it throughout the application. (Kind of storing it globally like how we use local storage on Client side rendering applications)

I'm not using REDUX, so I would like to know the best way of storing those user details without making use of REDUX.

What are the different ways to achieve this while working with SSR?

lipp · Answer 1 · 2018-10-26T10:10:41.453

I'd recommend to use a session cookie. This is available in next.js getInitialProps method.

static async getInitialProps ({req}) {
  console.log(req.headers.cookies) // depending on your server middlewares / config, this is available
}

LocalStorage or SessionStorage is not available in SSR, whereas the cookies are always attached to the request. I'd further recommend to make the cookie secure (only served via https) and protect from JS client / browser access with http-only.

When using express-session using cookies/sessions gets more convenient.

static async getInitialProps ({req}) {
  console.log(req.session) // with express session
}

Which is usually a good approach to deal go with cookies or session? — Harsh Makadia, Oct 31 '18 at 04:15

score 0 · Answer 2 · answered Oct 29 '21 at 16:47

0

> import cookie from 'cookie'
> 
> export function parseCookies(req) {   return cookie.parse(req ?
> req.headers.cookie || "" : document.cookie); }

answered Oct 29 '21 at 16:47

Santosh Karanam

1,077
11
23

3

Your answer could be improved with additional supporting information. Please "edit" to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center: https://stackoverflow.com/help/how-to-answer – nima Oct 29 '21 at 18:19

score 0 · Answer 3 · answered Oct 29 '21 at 21:32

I recently worked on something similar. Typically, you can store it in storage or cookies. But with nextJS, you would want to make use of it in both client and server side methods such as getServerSideProps. That way you can early detect if user is logged in, make API calls before page is rendered (making use of nextJS SSR).

Refer this discussion which clearly mentions that cookie is the way. This is what the collaborator at NextJS says:

If you want to have data available on both the client and server you could use cookies.

This makes sense. Remember, your methods like getServerSideProps do not run on the client and do not have access to these objects : document,window etc..

When login is done in client you can set cookie like : document.cookie = "cookiename=hello". Here is an SO answer

In getServerSideProps(context), make use of the param context, it gives you access to the request like context.req. Then you can get cookie from the request object, using a cookie parser module or context.req.headers.cookie.

Next.js SSR store access token without using redux

3 Answers3