Redirect on Login and Logout

To complete the login flow we are going to need to do two more things.

  1. Redirect the user to the homepage after they login.
  2. And redirect them back to the login page after they logout.

We are going to use the history.push method that comes with React Router v4 using react hooks. Make sure React Router's version is 5.1.+

npm upgrade react-router-dom @types/react-router-dom

Redirect to Home on Login

Since our Login component is rendered using a Route, it adds the router props to it. So we can redirect using the this.props.history.push method.

history.push("/");
Update the `handleSubmit` method in `src/containers/Login.tsx` to look like this:
async function handleSubmit(event) {
event.preventDefault();
try {
await Auth.signIn(email, password);
props.userHasAuthenticated(true);
props.history.push("/");
} catch (e) {
alert(e.message);
}
}

Now if you head over to your browser and try logging in, you should be redirected to the homepage after you've been logged in.

React Router v4 redirect home after login screenshot

Redirect to Login After Logout

Now we'll do something very similar for the logout process. However, the App component does not have access to the router props directly since it is not rendered inside a Route component. To be able to use the router props in our App component we will need to use the withRouter Higher-Order Component (or HOC). You can read more about the withRouter HOC here. This is quite unconfortable in Typescript and withRouter will be deprecated at some point. Therefore the prefered way is to use the useHistory hook.

To use this HOC, we'll change the way we export our App component.

Add the following import and then the hook to the top of the App component in `src/App.tsx`:
import { useHistory } from "react-router-dom";
let history = useHistory();
Add the following to the bottom of the `handleLogout` function in our `src/App.tsx`.
history.push("/login");

So our handleLogout method should now look like this.

async function handleLogout() {
await Auth.signOut();
userHasAuthenticated(false);
history.push("/login");
}

This redirects us back to the login page once the user logs out.

Now if you switch over to your browser and try logging out, you should be redirected to the login page.

You might have noticed while testing this flow that since the login call has a bit of a delay, we might need to give some feedback to the user that the login call is in progress. Let's do that next.