Step 2 – Implement the UserDetailsService<\/strong><\/h4>\nCreate a class called MyUserDetailsService that implements UserDetailsService.<\/p>\n
Override the loadUserByUsername and update the UserRepository<\/p>\n
You will also need to throw an exception is the user is null.<\/p>\n
Finally return a UserPrincipal<\/em>(create in Step 3)<\/p>\n <\/p>\n
Step 3 – Implement UserDetails, Update the Controller and Service<\/strong><\/h4>\nCreate a class UserPrincipal that implements UserDetails.<\/p>\n
Add a field User in and add a constructor<\/p>\n
Also ensure that the getAuthorities() method returns as shown below:<\/p>\n
return<\/span> Collections.<\/span>singleton<\/span>(<\/span>new<\/span> SimpleGrantedAuthority(<\/span>\"USER\"<\/span>));<\/span>\r\n<\/pre>\n <\/p>\n
Step 4 – Configure CORS<\/strong><\/h4>\nWe would have to configure Cross Origin Resource Sharing (CORS)\u00a0 to allow access from requests coming from our React application.<\/p>\n
Create a CorsConfigurationSource bean as shown below.<\/p>\n
@Bean<\/span>\r\nCorsConfigurationSource corsConfigurationSource<\/span>()<\/span> {<\/span>\r\n CorsConfiguration configuration =<\/span> new<\/span> CorsConfiguration();<\/span>\r\n configuration.<\/span>setAllowedOrigins<\/span>(<\/span>List.<\/span>of<\/span>(<\/span>\"http:\/\/localhost:3001\"<\/span>));<\/span>\r\n configuration.<\/span>setAllowedMethods<\/span>(<\/span>List.<\/span>of<\/span>(<\/span>\"GET\"<\/span>,<\/span> \"POST\"<\/span>,<\/span> \"PUT\"<\/span>,<\/span> \"DELETE\"<\/span>));<\/span>\r\n configuration.<\/span>setAllowCredentials<\/span>(<\/span>true<\/span>);<\/span>\r\n configuration.<\/span>addAllowedHeader<\/span>(<\/span>\"*\"<\/span>);<\/span>\r\n UrlBasedCorsConfigurationSource source =<\/span> new<\/span> UrlBasedCorsConfigurationSource();<\/span>\r\n source.<\/span>registerCorsConfiguration<\/span>(<\/span>\"\/**\"<\/span>,<\/span> configuration);<\/span>\r\n return<\/span> source;<\/span>\r\n}<\/span>\r\n<\/pre>\n <\/p>\n
Next, add this to the SecurityFilterChain<\/p>\n
.<\/span>cors<\/span>(<\/span>Customizer.<\/span>withDefaults<\/span>())<\/span>\r\n<\/pre>\n <\/p>\n
Step 5 –\u00a0 Create New User and Test the Login<\/strong><\/h4>\nUsing Postman client, make a POST request to the \/register, specifying the user details in the request body. No Authentication is used.<\/p>\n
Then make a GET request to the \/products endpoint and using Basic Authentication, enter the username and password<\/span><\/p>\nNow, we need to specify the username and password in axios<\/em> get request. This is specified as the second parameter to the get()<\/em> method.<\/p>\n <\/p>\n
Step 6 – Setup AxiosConfig in React Application<\/strong><\/h4>\nThis means we would place the user credentials in a .env file and then configure our application to read the environment variables. Follow the steps below:<\/p>\n
1. Create a .env file and place the following inside it. Replace the yourusername<\/em><\/strong> and yourpassword<\/em><\/strong> accordingly<\/p>\nREACT_APP_API_USERNAME=<\/span>yourusername\r\nREACT_APP_API_PASSWORD=<\/span>yourpassword\r\n<\/pre>\n <\/p>\n
2. Create a file called axiosConfig.js<\/em> and this would be the content<\/p>\nimport<\/span> axios from 'axios'<\/span>;\r\n\r\nconst<\/span> axiosInstance =<\/span> axios.create({\r\n \/\/ You can also add default headers here<\/span>\r\n headers:<\/span> {\r\n 'Content-Type'<\/span>:<\/span> 'application\/json'<\/span>\r\n }\r\n});\r\n\r\naxiosInstance.interceptors.request.use(\r\n (config) =><\/span> {\r\n const<\/span> username =<\/span> REACT_APP_API_USERNAME;\r\n const<\/span> password =<\/span> REACT_APP_API_PASSWORD;\r\n if<\/span> (username &&<\/span> password) {\r\n config.auth =<\/span> {\r\n username:<\/span> username,\r\n password:<\/span> password\r\n };\r\n }\r\n return<\/span> config;\r\n },\r\n (error) =><\/span> {\r\n return<\/span> Promise.reject(error);\r\n }\r\n);\r\n\r\nexport<\/span> default<\/span> axiosInstance;\r\n<\/pre>\n <\/p>\n
3. Since we have setup the config, you can now replace all the use of axios<\/em> with axiosInstance<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"In this tutorial, you will learn how to add Spring Security to your Spring Boot REST API and require authentication to be able to access … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-2011","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2011","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=2011"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2011\/revisions"}],"predecessor-version":[{"id":2179,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2011\/revisions\/2179"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=2011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=2011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=2011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}