{"id":1843,"date":"2020-10-03T07:38:51","date_gmt":"2020-10-03T07:38:51","guid":{"rendered":"https:\/\/bezkoder.com\/?p=1843"},"modified":"2024-01-03T09:45:04","modified_gmt":"2024-01-03T09:45:04","slug":"angular-spring-boot-jwt-auth","status":"publish","type":"post","link":"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/","title":{"rendered":"Angular 8 + Spring Boot: JWT Authentication with Spring Security example"},"content":{"rendered":"<p>In this tutorial, I will show you how to build a full stack Angular 8 + Spring Boot JWT Authentication example. The back-end server uses Spring Boot with Spring Security for JWT authentication and Spring Data JPA for interacting with database. The front-end will be built using Angular 8 with HttpInterceptor &#038; Form validation.<\/p>\n<p>Newer versions:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-10-spring-boot-jwt-auth\/\">Angular 10 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-11-spring-boot-jwt-auth\/\">Angular 11 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-12-spring-boot-jwt-auth\/\">Angular 12 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-13-spring-boot-jwt-auth\/\">Angular 13 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-14-spring-boot-jwt-auth\/\">Angular 14 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-15-spring-boot-jwt-auth\/\">Angular 15 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-16-spring-boot-jwt-auth\/\">Angular 16 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-17-spring-boot-jwt-auth\/\">Angular 17 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><\/p>\n<p>Related Posts:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-spring-boot-crud\/\">Angular 8 + Spring Boot + MySQL CRUD example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-spring-boot-postgresql\/\">Angular 8 + Spring Boot + PostgreSQL CRUD example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-spring-boot-mongodb\/\">Angular 8 + Spring Boot + MongoDB CRUD example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/spring-boot-jwt-auth-mongodb\/\">Spring Boot, MongoDB: JWT Authentication with Spring Security<\/a><\/p>\n<p><!--more--><\/p>\n<div id=\"toc_container\" class=\"no_bullets\">\n<p class=\"toc_title\">Contents<\/p>\n<ul class=\"toc_list\">\n<li><a href=\"#JWT_JSON_Web_Token\">JWT (JSON Web Token)<\/a><\/li>\n<li><a href=\"#Angular_8_Spring_Boot_Authentication_example\">Angular 8 Spring Boot Authentication example<\/a>\n<ul>\n<li><a href=\"#Screenshots\">Screenshots<\/a><\/li>\n<li><a href=\"#Demo\">Demo<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#Flow_for_User_Registration_and_User_Login\">Flow for User Registration and User Login<\/a><\/li>\n<li><a href=\"#Spring_Boot_038_Spring_Security_for_Back-end\">Spring Boot &#038; Spring Security for Back-end<\/a>\n<ul>\n<li><a href=\"#Overview\">Overview<\/a><\/li>\n<li><a href=\"#Technology\">Technology<\/a><\/li>\n<li><a href=\"#Project_Structure\">Project Structure<\/a><\/li>\n<li><a href=\"#Implementation\">Implementation<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#Angular_8_for_Front-end\">Angular 8 for Front-end<\/a>\n<ul>\n<li><a href=\"#Overview-2\">Overview<\/a><\/li>\n<li><a href=\"#Technology-2\">Technology<\/a><\/li>\n<li><a href=\"#Project_Structure-2\">Project Structure<\/a><\/li>\n<li><a href=\"#Implementation-2\">Implementation<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#Source_Code\">Source Code<\/a><\/li>\n<li><a href=\"#Conclusion\">Conclusion<\/a><\/li>\n<li><a href=\"#Further_Reading\">Further Reading<\/a><\/li>\n<\/ul>\n<\/div>\n<h2><span id=\"JWT_JSON_Web_Token\">JWT (JSON Web Token)<\/span><\/h2>\n<p>JWT is popular for Authentication and Information Exchange. Server encodes data into a JSON Web Token and send it to the Client. The Client saves the JWT, then every Request from Client to protected routes or resources should be attached that JWT (commonly at header). The Server will validate that JWT and return the Response.<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2019\/10\/in-depth-introduction-jwt-token-based-authentication.png\" alt=\"in-depth-introduction-jwt-token-based-authentication\" width=\"640\" height=\"460\" class=\"alignnone size-full wp-image-733 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2019\/10\/in-depth-introduction-jwt-token-based-authentication.png\" alt=\"in-depth-introduction-jwt-token-based-authentication\" width=\"640\" height=\"460\" class=\"alignnone size-full wp-image-733 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2019\/10\/in-depth-introduction-jwt-token-based-authentication.png 640w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2019\/10\/in-depth-introduction-jwt-token-based-authentication-300x216.png 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/noscript><\/p>\n<p>The big advantage of JWT (Token-based Authentication) is that we store the Token on Client side: Local Storage for Browser, Keychain for IOS and SharedPreferences for Android&#8230; So we don&#8217;t need to build another backend project that supports Native Apps or an additional Authentication module for Native App users.<\/p>\n<p>There are three important parts of a JWT: Header, Payload, Signature. Together they are combined to a standard structure: <code>header.payload.signature<\/code>.<\/p>\n<p>The Client typically attact JWT in <strong>Authorization<\/strong> header with Bearer prefix:<\/p>\n<pre><code>Authorization: Bearer [header].[payload].[signature]\r\n<\/code><\/pre>\n<p>For more details, you can visit:<br \/>\n<a href=\"https:\/\/bezkoder.com\/jwt-json-web-token\/\">In-depth Introduction to JWT-JSON Web Token<\/a><\/p>\n<h2><span id=\"Angular_8_Spring_Boot_Authentication_example\">Angular 8 Spring Boot Authentication example<\/span><\/h2>\n<p>It will be a full stack, with Spring Boot for back-end and Angular 8 for front-end. The system is secured by Spring Security with JWT Authentication.<\/p>\n<ul>\n<li>User can signup new account, login with username &#038; password.<\/li>\n<li>Authorization by the role of the User (admin, moderator, user)<\/li>\n<\/ul>\n<h3><span id=\"Screenshots\">Screenshots<\/span><\/h3>\n<p>Here are UI screenshots of our system.<\/p>\n<p>&#8211; Anyone can access a public page before logging in:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-public.png\" alt=\"angular-8-spring-boot-jwt-authentication-public\" width=\"612\" height=\"360\" class=\"alignnone size-full wp-image-1858 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-public.png\" alt=\"angular-8-spring-boot-jwt-authentication-public\" width=\"612\" height=\"360\" class=\"alignnone size-full wp-image-1858 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-public.png 612w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-public-300x176.png 300w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/noscript><\/p>\n<p>&#8211; New user signups:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-signup.png\" alt=\"angular-8-spring-boot-jwt-authentication-signup\" width=\"618\" height=\"1104\" class=\"alignnone size-full wp-image-1844 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-signup.png\" alt=\"angular-8-spring-boot-jwt-authentication-signup\" width=\"618\" height=\"1104\" class=\"alignnone size-full wp-image-1844 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-signup.png 618w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-signup-168x300.png 168w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-signup-573x1024.png 573w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/><\/noscript><\/p>\n<p>&#8211; After signup is successful, User can login:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-login.png\" alt=\"angular-8-spring-boot-jwt-authentication-login\" width=\"612\" height=\"996\" class=\"alignnone size-full wp-image-1846 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-login.png\" alt=\"angular-8-spring-boot-jwt-authentication-login\" width=\"612\" height=\"996\" class=\"alignnone size-full wp-image-1846 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-login.png 612w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-login-184x300.png 184w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/noscript><\/p>\n<p>-Loggedin User can access <strong>Profile<\/strong> page\/ <strong>User<\/strong> page:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-profile.png\" alt=\"angular-8-spring-boot-jwt-authentication-profile\" width=\"612\" height=\"452\" class=\"alignnone size-full wp-image-1847 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-profile.png\" alt=\"angular-8-spring-boot-jwt-authentication-profile\" width=\"612\" height=\"452\" class=\"alignnone size-full wp-image-1847 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-profile.png 612w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-profile-300x222.png 300w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/noscript><\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-user.png\" alt=\"angular-8-spring-boot-jwt-authentication-user\" width=\"612\" height=\"324\" class=\"alignnone size-full wp-image-1848 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-user.png\" alt=\"angular-8-spring-boot-jwt-authentication-user\" width=\"612\" height=\"324\" class=\"alignnone size-full wp-image-1848 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-user.png 612w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-user-300x159.png 300w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/noscript><\/p>\n<p>&#8211; This is UI for <strong>admin<\/strong>:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-admin.png\" alt=\"angular-8-spring-boot-jwt-authentication-admin\" width=\"612\" height=\"1028\" class=\"alignnone size-full wp-image-1849 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-admin.png\" alt=\"angular-8-spring-boot-jwt-authentication-admin\" width=\"612\" height=\"1028\" class=\"alignnone size-full wp-image-1849 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-admin.png 612w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-admin-179x300.png 179w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-admin-610x1024.png 610w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/noscript><\/p>\n<p>&#8211; If a User who doesn&#8217;t have Admin role tries to access <strong>Admin<\/strong>\/<strong>Moderator Board<\/strong> page:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-unauthorized.png\" alt=\"angular-8-spring-boot-jwt-authentication-unauthorized\" width=\"608\" height=\"589\" class=\"alignnone size-full wp-image-1850 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-unauthorized.png\" alt=\"angular-8-spring-boot-jwt-authentication-unauthorized\" width=\"608\" height=\"589\" class=\"alignnone size-full wp-image-1850 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-unauthorized.png 608w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-unauthorized-300x291.png 300w\" sizes=\"(max-width: 608px) 100vw, 608px\" \/><\/noscript><\/p>\n<h3><span id=\"Demo\">Demo<\/span><\/h3>\n<p>This is full Angular 8 + Spring Boot JWT authentication demo (with form validation, check signup username\/email duplicates, test authorization with 3 roles: Admin, Moderator, User):<\/p>\n<p><iframe class=\"lazyload\" width=\"560\" height=\"315\" data-src=\"https:\/\/www.youtube.com\/embed\/NG-BCqR1LHM?rel=0\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2><span id=\"Flow_for_User_Registration_and_User_Login\">Flow for User Registration and User Login<\/span><\/h2>\n<p>The diagram shows flow for User Registration process and User Login process.<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2019\/10\/spring-boot-authentication-jwt-spring-security-flow.png\" alt=\"spring-boot-authentication-jwt-spring-security-flow\" width=\"734\" height=\"546\" class=\"alignnone size-full wp-image-973 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2019\/10\/spring-boot-authentication-jwt-spring-security-flow.png\" alt=\"spring-boot-authentication-jwt-spring-security-flow\" width=\"734\" height=\"546\" class=\"alignnone size-full wp-image-973 lazyload\" \/><\/noscript><\/p>\n<p>I think it&#8217;s not too difficult to understand. We have 2 endpoints for authentication:<\/p>\n<ul>\n<li><code>api\/auth\/signup<\/code> for User Registration<\/li>\n<li><code>api\/auth\/signin<\/code> for User Login<\/li>\n<\/ul>\n<p>If Client wants to send request to protected data\/endpoints, a legal JWT must be added to HTTP Authorization Header.<\/p>\n<h2><span id=\"Spring_Boot_038_Spring_Security_for_Back-end\">Spring Boot &#038; Spring Security for Back-end<\/span><\/h2>\n<h3><span id=\"Overview\">Overview<\/span><\/h3>\n<p>Our Spring Boot Application can be summarized in the diagram below:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2019\/10\/spring-boot-authentication-spring-security-architecture.png\" alt=\"spring-boot-authentication-spring-security-architecture\" width=\"700\" height=\"480\" class=\"alignnone size-full wp-image-799 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2019\/10\/spring-boot-authentication-spring-security-architecture.png\" alt=\"spring-boot-authentication-spring-security-architecture\" width=\"700\" height=\"480\" class=\"alignnone size-full wp-image-799 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2019\/10\/spring-boot-authentication-spring-security-architecture.png 700w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2019\/10\/spring-boot-authentication-spring-security-architecture-300x206.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/noscript><\/p>\n<p>Let me explain it.<\/p>\n<p><strong>Spring Security<\/strong><\/p>\n<p>&#8211; <code><a href=\"https:\/\/docs.spring.io\/spring-security\/site\/docs\/current\/api\/org\/springframework\/security\/config\/annotation\/web\/configuration\/WebSecurityConfigurerAdapter.html\">WebSecurityConfigurerAdapter<\/a><\/code> is the crux of our security implementation. It provides <code><a href=\"https:\/\/docs.spring.io\/spring-security\/site\/docs\/current\/reference\/htmlsingle\/#jc-httpsecurity\">HttpSecurity<\/a><\/code> configurations to configure cors, csrf, session management, rules for protected resources. We can also extend and customize the default configuration that contains the elements below.<\/p>\n<p>&#8211; <code><a href=\"https:\/\/docs.spring.io\/spring-security\/site\/docs\/current\/reference\/htmlsingle\/#tech-userdetailsservice\">UserDetailsService<\/a><\/code> interface has a method to load User by <em>username<\/em> and returns a <code>UserDetails<\/code> object that Spring Security can use for authentication and validation.<\/p>\n<p>&#8211; <code>UserDetails<\/code> contains necessary information (such as: username, password, authorities) to build an Authentication object.<\/p>\n<p>&#8211; <code><a href=\"https:\/\/docs.spring.io\/spring-security\/site\/docs\/current\/api\/org\/springframework\/security\/authentication\/UsernamePasswordAuthenticationToken.html\">UsernamePasswordAuthenticationToken<\/a><\/code> gets {username, password} from login Request, <code>AuthenticationManager<\/code> will use it to authenticate a login account.<\/p>\n<p>&#8211; <code><a href=\"https:\/\/docs.spring.io\/spring-security\/site\/docs\/current\/reference\/htmlsingle\/#core-services-authentication-manager\">AuthenticationManager<\/a><\/code> has a <code>DaoAuthenticationProvider<\/code> (with help of <code>UserDetailsService<\/code> &#038; <code>PasswordEncoder<\/code>) to validate <code>UsernamePasswordAuthenticationToken<\/code> object. If successful, <code>AuthenticationManager<\/code> returns a fully populated Authentication object (including granted authorities).<\/p>\n<p>&#8211; <code><a href=\"https:\/\/docs.spring.io\/spring-framework\/docs\/current\/javadoc-api\/org\/springframework\/web\/filter\/OncePerRequestFilter.html\">OncePerRequestFilter<\/a><\/code> makes a single execution for each request to our API. It provides a <code>doFilterInternal()<\/code> method that we will implement parsing &#038; validating JWT, loading User details (using <code>UserDetailsService<\/code>), checking Authorizaion (using <code>UsernamePasswordAuthenticationToken<\/code>).<\/p>\n<p>&#8211; <code><a href=\"https:\/\/docs.spring.io\/spring-security\/site\/docs\/current\/api\/org\/springframework\/security\/web\/AuthenticationEntryPoint.html\">AuthenticationEntryPoint<\/a><\/code> will catch unauthorized error and return a 401 when Clients access protected resources without authentication.<\/p>\n<p><strong>Repository<\/strong> contains <code>UserRepository<\/code> &#038; <code>RoleRepository<\/code> to work with Database, will be imported into <strong>Controller<\/strong>.<\/p>\n<p><strong>Controller<\/strong> receives and handles request after it was filtered by <code>OncePerRequestFilter<\/code>.<\/p>\n<p>&#8211; <code>AuthController<\/code> handles signup\/login requests<\/p>\n<p>&#8211; <code>TestController<\/code> has accessing protected resource methods with role based validations.<\/p>\n<h3><span id=\"Technology\">Technology<\/span><\/h3>\n<p>To implement the server with concept above, we will use:<br \/>\n&#8211; Java 8<br \/>\n&#8211; Spring Boot 2.1.8.RELEASE (with Spring Security, Spring Web, Spring Data)<br \/>\n&#8211; jjwt 0.9.1<br \/>\n&#8211; PostgreSQL\/MySQL<br \/>\n&#8211; Maven 3.6.1<\/p>\n<h3><span id=\"Project_Structure\">Project Structure<\/span><\/h3>\n<p>The structure of Spring Boot back-end project is pretty complicated:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2019\/10\/spring-boot-authentication-spring-security-project-structure.png\" alt=\"spring-boot-authentication-spring-security-project-structure\" width=\"327\" height=\"738\" class=\"alignnone size-full wp-image-910 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2019\/10\/spring-boot-authentication-spring-security-project-structure.png\" alt=\"spring-boot-authentication-spring-security-project-structure\" width=\"327\" height=\"738\" class=\"alignnone size-full wp-image-910 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2019\/10\/spring-boot-authentication-spring-security-project-structure.png 327w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2019\/10\/spring-boot-authentication-spring-security-project-structure-133x300.png 133w\" sizes=\"(max-width: 327px) 100vw, 327px\" \/><\/noscript><\/p>\n<p>You can see that there are 5 packages:<\/p>\n<p><strong>security<\/strong>: we configure Spring Security &#038; implement Security Objects here.<\/p>\n<ul>\n<li><code>WebSecurityConfig<\/code> extends <code>WebSecurityConfigurerAdapter<\/code><\/li>\n<li><code>UserDetailsServiceImpl<\/code> implements <code>UserDetailsService<\/code><\/li>\n<li><code>UserDetailsImpl<\/code> implements <code>UserDetails<\/code><\/li>\n<li><code>AuthEntryPointJwt<\/code> implements <code>AuthenticationEntryPoint<\/code><\/li>\n<li><code>AuthTokenFilter<\/code> extends <code>OncePerRequestFilter<\/code><\/li>\n<li><code>JwtUtils<\/code> provides methods for generating, parsing, validating JWT<\/li>\n<\/ul>\n<p><strong>controllers<\/strong> handle signup\/login requests &#038; authorized requests.<\/p>\n<ul>\n<li><code>AuthController<\/code>: @PostMapping(&#8216;\/signin&#8217;), @PostMapping(&#8216;\/signup&#8217;)<\/li>\n<li><code>TestController<\/code>: @GetMapping(&#8216;\/api\/test\/all&#8217;), @GetMapping(&#8216;\/api\/test\/[role]&#8217;)<\/li>\n<\/ul>\n<p><strong>repository<\/strong> has intefaces that extend Spring Data JPA <code>JpaRepository<\/code>  to interact with Database.<\/p>\n<ul>\n<li><code>UserRepository<\/code> extends <code>JpaRepository<\/code><User, Long><\/li>\n<li><code>RoleRepository<\/code> extends <code>JpaRepository<\/code><Role, Long><\/li>\n<\/ul>\n<p><strong>models<\/strong> defines two main models for Authentication (<code>User<\/code>) &#038; Authorization (<code>Role<\/code>). They have many-to-many relationship.<\/p>\n<ul>\n<li><code>User<\/code>: id, username, email, password, roles<\/li>\n<li><code>Role<\/code>: id, name<\/li>\n<\/ul>\n<p><strong>payload<\/strong> defines classes for Request and Response objects<\/p>\n<p>We also have <strong>application.properties<\/strong> for configuring Spring Datasource, Spring Data JPA and App properties (such as JWT Secret string or Token expiration time).<\/p>\n<h3><span id=\"Implementation\">Implementation<\/span><\/h3>\n<p>You can find step by step to implement this Spring Boot &#8211; Spring Security App in the post:<br \/>\n<a href=\"https:\/\/bezkoder.com\/spring-boot-jwt-authentication\/\">Secure Spring Boot App with Spring Security &#038; JWT Authentication<\/a><\/p>\n<p>For working with MongoDB:<br \/>\n<a href=\"https:\/\/bezkoder.com\/spring-boot-jwt-auth-mongodb\/\">Spring Boot, MongoDB: JWT Authentication with Spring Security<\/a><\/p>\n<p>Or PostgreSQL:<br \/>\n<a href=\"https:\/\/bezkoder.com\/spring-boot-security-postgresql-jwt-authentication\/\">Spring Boot, Spring Security, PostgreSQL: JWT Authentication example<\/a><\/p>\n<h2><span id=\"Angular_8_for_Front-end\">Angular 8 for Front-end<\/span><\/h2>\n<h3><span id=\"Overview-2\">Overview<\/span><\/h3>\n<p>Our Angular 8 App can be summarized in component diagram below:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-jwt-authentication-overview.png\" alt=\"angular-8-jwt-authentication-overview\" width=\"750\" height=\"350\" class=\"alignnone size-full wp-image-1854 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-jwt-authentication-overview.png\" alt=\"angular-8-jwt-authentication-overview\" width=\"750\" height=\"350\" class=\"alignnone size-full wp-image-1854 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-jwt-authentication-overview.png 750w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-jwt-authentication-overview-300x140.png 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/p>\n<p>Let&#8217;s try to understand it right now.<\/p>\n<p>&#8211; The <code>App<\/code> component is a container using <code>Router<\/code>. It gets user token &#038; user information from <em>Browser Session Storage<\/em> via <code>token-storage.service<\/code>. Then the navbar now can display based on the user login state &#038; roles.<\/p>\n<p>&#8211; <code>Login<\/code> &#038; <code>Register<\/code> components have form for submission data (with support of <em>Form Validation<\/em>). They use <code>token-storage.service<\/code> for checking state and <code>auth.service<\/code> for sending signin\/signup requests.<\/p>\n<p>&#8211; <code>auth.service<\/code> uses Angular HttpClient (<code>$http<\/code> service) to make authentication requests.<br \/>\n\u2013 every HTTP request by <code>$http<\/code> service will be inspected and transformed before being sent by <code>auth-interceptor<\/code>.<\/p>\n<p>&#8211; <code>Home<\/code> component is public for all visitor.<\/p>\n<p>&#8211; <code>Profile<\/code> component get <code>user<\/code> data from <em>Session Storage<\/em>.<\/p>\n<p>&#8211; <code>BoardUser<\/code>, <code>BoardModerator<\/code>, <code>BoardAdmin<\/code> components will be displayed depending on <code>roles<\/code> from <em>Session Storage<\/em>. In these components, we use <code>user.service<\/code> to get protected resources from API.<\/p>\n<h3><span id=\"Technology-2\">Technology<\/span><\/h3>\n<p>&#8211; Angular 8<br \/>\n&#8211; RxJS 6<\/p>\n<h3><span id=\"Project_Structure-2\">Project Structure<\/span><\/h3>\n<p>This is the folder structure of our Angular front-end project:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-jwt-authentication-project-structure.png\" alt=\"angular-8-jwt-authentication-project-structure\" width=\"261\" height=\"645\" class=\"alignnone size-full wp-image-1875 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-jwt-authentication-project-structure.png\" alt=\"angular-8-jwt-authentication-project-structure\" width=\"261\" height=\"645\" class=\"alignnone size-full wp-image-1875 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-jwt-authentication-project-structure.png 261w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-jwt-authentication-project-structure-121x300.png 121w\" sizes=\"(max-width: 261px) 100vw, 261px\" \/><\/noscript><\/p>\n<p>You can understand it properly without any explanation because we&#8217;ve looked at the overview before.<\/p>\n<h3><span id=\"Implementation-2\">Implementation<\/span><\/h3>\n<p>You can find step by step to implement this Angular 8 App in the post:<br \/>\n<a href=\"https:\/\/www.bezkoder.com\/angular-jwt-authentication\/\">Angular 8 JWT Authentication with HttpInterceptor and Router<\/a><\/p>\n<p>Newer versions:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-10-jwt-auth\/\">Angular 10 JWT Authentication example with Web Api<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-11-jwt-auth\/\">Angular 11 JWT Authentication example with Web Api<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-12-jwt-auth\/\">Angular 12 JWT Authentication example with Web Api<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-13-jwt-auth\/\">Angular 13 JWT Authentication example with Web Api<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-14-jwt-auth\/\">Angular 14 JWT Authentication example with Web Api<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-15-jwt-auth\/\">Angular 15 JWT Authentication example with Web Api<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-16-jwt-auth\/\">Angular 16 JWT Authentication example with Web Api<\/a><\/p>\n<h2><span id=\"Further_Reading\">Further Reading<\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/docs.spring.io\/spring-boot\/docs\/2.1.8.RELEASE\/reference\/htmlsingle\/#boot-features-security\">Spring Boot: Spring Security<\/a><\/li>\n<li><a href=\"https:\/\/bezkoder.com\/jwt-json-web-token\/\">In-depth Introduction to JWT-JSON Web Token<\/a><\/li>\n<li><a href=\"https:\/\/bezkoder.com\/angular-spring-boot-file-upload\/\">Angular 8 + Spring Boot: File upload example<\/a><\/li>\n<\/ul>\n<p>Fullstack CRUD App:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-spring-boot-crud\/\">Angular 8 + Spring Boot + MySQL example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-spring-boot-postgresql\/\">Angular 8 + Spring Boot + PostgreSQL example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-spring-boot-mongodb\/\">Angular 8 + Spring Boot + MongoDB example<\/a><\/p>\n<p>Newer versions:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-10-spring-boot-jwt-auth\/\">Angular 10 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-11-spring-boot-jwt-auth\/\">Angular 11 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-12-spring-boot-jwt-auth\/\">Angular 12 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-13-spring-boot-jwt-auth\/\">Angular 13 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-14-spring-boot-jwt-auth\/\">Angular 14 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-15-spring-boot-jwt-auth\/\">Angular 15 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-16-spring-boot-jwt-auth\/\">Angular 16 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-17-spring-boot-jwt-auth\/\">Angular 17 + Spring Boot: JWT Authentication &#038; Authorization example<\/a><\/p>\n<h2><span id=\"Source_Code\">Source Code<\/span><\/h2>\n<p>The complete source code for this tutorial can be found at <a href=\"https:\/\/www.githubcode.com\/spring-boot-angular-example-github\/\">Spring Boot + Angular Github<\/a>.<\/p>\n<h2><span id=\"Conclusion\">Conclusion<\/span><\/h2>\n<p>Now we have an overview of Angular 8 Spring Boot Authentication example using JWT, Spring Security, Angular HttpInterceptor along with flow for signup\/login actions.<\/p>\n<p>We also take a look at Spring Boot server architecture for JWT Authentication using Spring Sercurity &#038; Spring Data JPA, as well as Angular project structure for building a front-end app working with JWT.<\/p>\n<p>Next tutorials will show you more details about how to implement this interesting system:<br \/>\n&#8211; Back-end:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.bezkoder.com\/spring-boot-jwt-authentication\/\">Using MySQL<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/spring-boot-security-postgresql-jwt-authentication\/\">Using PostgreSQL<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/spring-boot-jwt-auth-mongodb\/\">Using MongoDB<\/a><\/li>\n<\/ul>\n<p>&#8211; Front-end:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-jwt-authentication\/\">Using Angular 8<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-10-jwt-auth\/\">Using Angular 10<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-11-jwt-auth\/\">Using Angular 11<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-12-jwt-auth\/\">Using Angular 12<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-13-jwt-auth\/\">Using Angular 13<\/a><\/li>\n<\/ul>\n<p>You will want to know how to run both projects in one place:<br \/>\n<a href=\"https:\/\/bezkoder.com\/integrate-angular-spring-boot\/\">How to Integrate Angular with Spring Boot Rest API<\/a><\/p>\n<p>Happy learning, see you again!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I will show you how to build a full stack Angular 8 + Spring Boot JWT Authentication example. The back-end server uses Spring Boot with Spring Security for JWT authentication and Spring Data JPA for interacting with database. The front-end will be built using Angular 8 with HttpInterceptor &#038; Form validation. Newer [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1856,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[103,49,45,48],"tags":[104,105,53,119,47,253,198,46,52,54,138],"class_list":["post-1843","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-full-stack","category-security","category-spring","tag-angular","tag-angular-8","tag-authentication","tag-authorization","tag-jwt","tag-login","tag-registration","tag-security","tag-spring-boot","tag-spring-security","tag-token-based-authentication"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular 8 + Spring Boot: JWT Authentication with Spring Security example - BezKoder<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 8 + Spring Boot: JWT Authentication with Spring Security example - BezKoder\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will show you how to build a full stack Angular 8 + Spring Boot JWT Authentication example. The back-end server uses Spring Boot with Spring Security for JWT authentication and Spring Data JPA for interacting with database. The front-end will be built using Angular 8 with HttpInterceptor &#038; Form validation. Newer [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/\" \/>\n<meta property=\"og:site_name\" content=\"BezKoder\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bezkoder\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-03T07:38:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-03T09:45:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"bezkoder\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"bezkoder\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/\",\"url\":\"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/\",\"name\":\"Angular 8 + Spring Boot: JWT Authentication with Spring Security example - BezKoder\",\"isPartOf\":{\"@id\":\"https:\/\/www.bezkoder.com\/#website\"},\"datePublished\":\"2020-10-03T07:38:51+00:00\",\"dateModified\":\"2024-01-03T09:45:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bezkoder.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular 8 + Spring Boot: JWT Authentication with Spring Security example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bezkoder.com\/#website\",\"url\":\"https:\/\/www.bezkoder.com\/\",\"name\":\"BezKoder\",\"description\":\"Mobile &amp; Web App Development Tutorials\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bezkoder.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a\",\"name\":\"bezkoder\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g\",\"caption\":\"bezkoder\"},\"url\":\"https:\/\/www.bezkoder.com\/author\/bezkoder\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular 8 + Spring Boot: JWT Authentication with Spring Security example - BezKoder","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/","og_locale":"en_US","og_type":"article","og_title":"Angular 8 + Spring Boot: JWT Authentication with Spring Security example - BezKoder","og_description":"In this tutorial, I will show you how to build a full stack Angular 8 + Spring Boot JWT Authentication example. The back-end server uses Spring Boot with Spring Security for JWT authentication and Spring Data JPA for interacting with database. The front-end will be built using Angular 8 with HttpInterceptor &#038; Form validation. Newer [&hellip;]","og_url":"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/","og_site_name":"BezKoder","article_publisher":"https:\/\/www.facebook.com\/bezkoder","article_published_time":"2020-10-03T07:38:51+00:00","article_modified_time":"2024-01-03T09:45:04+00:00","og_image":[{"width":750,"height":410,"url":"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/angular-8-spring-boot-jwt-authentication-feature-image.png","type":"image\/png"}],"author":"bezkoder","twitter_card":"summary_large_image","twitter_misc":{"Written by":"bezkoder","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/","url":"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/","name":"Angular 8 + Spring Boot: JWT Authentication with Spring Security example - BezKoder","isPartOf":{"@id":"https:\/\/www.bezkoder.com\/#website"},"datePublished":"2020-10-03T07:38:51+00:00","dateModified":"2024-01-03T09:45:04+00:00","author":{"@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a"},"breadcrumb":{"@id":"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bezkoder.com\/angular-spring-boot-jwt-auth\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bezkoder.com\/"},{"@type":"ListItem","position":2,"name":"Angular 8 + Spring Boot: JWT Authentication with Spring Security example"}]},{"@type":"WebSite","@id":"https:\/\/www.bezkoder.com\/#website","url":"https:\/\/www.bezkoder.com\/","name":"BezKoder","description":"Mobile &amp; Web App Development Tutorials","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bezkoder.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a","name":"bezkoder","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g","caption":"bezkoder"},"url":"https:\/\/www.bezkoder.com\/author\/bezkoder\/"}]}},"_links":{"self":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts\/1843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/comments?post=1843"}],"version-history":[{"count":1,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts\/1843\/revisions"}],"predecessor-version":[{"id":16629,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts\/1843\/revisions\/16629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/media\/1856"}],"wp:attachment":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/media?parent=1843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/categories?post=1843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/tags?post=1843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}