Spring Security - User Registration, Authentication and Authorization using MySQL and Thymeleaf

in this video I will show you how to implement the user registration authentication and authorization using spring boot spring MVC Spring Security mySQL database and time Leaf then in the next video I will show you how to implement the role based authorization you can find the video link in the description first let's create a new spring boot application so we can type spring initializer let's go to the first link then here let's select Maven let's select the latest version of spring boot then let's provide the group so here we can type com. BMT for example let's provide the name of the application we can call it my store then let's add the dependencies so the first dependency is spring web then we will connect to my SQL so we need the MySQL driver also we will connect to the database using spring GPA so here let's type GPA and let's add this dependency and to validate the submitted data we need the validation dependency then we need time leaf and finally we need Spring Security now let's download the application so I will save it on the desktop now we need to extract this ZIP file and we need to open it using an IDE I will open it using Eclipse then we need to configure the application to connect to the database so let's go to the resources folder and let's open this file application. properties then we need to add these properties so this is the driver name this is the URL of the database so we will connect to a database called DB1 of course you can choose any name then this is the username I don't have any password and we can use this optional property so it allows us to display the SQL queries on the console and using this property we will update the database each time we update our entity models so now we need to create this database so here I will use examp and I can connect to my SQL using PHP my admin then let's create a new database and let's call it DB1 now let's create a new controller so let's add a new class and let's create it in the controller package let's call it home controller so this is a controller we need to annotate it with a controller annotation then let's define two routes so this is the root route and it will be accessible using the get method and it will return the index page so later we need to create the file index.html then here we have the/ contact route it will be accessible using the get method and it will return the file contact. HTML that we need to create let's import this annotation then let's create the file index.html we need to create it in the templates folder so I will create this file using bootstrap so let's go to the browser and here we can type bootstrap let's go to the first link then docs and let's copy this source code that includes bootstrap CSS and JavaScript from the CDN let's paste it here let's change the title of the window so here we can write best store for example and let's display the title of the page into a container then let's create the file contact. HTML let's copy the source code from index.html let's delete the H1 element and let's replace it with this div that contains the title contact and here we have a link that will take us to the root of the application now let's save all the files and let's run the application so let's go to the main file which is my store application that contains the main method then let's make a right click then run as then Java application so now the application is running correctly and here we can see that we have this password so this password corresponds to the username user and also we can see that the application is running at this port number now let's go to the browser and here let's type Local Host colum 880 but here we can see that we are redirected to the login page this is because by default all the routes are protected and we need to change this configuration so let's stop the application and let's create a new class that allows us to configure the application let's create it in the package config and let's call it security config so this class will be used to configure the security of the application so we need to annotate it with two annotations which are configuration and enable web security let's import these two annotations then let's register a new Bean that allows us to configure the security filter chain so we can register a bean of type security filter chain and we can Define these security rules so the URL SL will be accessible to any user the URL SL contact will be public any URL that starts with/ store will be public the URL SL register SL login and/ logout will be public and any other URL requires the user authentication also we need to enable the login and the logout functionalities so after the successful user authentication we will redirect the user to the/ URL and after the successful user log out we will redirect the user to this URL let's import the required packages let's save the files and let's run the application again now the application is running correctly so let's go to the root URL and now we can access to this page so now let's add the nav bar so we can go back to the documentation website of bootstrap and under components let's click on naar then let's copy the source code that allows us to obtain this nav bar let's paste it in the index page so let's space state after the body then here let's write the name of the application we can write best store for example the URL will be slash then here we have the home item and the link item and also we have other items so we can keep the home item let's change the url we don't need this attribute so we can delete it we can delete the active class and let's replace it with text dark then we can rename this item so here we can write contact let's change the url so it will be/ contact and here let's let's add text dark then let's delete this drop down list so we can delete this Li element we don't need this item as well so we can delete it and let's delete this for so after this Ur element we can create another Ur element that allows us to display the register and the login buttons so in this UL element we can see that we have the register button that will take us to/ register and we have the login button that will take us to/ login now let's save the file and let's restart the application let's refresh the page and we obtain this nav bar so we can improve it a little bit by adding a bottom border and by adding some space at the left and at the right so just here in the nav element we can add this bootstrap class border button and we can use container instead of container fluid let's save the file and let's restart the application let's refresh the page so here we can see that we have some space at the left and at the right and we have this border now let's click on login and we obtain this login form so the username by default is user and the password is already displayed on the console so we can copy it from here then let's click on sign in so now we are authenticated correctly and to log out just here we can write SL lout and we obtain this page so we can click on this button and now we are LED out successfully now I will show you how to register users so first we need to create a new entity model so let's create a new class and let's create it in the models package let's call it up user so we can collect user but later we will use a class called user defined by Spring Security so to get rid of any confusion we can call this class app user then we need to add two annotations so we need to add entity and table that allows us to define the name of the table in the database so we will call the table users let's import the missing package then then let's define the different fields of this class so we need the ID which is the primary key and it is auto incremental we need the first name the last name the email that will be the unique identifier of the user so we can Define the username but in this video I will show you how to authenticate the users by email and by password so the email should be unique then we have the phone number the address the password and to implement the role based authorization we need to Define the user role then we have created at then let's create the Getters and Setters then let's create a repository that allows us to read the users from the database so let's create a new interface so here we need to create an interface and let's create it in the repositories package let's call it a user repository so this interface extends the GPA repository then let's define a new method so we can create the method find by email that allows us to find a user by his email address so we don't need to implement this interface because it will be implemented by Spring GPA to allow Spring Security to find the users in the database we need to register a new service that implements the user details service interface so now let's create a new class and let's create it in the services package let's call it up user service then let's register this class so we need to annotate it with the service annotation so this class should implement the user details service interface then let's implement the method of this interface in our case we will authenticate users by email so let's change the name of this parameter and let's call it email then we need to find the users in the database so we can use our repository which is up user repository so we can request it from the application then we need to find the user having this email address so we can call AO which is our repository. findind by email and this is the email address and then we will obtain uh user which is of type up user then let's check if we found a user having this email address or not so if up user is not null this means that we found a user having this email address in this case we can create a spring user which is equal to user. with username this is the email address which is considered as the username by Spring Security and then we will set the user password we will set the user and then we will create this spring user and we will return it let's import the missing package so in our case we will encrypt the user password in the database that's why we need to register a beIN of type password encoder that allows Spring Security to check if the user password is valid or not so we can go to security config and here let's create a new be so we can register a b of type password encoder which is a bcrypt password encoder now we need to create a new model that allows us to read the submitted data of the register form so let's create it in the models package and let's call it register DTU then let's create the different fields of this class so we need the first name which is required we need the last name which is required we need the email address which is required and it should have the email address format then we have the phone number which is optional we have the address which is optional we have the password that should be at least six characters and if we don't respect this constraint then we can display this error message then here we have the confirm password then let's create the Getters and Setters now let's save all the files and let's create a new controller that allows us to register users so let's create it in the controllers package but here we can see that I call this package controller I will just rename it and let's call it controllers now let's create a new controller and let's call it account controller so this is a controller so we need to annotate it with the controller annotation then we need to request the appuser repository from the application so just here we can use AWI then let's create a new router that allows us to display the register form so we can create the route / register that will be accessible using the get method here we have the register method that requires a model that allows us to send the data to the page so in this model we will add an object of type register dto that we need to associate to the register form now let's create the page register. HTML so let's create it in the templates folder then let's copy the source code from the file contact. HTML then let's delete this div and let's replace it with a Bo row so in this row we have one column that will be displayed in the center of the page and we have rounded border then we have the title of the page which is register then we have this horizontal separator then we need to create our form so this form will be submitted using the post method and it will be Associated to the register dto model that we defined in the controller so here we can see that we have this register dto model then we have this hidden input field so it is very required because it contains the csrf protection token but here we can see that we have several warnings so we have undefined attribute name th object this is because this is a Time Leaf attribute and to get rid of this warning we can just in the HTML tag we can add the following attribute and now we don't have the warnings anymore so now let's create the the first field of this form so we can create this div which is a stra pro we have a label with a text first name which is required then we have this input field that is associated to the first name field of register dto then we have this paragraph that will be displayed only if we have errors related to the first name so the text of this paragraph will be displayed using the red color and we will display the errors related to the first name field of the register dto model then let's create the other fields of the for so we can create this row that allows us to display the last name and here we have this input field that is associated to the last name field of register DTU and then here we have another row for the email address and we have this input field that is associated to the email field of reg register dto then we have another row for the phone number we have this Row for the address then we have this Row for the password so here we can see that the password is of type password like this the content of the password field will be hidden then we have another row for the confirm password so the input field is also of type password then let's create the submit button of this form so we can create this row that contains the submit button so here we can see that the type of this button is submit so it allows us to submit the form and we have the console button that will take us to the root URL of our application now let's save all the files let's restart the application so here we can see that we have a new table called users that is created in the database let's refresh the page and let's click on a register and we obtain this register form now let's create a new route that allows us to handle the submitted register form so let's go to account controller and let's create a new route so we can create the route SL register that will be accessible using the HTTP post method and in the register method we have the model that allows us to send data to the page then we have the register dto model that is the submitted data of the form so we will redate from the form and we will validate it and then the validation result will be available in this object so first let's check if the password is the same as the confirm password or not so if the submitted password of register dto is not equal to the confirm password in this case we can add an error to this object which is of type field error so it will be an error related to this model so we have here register dto and the name of the field is confirm password so the error message will be password and confirm password do not match then we need to check if the submitted email address is already used or not so we can check if we have a user having this submitted email address if app user is not null this means that the email address is already used in this case we can add an error to the result which is this object so it will be related to the email field of register dto and the error message will be email address is already used so if we have any validation error then we will return the page without creating the user account otherwise we need to create the user account so we can add this TR catch Block in the tri block we will create the user account and if we have any exception then we will add an error to the result and we can associate this error to any field we can associate it to the first name for example and you can display the error message of the exception now in the tri block we need to create the user account first we need to create this object which is of type bcrypt password encoder that allows us to encode the user password then we can create this new user so it is of type up user and we will set the first name last name email phone and address using the submitted data which is available in a register DTU by default the user role will be client then we can set the date of creating this user account to the current date and the password will be the encoded value of the submitted password then we will create the new user account then we need to clear the register form so we can add an empty register dto object to the model also we need to display a success message so we need to add this variable success to the model and its value will be true so we can copy this statement from here and let's add it to the first method but here in the first method when we display an empty register form we will set success to false now let's display a success message if success is equal to true so let's go to the register page and after the title of the page after this horizontal separator we can check if success is equal to true or not so if success is true then we will display this div which is a bootstrap alert of type success this is the success message and here we have a link that that allows the user to login now let's save all the files and let's restart the application let's click on a register and let's submit the form so here we can see that we have these validation errors now let's fill the form so I will send the first name the last name and the email address let's click on submit so here we did not lose the submitted data but we still have a validation error with the password so let's provide the password and the confirm password then submit so here we can see that we have this success message and the form is clear now let's go to the database let's click on this database then let's click on this users table and we can see that we have this new user and by default the user role is client also so we can see that the password is encrypted now let's login using the created account so let's click on login and let's fill the form then sign in and because we are authenticated successfully we can see that we are redirected to the homepage but here it is not clear if the user is authenticated successfully because we still have these two buttons so now we need to update this nav bar if the user is authenticated we will display a drop- down list plus a logout button but if the user is not authenticated we will display these two buttons so let's go to the index page and we need to display the register button and the login button only if the user is not authenticated so we need to display this UL element if the user is not authenticated so just here we can add SE authorized which is Le attribute and we will display this UL element if the user is not authenticated so to get rid of this warning just here in the HTML tag we need to add these attributes so now we don't have the warning anymore so if the user is not authenticated we will display this Ur element but if the user is authenticated we need to display a drop- down list so just here we can add this element that will be displayed only if the user is authenticated so here we have this drop down list that contains these two items also if the user is authenticated we need to display the logout button so we can add this form only if the user is authenticated so this form will be submitted using the post method to this URL / lout and here we have this input field which is hidden that contains the CSL ref protection token then we have the logout button which is displayed using the red color now let's save the file and let's restart the application now let's click on login and let's fill the form so now because we are authenticated successfully we can see that we have this drop down list and we have this log out button let's click on log out and now we have these two buttons in the next video I will show you how to create a custom login page and how to implement the RO based authorization you can find the video link in the description

Channel: BoostMyTool

Views: 2,825

Keywords:

Id: APLZUEfXXIE

Length: 29min 58sec (1798 seconds)

Published: Wed Jun 19 2024