🔐Manage Auth State

Using redux to manage auth state across the React app.

We can use Redux or React Context to set up a global / app-wide state. Since the authentication state is not in any way going to affect app performance, we can use React Context here. But I prefer using Redux here.

Redux for Auth State

We will use the @reduxjs/toolkit to manage our app wide state. So first we need to install all the dependencies.

Installing dependencies

yarn add @reduxjs/toolkit react-redux

Creating the authSlice

Now, we create the authSlice to create our reducers, provider default actions and manage state in our Redux store.

auth-slice.js

import {createSlice} from '@reduxjs/toolkit';

const initialState = {
  token: '',
  isLoggedIn: false,
}

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    login(state, action) {
      state.token = action.payload,
      state.isLoggedIn = !!action.payload,
    }
    logout(state, action) {
      state.token = null,
      state.isLoggedIn = false,
    }
  }
})

export default authSlice.reducer;
export const AuthActions = authSlice.actions;

Connect Reducers to Store

Now, we need to attach this reducer to the central Redux store.

src/store/index.js

import {configureStore} from '@reduxjs/toolkit';
import AuthSliceReducer from './auth-slice';

export const store = configureStore({
  reducer: {
  auth: AuthSliceReducer,
})

Provide Store to App

Now after creating the store and connecting the reducers to it, we need to provide the store as an app-wide state.

src/index.js

import {store} from './store/index';
import {Provider} from 'react-redux';
//...
//...

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root');
);

Using Actions to Login

Now we have all the things in place, it is time to use the Redux store actions provided by the authSlice slice.

use-http.js

import {AuthActions} from './store/auth-slice';
import {useDispatch} from 'react-redux';
//...
const useHttp = () => {
const dispatch = useDispatch();
//...
//...
  const sendRequest = useCallback(
    async(reqConfig) => {
    //...
    try {
    //...
    //...
    dispatch(AuthActions.login(data.idToken));
    } catch(err) {/*...*/}
  }, [dispatch]);
  
  return {/*...*/}
}

Verifying Login Success

After successful sign-up, we can check if the login is successful or not using the Redux DevTool in the browser. It gives us the app-wide auth state, which contains the current logged-in user's authentication tokenas well as the state specifying if the use has logged in, which is a boolean value [isLoggedIn].

After a successful login, we can see the following changes in the Redux DevTool:

App-wide authentication state values in the Redux DevTool.