Creating the Login page
The first step of initiating the authentication workflow for our application is to request a JWT from the backend by performing a login request. For this purpose, in our task manager application, we’ll create a login page where users will be redirected whenever they don’t have an active session or their token has expired. The resulting page should look like this when rendered:
Figure 8.1 – A screenshot of the rendered Login page
To implement the component, let’s create a new file in the src/auth
directory called Login.js
, which will contain its source code. Let’s analyze some of the relevant parts (you can find the complete code in this book’s GitHub repository at https://github.com/PacktPublishing/Full-Stack-Quarkus-and-React/blob/main/chapter-08/src/main/frontend/src/auth/Login.js):
export const Login = () => {
const dispatch = useDispatch();
const navigate...