Persisting User Login
In this lesson, we're going to persist the login information
Persisting user login#
Although we see the user logged in, if we refresh the page, we will see login again. This is because Redux stores data in memory which removes it after a refresh. Now what we can do is; inside userSlice, we can create a new reducer function which will be called getUser. This function will just check if the token is still there inside localStorage. If it is, it will save it back to redux which will keep the user logged in. Let's create the reducer function now; const token is equal to localStorage.getItem which is user. Now we will check if the token exists, then we will store it to state dot user. To store it back, we will have to parse it back.
We can now export this function and use it inside App.tsx file. We will dispatch the getUser function. Before we go back to the browser, let's push the user to the profile page when they log in or register. Going back to the Signin component, let's use history which will be equal to useHistory provided by react-router-dom. Inside the try block, we can use history.push and push them to the profile page. Let's implement the same inside Register component, and let's use history equal to useHistory. Let's import it and finally use history.push, to the profile page.
client/src/redux/slice/userSlice.ts
import { createAsyncThunk, createSlice, isAnyOf } from "@reduxjs/toolkit";
import agent from "../../actions/agent";
import { Login, Register, User } from "../../models/user";
interface UserState {
user: User | null;
}
const initialState: UserState = {
user: null,
};
export const signInUser = createAsyncThunk<User, Login>(
"user/signin",async (data, thunkAPI) => {
try {const user = await agent.Users.login(data);
localStorage.setItem("user", JSON.stringify(user));
return user;
} catch (err: any) {
return thunkAPI.rejectWithValue({ error: err });
}
}
);
export const registerUser = createAsyncThunk<User, Register>(
"user/register",async (data, thunkAPI) => {
try {const user = await agent.Users.register(data);
localStorage.setItem("user", JSON.stringify(user));
return user;
} catch (err: any) {
return thunkAPI.rejectWithValue({ error: err });
}
}
);
export const userSlice = createSlice({
name: "user",
initialState, reducers: {signOut: (state) => {
state.user = null;
localStorage.removeItem("user");
},
getUser: (state) => {
const user = localStorage.getItem("user");
if (user) {
state.user = JSON.parse(user);
}
},
},
extraReducers: (builder) => {
builder.addMatcher(
isAnyOf(signInUser.fulfilled, registerUser.fulfilled),
(state, action) => {
state.user = action.payload;
}
);
builder.addMatcher(
isAnyOf(signInUser.rejected, registerUser.rejected),
(state, action) => {
throw action.payload;
}
);
},
});
export const { signOut, getUser } = userSlice.actions;
This page is a preview of The newline Guide to Fullstack ASP.NET Core and React