Log out
Final step: log out of the application. This is done through the logout button on the same modal as the My information
and My doctors
.
Let's start by adding the logout logic to the src/services/api.ts file.
src/services/api.ts
//...
export const logout = createAsyncThunk('medTechApi/logout', async (payload, {getState, dispatch}) => {
dispatch(revertAll());
dispatch(resetCredentials());
});
export const api = createSlice({
name: 'medTechApi',
initialState,
reducers: {
setEmail: (state, {payload: {email}}: PayloadAction<{ email: string }>) => {
state.email = email;
state.invalidEmail = false;
},
setToken: (state, {payload: {token}}: PayloadAction<{ token: string }>) => {
state.token = token;
state.invalidToken = false;
},
setAuthProcess: (state, {payload: {authProcess}}: PayloadAction<{ authProcess: AuthenticationProcess }>) => {
state.authProcess = authProcess;
},
setUser: (state, {payload: {user}}: PayloadAction<{ user: User }>) => {
state.user = user;
},
setRegistrationInformation: (state, {payload: {firstName, lastName, email}}: PayloadAction<{
firstName: string;
lastName: string;
email: string
}>) => {
state.firstName = firstName;
state.lastName = lastName;
state.email = email;
},
resetCredentials(state) {
state.online = false;
},
setRecaptcha: (state, {payload: {recaptcha}}: PayloadAction<{ recaptcha: string }>) => {
state.recaptcha = recaptcha;
},
},
extraReducers: builder => {
builder.addCase(startAuthentication.fulfilled, (state, {payload: authProcess}) => {
state.authProcess = authProcess;
});
builder.addCase(completeAuthentication.fulfilled, (state, {payload: user}) => {
state.user = user as User;
state.online = true;
});
builder.addCase(startAuthentication.rejected, (state, {}) => {
state.invalidEmail = true;
});
builder.addCase(completeAuthentication.rejected, (state, {}) => {
state.invalidToken = true;
});
builder.addCase(login.fulfilled, (state, {payload: user}) => {
state.user = user as User;
state.online = true;
});
builder.addCase(login.rejected, (state, {}) => {
state.invalidToken = true;
state.online = false;
});
},
});
export const {
setEmail,
setToken,
setAuthProcess,
setUser,
setRegistrationInformation,
resetCredentials,
setRecaptcha
} = api.actions;
The logout
action will reset the state of the application to its initial state. This is done by dispatching
the revertAll
(that we have added in
the Chapter 2) and resetCredentials
actions.
Now that we have the logout
action, we can add the logout button to the My information
and My doctors
modals.
src/components/EditUserModal/index.tsx
//...
const dispatch = useAppDispatch();
const handleLogout = () => {
dispatch(logout());
navigate(routes.login);
};
//...
That's it! We have now added the logout functionality to the application.