{"id":2013,"date":"2024-09-20T12:00:00","date_gmt":"2024-09-20T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/react-springboot-authentication-part-2-user-registration-flow\/"},"modified":"2026-08-28T11:39:34","modified_gmt":"2026-08-28T09:39:34","slug":"react-springboot-authentication-part-2-user-registration-flow","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/react-springboot-authentication-part-2-user-registration-flow\/","title":{"rendered":"React SpringBoot Authentication \u2013 Part 2 (User Registration Flow)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Learn React SpringBoot Authentication by implementing user registration, login, password handling, sessions, and authentication components in React and Spring Boot.<\/em><\/p>\n\n\n<h3>TL;DR<\/h3>\n<ul>\n<li>\n<p><strong>React SpringBoot Authentication<\/strong> connects a React application to Spring Boot authentication endpoints for user registration and login.<\/p>\n<\/li>\n<li>\n<p>Create a <strong>LoginRequest<\/strong> model and update the User model to store a password hash.<\/p>\n<\/li>\n<li>\n<p>Implement an authentication service that validates the user&#8217;s username and password.<\/p>\n<\/li>\n<li>\n<p>Create <strong>Registration and Login components<\/strong> in React to send authentication requests to the Spring Boot API.<\/p>\n<\/li>\n<li>\n<p>Use a <strong>session<\/strong> to maintain the authenticated user&#8217;s state after a successful login.<\/p>\n<\/li>\n<\/ul>\n<p>This is Part 2 of the tutorial on How to a authenticate from React application to Spring Boot API.<\/p>\n<p>In this part you will actually implement user authentication in Spring Boot. Then you will see how to store user credentials in in React using local storage (session or cookies).<\/p>\n<p>We would cover the following:<\/p>\n<ol>\n<li><a href=\"#t1\">Add the LoginRequest Model and Update the User Model<\/a><\/li>\n<li><a href=\"#t2\">Write the Authenticate Service Method<\/a><\/li>\n<li><a href=\"#t3\">Write the Login Controller Method<\/a><\/li>\n<li><a href=\"#t4\">Implement the Registration and RegistrationSuccessful Components<\/a><\/li>\n<li><a href=\"#t5\">Implement the Login and LoginSuccessful Components<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t1\">1. Add the LoginRequest Model and update the User model<\/strong><\/h4>\n<p>The LoginRequest would be used to hold the username and password coming from the request body of a login request. I would just have fields:<\/p>\n<ul>\n<li>id<\/li>\n<li>username<\/li>\n<li>password<\/li>\n<\/ul>\n<p>We would also add the passwordHash field to the user model and this is going to be a string field<\/p>\n<p>Update the addUser method of the UserService so that when a new user is being saved, the passwordHash field is also set.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t2\">2. Write the Authenticate Service Method<\/strong><\/h4>\n<p>Write the authenticate method in the UserService. This method would take a LoginRequest object (username and password) and checks if the values are valid<\/p>\n<p>The authenticate method placed in the UserService and is given below:<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #333399; font-weight: bold;\">boolean<\/span> <span style=\"color: #0066bb; font-weight: bold;\">authenticate<\/span><span style=\"color: #333333;\">(<\/span>String username<span style=\"color: #333333;\">,<\/span> String password<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n    User user <span style=\"color: #333333;\">=<\/span> userRepository<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">findByUsername<\/span><span style=\"color: #333333;\">(<\/span>username<span style=\"color: #333333;\">);<\/span>\n\n    <span style=\"color: #008800; font-weight: bold;\">if<\/span> <span style=\"color: #333333;\">(!<\/span>user<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getUsername<\/span><span style=\"color: #333333;\">().<\/span><span style=\"color: #0000cc;\">equals<\/span><span style=\"color: #333333;\">(<\/span>username<span style=\"color: #333333;\">)){<\/span>\n        <span style=\"color: #008800; font-weight: bold;\">throw<\/span> <span style=\"color: #008800; font-weight: bold;\">new<\/span> <span style=\"color: #0066bb; font-weight: bold;\">UsernameNotFoundException<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"User not found in the database\"<\/span><span style=\"color: #333333;\">);<\/span>\n    <span style=\"color: #333333;\">}<\/span>\n\n    <span style=\"color: #008800; font-weight: bold;\">if<\/span><span style=\"color: #333333;\">(<\/span>user<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getPasswordHash<\/span><span style=\"color: #333333;\">().<\/span><span style=\"color: #0000cc;\">equals<\/span><span style=\"color: #333333;\">(<\/span>bCryptPasswordEncoder<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">encode<\/span><span style=\"color: #333333;\">(<\/span>password<span style=\"color: #333333;\">)))<\/span> <span style=\"color: #333333;\">{<\/span>\n        <span style=\"color: #008800; font-weight: bold;\">throw<\/span> <span style=\"color: #008800; font-weight: bold;\">new<\/span> <span style=\"color: #0066bb; font-weight: bold;\">BadCredentialsException<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"The password is incorrect\"<\/span><span style=\"color: #333333;\">);<\/span>\n    <span style=\"color: #333333;\">}<\/span>\n    <span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"color: #008800; font-weight: bold;\">true<\/span><span style=\"color: #333333;\">;<\/span>\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t3\">3. Write the Login Controller Method<\/strong><\/h4>\n<p>You will write the controller method for <em>\/login<\/em>.<\/p>\n<p>This method would receive the LoginRequest in the request body and call the authenticate method. At successful authentication it returns an Ok status code<\/p>\n<p>The <em>login()<\/em> method is given below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #555555; font-weight: bold;\">@PostMapping<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"\/login\"<\/span><span style=\"color: #333333;\">)<\/span>\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> ResponseEntity<span style=\"color: #333333;\">&lt;<\/span>String<span style=\"color: #333333;\">&gt;<\/span> <span style=\"color: #0066bb; font-weight: bold;\">login<\/span><span style=\"color: #333333;\">(<\/span><span style=\"color: #555555; font-weight: bold;\">@RequestBody<\/span> LoginRequest loginRequest<span style=\"color: #333333;\">,<\/span> HttpSession session<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n    <span style=\"color: #008800; font-weight: bold;\">try<\/span> <span style=\"color: #333333;\">{<\/span>\n        <span style=\"color: #333399; font-weight: bold;\">boolean<\/span> isAuthenticated <span style=\"color: #333333;\">=<\/span> authenticationService<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">authenticate<\/span><span style=\"color: #333333;\">(<\/span>loginRequest<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getUsername<\/span><span style=\"color: #333333;\">(),<\/span> loginRequest<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getPassword<\/span><span style=\"color: #333333;\">());<\/span>\n        <span style=\"color: #008800; font-weight: bold;\">if<\/span> <span style=\"color: #333333;\">(<\/span>isAuthenticated<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n            session<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">setAttribute<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"user\"<\/span><span style=\"color: #333333;\">,<\/span> loginRequest<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">getUsername<\/span><span style=\"color: #333333;\">());<\/span>\n            <span style=\"color: #008800; font-weight: bold;\">return<\/span> ResponseEntity<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">ok<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"Login successful\"<\/span><span style=\"color: #333333;\">);<\/span>\n        <span style=\"color: #333333;\">}<\/span> <span style=\"color: #008800; font-weight: bold;\">else<\/span> <span style=\"color: #333333;\">{<\/span>\n            <span style=\"color: #008800; font-weight: bold;\">return<\/span> ResponseEntity<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">status<\/span><span style=\"color: #333333;\">(<\/span>HttpStatus<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">UNAUTHORIZED<\/span><span style=\"color: #333333;\">).<\/span><span style=\"color: #0000cc;\">body<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"Invalid username or password\"<\/span><span style=\"color: #333333;\">);<\/span>\n        <span style=\"color: #333333;\">}<\/span>\n    <span style=\"color: #333333;\">}<\/span> <span style=\"color: #008800; font-weight: bold;\">catch<\/span> <span style=\"color: #333333;\">(<\/span>Exception e<span style=\"color: #333333;\">)<\/span> <span style=\"color: #333333;\">{<\/span>\n        <span style=\"color: #008800; font-weight: bold;\">return<\/span> ResponseEntity<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">status<\/span><span style=\"color: #333333;\">(<\/span>HttpStatus<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000cc;\">INTERNAL_SERVER_ERROR<\/span><span style=\"color: #333333;\">).<\/span><span style=\"color: #0000cc;\">body<\/span><span style=\"color: #333333;\">(<\/span><span style=\"background-color: #fff0f0;\">\"An error occurred during login\"<\/span><span style=\"color: #333333;\">);<\/span>\n    <span style=\"color: #333333;\">}<\/span>\n<span style=\"color: #333333;\">}<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Note that this method has HttpSession as its second parameter but you don\u2019t need to worry about it as Spring would handle creating and managing sessions.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t4\">4. Implement the Registration and RegistrationSuccessful Components<\/strong><\/h4>\n<p>Create a Registration Component that would contain\u00a0 the following fields:<\/p>\n<ul>\n<li>firstname<\/li>\n<li>lastname<\/li>\n<li>username<\/li>\n<li>password<\/li>\n<li>confirmPassword<\/li>\n<\/ul>\n<p>Get the <a href=\"https:\/\/raw.githubusercontent.com\/KindsonTheGenius\/product-app-react-ui\/refs\/heads\/master\/registration-form.txt\" target=\"_blank\" rel=\"noopener\">designed form here<\/a>.<\/p>\n<p>The markup and script for the R<span style=\"font-family: 'Source Sans Pro', Graphik, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 1.125rem;\">egistrationSuccessful component is given below:<\/span><\/p>\n<pre style=\"margin: 0; line-height: 125%;\">import React from 'react'\nimport {Typography, Container, Box } from '@mui\/material';\n\nexport default function RegistrationSuccess() {\n  return (\n    <span style=\"color: #007700;\">&lt;Container<\/span> <span style=\"color: #0000cc;\">maxWidth=<\/span><span style=\"background-color: #fff0f0;\">\"xs\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;Box<\/span> <span style=\"color: #0000cc;\">sx=<\/span><span style=\"background-color: #fff0f0;\">{{<\/span> <span style=\"color: #0000cc;\">mt:<\/span> <span style=\"color: #0000cc;\">8<\/span><span style=\"color: #ff0000; background-color: #ffaaaa;\">,<\/span> <span style=\"color: #0000cc;\">color:<\/span> <span style=\"color: #ff0000; background-color: #ffaaaa;\">'<\/span><span style=\"color: #0000cc;\">green<\/span><span style=\"color: #ff0000; background-color: #ffaaaa;\">'<\/span> <span style=\"color: #ff0000; background-color: #ffaaaa;\">}}<\/span><span style=\"color: #007700;\">&gt;<\/span>\n      <span style=\"color: #007700;\">&lt;Typography<\/span> <span style=\"color: #0000cc;\">variant=<\/span><span style=\"background-color: #fff0f0;\">\"h3\"<\/span> <span style=\"color: #0000cc;\">align=<\/span><span style=\"background-color: #fff0f0;\">\"center\"<\/span> <span style=\"color: #0000cc;\">gutterBottom<\/span><span style=\"color: #007700;\">&gt;<\/span>\n        You have successfully Registered. You can now Login\n      <span style=\"color: #007700;\">&lt;\/Typography&gt;<\/span>\n      <span style=\"color: #007700;\">&lt;Typography<\/span> <span style=\"color: #0000cc;\">variant=<\/span><span style=\"background-color: #fff0f0;\">\"h6\"<\/span> <span style=\"color: #0000cc;\">align=<\/span><span style=\"background-color: #fff0f0;\">\"center\"<\/span> <span style=\"color: #0000cc;\">gutterBottom<\/span><span style=\"color: #007700;\">&gt;<\/span>\n        <span style=\"color: #007700;\">&lt;a<\/span> <span style=\"color: #0000cc;\">href=<\/span><span style=\"background-color: #fff0f0;\">\"#\"<\/span><span style=\"color: #007700;\">&gt;<\/span>You can now Login<span style=\"color: #007700;\">&lt;\/a&gt;<\/span>\n      <span style=\"color: #007700;\">&lt;\/Typography&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;\/Box&gt;<\/span>\n    <span style=\"color: #007700;\">&lt;\/Container&gt;<\/span>\n\n  )\n}\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t5\">5. Create the Login Component<\/strong><\/h4>\n<p>The Login component would contain 2 fields, username and password.<\/p>\n<p>When the user fills and clicks on the Submit, it makes a post request to the \/login endpoint and a response of either 200(Ok) or exception is returned.<\/p>\n<p>At successful login, the user should be directed to the LoginSuccess component. You also need to create this component<\/p>\n<p>Get the <a href=\"https:\/\/raw.githubusercontent.com\/KindsonTheGenius\/product-app-react-ui\/refs\/heads\/master\/login-form.txt\" target=\"_blank\" rel=\"noopener\">markup for the Login component here<\/a>.<\/p>\n<h3>FAQs<\/h3>\n<p><strong>What is React SpringBoot Authentication?<\/strong><\/p>\n<p>React SpringBoot Authentication is the process of connecting a React frontend with a Spring Boot backend to handle user registration, login, and authentication.<\/p>\n<p><strong>What is the LoginRequest model used for?<\/strong><\/p>\n<p>The LoginRequest model holds the username and password submitted by the user during the login process.<\/p>\n<p><strong>How does Spring Boot authenticate the user?<\/strong><\/p>\n<p>The authentication service retrieves the user by username and checks the supplied password against the stored password information before allowing the login to succeed.<\/p>\n<p><strong>What components are created for registration and login?<\/strong><\/p>\n<p>The tutorial creates Registration, RegistrationSuccessful, Login, and LoginSuccess components to handle the different stages of the authentication flow.<\/p>\n<p><strong>How is the login session managed?<\/strong><\/p>\n<p>The login controller receives an HttpSession and stores the authenticated username in the session after successful authentication.<\/p>\n<h3>Final Thoughts<\/h3>\n<p>Implementing React SpringBoot Authentication requires both sides of the application to work together. Spring Boot handles the authentication logic, user information, password data, and login session, while React provides the registration and login interfaces through which users interact with the system.<\/p>\n<p>This tutorial establishes the foundation for connecting a React application to a Spring Boot authentication system. Once registration and login are working, the next step is to use that authentication state to control access to protected routes and application features.<\/p>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn React SpringBoot Authentication by implementing user registration, login, password handling, sessions, and authentication components in React and Spring Boot.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-2013","post","type-post","status-publish","format-standard","hentry","category-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=2013"}],"version-history":[{"count":2,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2013\/revisions"}],"predecessor-version":[{"id":2542,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2013\/revisions\/2542"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=2013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=2013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=2013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}