How can I manage authentication tokens in a React-Redux app?

How can I manage authentication tokens in a React-Redux app?

You can manage authentication tokens in a React-Redux app by storing them in the Redux store or local storage.

What are the pros and cons of using local storage for tokens?

Using local storage is convenient for persistence, but it can expose tokens to XSS attacks. Redux store is more secure.

How do I implement token storage in Redux?

You can create a Redux slice to handle authentication state and use middleware to manage token storage and retrieval.

Can you show me a code example?

Sure! Here's a simple example:

const authSlice = createSlice({
  name: 'auth',
  initialState: { token: null },
  reducers: {
    setToken(state, action) {
      state.token = action.payload;
      localStorage.setItem('token', action.payload);
    },
    clearToken(state) {
      state.token = null;
      localStorage.removeItem('token');
    }
  }
});

This slice manages the token and stores it in local storage.