- \n
- How users are authenticated from React to SpringBoot<\/li>\n
- User login with a React form<\/li>\n
- User registration in a React form<\/li>\n
- User logout<\/li>\n
- Adding credentials to request header using interceptors<\/li>\n
- Adding and removing data from local storage (cookies or session variable)<\/li>\n<\/ul>\n
Content<\/strong><\/p>\n
- \n
- The User Registration Flow<\/a><\/li>\n
- The User Login Flow<\/a><\/li>\n
- Accessing Protected Resources<\/a><\/li>\n
- User Logout Flow<\/a><\/li>\n<\/ol>\n
Here are the Step below:<\/p>\n
1. User Registration Flow<\/strong><\/h4>\n
- \n
- User fills and submits the registration form (Sign Up form).<\/li>\n
- Registration data (firstname, lastname, username and password) is sent via the request body to the \/register endpoint.<\/li>\n
- The UserRepository saves the data to the Users table in the database<\/li>\n
- A\u00a0 registration success response with a status code of 200(Ok) or 201(created is sent back to React<\/li>\n
- The Registration page redirects to a RegistrationSuccessful page with a link to the login page<\/li>\n
- User clicks on the link to go back to the login page<\/li>\n<\/ul>\n
<\/p>\n
2. User Login Flow<\/strong><\/h4>\n
Now that the user has been registered:<\/p>\n
- \n
- he now has a username and password to be able to login. Here are the steps:<\/li>\n
- User enters his username and password to the login form<\/li>\n
- The username and password is send via the Request body to the \/login endpoint<\/li>\n
- The authenticate function is called which checks the user details against the database record<\/li>\n
- If authentication is successful, an authentication successful message is sent back with a 200(ok) status code<\/li>\n
- The user credentials is saved to local storage (cookie or session storage)<\/li>\n
- (Optionally) A global state called isUserAuthenticated is set to true.<\/li>\n<\/ul>\n
<\/p>\n
3. Accessing Protected Resources<\/strong><\/h4>\n
Since the user is now logged in,<\/p>\n
- \n
- he now tries to access the protected page which should display a list of products<\/li>\n
- The page triggers an effect hook which makes a request to the \/products endpoint<\/li>\n
- The interceptor intercepts this request, checks for the user credentials in the local storage, retrieves and attaches this credential to the request before it is sent<\/li>\n
- List of products is received as a response and then displayed on the page.<\/li>\n<\/ul>\n
<\/p>\n
4. User Logout Flow<\/strong><\/h4>\n
- \n
- User clicks on the logout button.<\/li>\n
- The user credentials is removed from the local storage (session or cookie)<\/li>\n
- Set the isUserAuthenticated global state to false<\/li>\n<\/ul>\n
<\/p>\n
- The User Login Flow<\/a><\/li>\n
- The User Registration Flow<\/a><\/li>\n
![\"\"](\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/React-Spring-Boot-Authentication-Workflow-1024x548.jpg\")
<\/a>