Sometimes you need to use the auth token in Next.js to get data from Back-end which is available only for a user with authorization, then get data from Redux store through the getServerSideProps.
As we know, the user’s auth token can be stored in the Cookies.
In this article you will learn how to get the Cookies and store them in the Redux store in getServerSideProps, then have the data from cookies at the first render of the client.
Note: This can be useful not only for auth token, you can use it to store any string, like the theme of the website.
Initialize Redux Store
Let’s begin with installing the libraries for Redux.
yarn add @reduxjs/toolkit react-redux next-redux-wrapper
Or
npm install @reduxjs/toolkit react-redux next-redux-wrapper
For Redux store we are going to use the structure below:
/store
// your-reducers/slices
/store/configureStore.js
configureStore.js
import { configureStore } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';
const store = configureStore({
reducer: {}, // Here goes your reducer
});
export const wrapper = createWrapper(() => store);
export default store;
Then we are going to add the store Provider.
pages/_app.js
import { Provider } from 'react-redux';
import { wrapper } from '@/store/configureStore';
export default function App({ Component, pageProps }) {
const { store, props } = wrapper.useWrappedStore(pageProps);
return (
<Provider store={store}>
<Component {...props.pageProps} />
</Provider>
);
}
Cookies
For working with cookies we are going to install cookies-next
yarn add cookies-next
Or
npm install cookies-next
Now we can use getServerSideProps in all pages with the next-redux-wrapper, let’s try it in the home page.
pages/index.js
import { getCookies } from 'cookies-next';
import { wrapper } from '@/store/configureStore';
export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req, res }) => {
const cookies = getCookies({ req, res }); // Get cookies in server side
store.dispatch({ // Dispatch GET_COOKIES action
type: 'GET_COOKIES',
payload: {
cookies, // Send the cookies in GET_COOKIES action
},
});
return {
props: {},
};
});
First, let’s make sure that the auth token exists in cookies.
import { setCookie } from 'cookies-next';
setCookie('auth_token', 'XXXXXXXXXXXXXX');
Then we will need to create an initial state for the reducer/slice, then get the auth_token from cookies for the client side.
import { getCookie } from 'cookies-next';
const initialState = {
authToken: getCookie('auth_token') || '',
};
Reducer/Slice
I have prepared 2 examples, first for reducer, and the second is for slice
Reducer
import { createReducer } from '@reduxjs/toolkit';
const auth = createReducer(initialState, (builder) => {
builder
.addCase('GET_COOKIES', (state, { payload }) => {
const { cookies } = payload;
state.authToken = cookies.auth_token;
})
.addDefaultCase((state) => state);
});
Slice
import { createSlice } from '@reduxjs/toolkit';
const auth = createSlice({
name: 'auth',
initialState,
reducers: {
// ...
},
extraReducers: {
GET_COOKIES: (state, { payload }) => {
const { cookies } = payload;
state.authToken = cookies.auth_token;
},
},
});
Conclusion
We studied the topic of using cookies in the Redux store for Next.js apps. Surely, now you can integrate the auth token storing logic in server side, that means there is no need to pass the cookies through the props for every page.
Top comments (0)