'Next.js and redux-persist; How do I persist a authenticated user across my web app?

Essentially, I am trying to persist a user across my next.js app after they're logged in i.e. upon any browser refresh it persists the data/state.

A way to do this when using redux, is to use redux-persist!

These the are the versions:

"next": "^9.0.5",
"redux-persist": "^6.0.0",
"redux": "^4.0.4",

This is my pages/index.js file.

import { connect } from 'react-redux'
import Head from '../components/head'
import HomeLayout from '../components/Home/Home.jsx'
import 'semantic-ui-css/semantic.min.css'
import '../styles/styles.scss'

import {bindActionCreators} from 'redux'
import { logInUser } from '../store/index'


class Home extends React.Component {
   static getInitialProps ({  isLoggedIn }) {

    return {isLoggedIn}
  }

 componentDidMount() {
  logInUser()
 }

    render() {
        const { isLoggedIn } = this.props
        console.log("isLoggedIn ", isLoggedIn)
         return (
          <div>
           <Head title = 'Home' />
           <HomeLayout isLoggedIn = { isLoggedIn }/>
          </div>
         )
    }
}

const mapDispatchToProps = { logInUser }
export default connect(state =>
  state,
  mapDispatchToProps,
)(Home)

And this is my store

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web

import { createLogger } from 'redux-logger'
import thunkMiddleware from 'redux-thunk';

/* initial state */
var startState = { isLoggedIn: false }

/* action types */
export const actionTypes = {
    IS_LOGGED_IN: 'IS_LOGGED_IN'
}

/* reducer(s) */
export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'IS_LOGGED_IN':
            return Object.assign({}, state, {
                isLoggedIn: action.isLoggedIn
            })
        default:
            return state
    }
};

/* actions */
export const logInUser = () => {
    return { type: actionTypes.IS_LOGGED_IN, isLoggedIn: true, }
}

const persistConfig = {
    key: 'root',
    storage,
    // whitelist: ['exampleData'] // place to select which state you want to persist
}

const persistedReducer = persistReducer(persistConfig, reducer)

// create a store
export const initializeStore = (initialState = startState) => {
    return createStore(
        persistedReducer,
        initialState,
        composeWithDevTools(applyMiddleware(
            thunkMiddleware,
            createLogger({ collapsed: true })
        ))
    )
}

Any help would be appreciated!

UPDATE:

Also wanted to add my logger output from redux:

Strangely the action is not getting fired? The payload seems to still be false?

Solution 1:^[1]

Redux Persist sometimes works strangely in the server-side rendering. Maybe there is a problem with the persisted reducers. The actions and reducers seem good to me. I was in the same situation as you. So I wrote a boilerplate example of this. So

https://github.com/fazlulkarimweb/with-next-redux-wrapper-redux-persist

There are no official examples from the Next community for this for now. I think people who are trying to find a solution will be helped by this boilerplate.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Md Fazlul Karim

'Next.js and redux-persist; How do I persist a authenticated user across my web app?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]