After a form submission using Redux, I am able to see the plain text password in the dev tools meta
section. Is this safe? Am I doing something wrong when passing the password down to the reducer? How can I make this more secure?
So in my userSlice I am creating an Async Thunk
that accepts user input then grabs the user from my server/database.
export const setUserAsync = createAsyncThunk(
'user/setUserAsync',
async (payload, { rejectWithValue }) => {
try {
const response = await axios.post('/auth/login', payload);
const { token, user } = response.data;
console.log(response);
localStorage.setItem('user', JSON.stringify(user));
localStorage.setItem('token', token);
return user;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
which works as intended. I am then calling the fulfilled
reducer to set
the user state.
[setUserAsync.fulfilled]: (state, action) => {
state.user = action.payload;
state.isLoggedIn = !!action.payload;
}
but in my dev tools I am seeing the following which is plain text of the password I input, in this case it is wrong, but when it's right it shows it just the same.
I don't think you need to be concerned. The production bundle of your app won't have the redux devtools enabled so the password can't linger there. And if you're using proper TLS (see https://security.stackexchange.com/questions/110415/is-it-ok-to-send-plain-text-password-over-https ), the password remains encrypted.