last commit

README.md

@@ -0,0 +1,85 @@
+In this tutorial, I will show you how to build a full stack Angular 11 + Spring Boot JWT Authentication example. The back-end server uses Spring Boot with Spring Security for JWT Authentication & Authorization, Spring Data JPA for interacting with database. The front-end will be built using Angular 11 with HttpInterceptor & Form validation.
+
+## Angular 11 Spring Boot JWT Authentication example
+It will be a full stack, with Spring Boot for back-end and Angular 11 for front-end. The system is secured by Spring Security with JWT Authentication.
+
+User can signup new account, login with username & password.
+Authorization by the role of the User (admin, moderator, user)
+Screenshots
+Here are UI screenshots of our system.
+
+– Anyone can access a public page before logging in:
+
+![Angular 11 Spring Boot JWT Authentication Public Page](angular-11-spring-boot-jwt-authentication-public-page.png)
+
+– New user registration:
+
+![Angular 11 Spring Boot JWT Authentication User Registration](angular-11-spring-boot-jwt-authentication-user-registration.png)
+
+– Signup Form Validation:
+
+![Angular 11 Spring Boot JWT Authentication Form Validation](angular-11-spring-boot-jwt-authentication-form-validation.png)
+
+– After signup is successful, User can login:
+
+![Angular 11 Spring Boot JWT Authentication User Login](angular-11-spring-boot-jwt-authentication-user-login.png)
+
+-Loggedin User can access Profile page/ User page:
+
+![Angular 11 Spring Boot JWT Authentication Profile Page](angular-11-spring-boot-jwt-authentication-user-profile.png)
+
+![Angular 11 Spring Boot JWT Authentication User Board](angular-11-spring-boot-jwt-authentication-user.png)
+
+– This is UI for **admin**:
+
+![Angular 11 Spring Boot JWT Authentication Admin UI](angular-11-spring-boot-jwt-authentication-authorization-successful.png)
+
+– If a User who doesn’t have Admin role tries to access **Admin**/**Moderator Board** page:
+
+![Angular 11 Spring Boot JWT Authentication Authorization](angular-11-spring-boot-jwt-authentication-authorization-failed.png)
+
+## Demo
+This is full Angular + Spring Boot JWT authentication demo (with form validation, check signup username/email duplicates, test authorization with 3 roles: Admin, Moderator, User).
+
+[![Angular + Spring Boot JWT Authentication & Authorization example](http://img.youtube.com/vi/QdXHkybzrUU/0.jpg)](http://www.youtube.com/watch?v=QdXHkybzrUU)
+
+## Flow for User Registration and User Login
+The diagram shows flow for User Registration process and User Login process.
+![Angular 11 Spring Boot JWT Authentication Flow](angular-11-spring-boot-jwt-authentication-authorization-flow.png)
+
+It’s not too difficult to understand. We have 2 endpoints for authentication:
+
+* `api/auth/signup` for User Registration
+* `api/auth/signin` for User Login
+
+If Client wants to send request to protected data/endpoints, a legal JWT must be added to HTTP Authorization Header.
+
+## Spring Boot & Spring Security for Back-end
+![Angular 11 Spring Boot JWT Authentication Back-end](angular-11-spring-boot-jwt-authentication-authorization-server.png)
+
+## Angular 11 for Front-end
+![Angular 11 Spring Boot JWT Authentication Front-end](angular-11-spring-boot-jwt-authentication-authorization-client.png)
+
+For more details, please visit:
+[https://bezkoder.com/angular-11-spring-boot-jwt-auth/](https://bezkoder.com/angular-11-spring-boot-jwt-auth/)
+
+More Pactice:
+> [Angular 11 + Spring Boot + MySQL](https://bezkoder.com/angular-11-spring-boot-crud/)
+
+> [Angular 11 + Spring Boot + PostgreSQL](https://bezkoder.com/angular-11-spring-boot-postgresql/)
+
+> [Angular 11 + Spring Boot + MongoDB](https://bezkoder.com/angular-11-spring-boot-mongodb/)
+
+> [Angular 11 + Spring Boot: File upload example](https://bezkoder.com/angular-11-spring-boot-file-upload/)
+
+> [Angular 11 + Spring Boot: Pagination example](https://bezkoder.com/pagination-spring-boot-angular-11/)
+
+Serverless with Firebase:
+> [Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase](https://bezkoder.com/angular-11-firebase-crud/)
+
+> [Angular 11 Firestore CRUD | AngularFireStore](https://bezkoder.com/angular-11-firestore-crud-angularfirestore/)
+
+> [Angular 11 Upload File to Firebase Storage example](https://bezkoder.com/angular-11-file-upload-firebase-storage/)
+
+Integration (run back-end & front-end on same server/port)
+> [How to Integrate Angular with Spring Boot Rest API](https://bezkoder.com/integrate-angular-spring-boot/)

angular-11-client/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

angular-11-client/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

angular-11-client/.gitignore

@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

angular-11-client/README.md

@@ -0,0 +1,97 @@
+# Angular 11 JWT Authentication example
+
+## Flow for User Registration and User Login
+For JWT – Token based Authentication with Web API, we’re gonna call 2 endpoints:
+- POST `api/auth/signup` for User Registration
+- POST `api/auth/signin` for User Login
+
+You can take a look at following flow to have an overview of Requests and Responses that Angular 10 Client will make or receive.
+
+![angular-11-jwt-authentication-flow](angular-11-jwt-authentication-flow.png)
+
+## Angular JWT App Diagram with Router and HttpInterceptor
+![angular-11-jwt-authentication-overview](angular-11-jwt-authentication-overview.png)
+
+For more detail, please visit:
+> [Angular 11 JWT Authentication & Authorization with Web API](https://bezkoder.com/angular-11-jwt-auth/)
+
+## With Spring Boot back-end
+
+> [Angular + Spring Boot: JWT Authentication & Authorization example](https://bezkoder.com/angular-11-spring-boot-jwt-auth/)
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`.
+
+## With Node.js Express back-end
+
+> [Angular + Node.js Express: JWT Authentication & Authorization example](https://bezkoder.com/node-js-express-angular-10-jwt-auth/)
+
+Open `app/_helpers/auth.interceptor.js`, modify the code to work with **x-access-token** like this:
+```js
+...
+
+// const TOKEN_HEADER_KEY = 'Authorization'; // for Spring Boot back-end
+const TOKEN_HEADER_KEY = 'x-access-token';   // for Node.js Express back-end
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+  ...
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    ...
+    if (token != null) {
+      // for Spring Boot back-end
+      // authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });
+
+      // for Node.js Express back-end
+      authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, token) });
+    }
+    return next.handle(authReq);
+  }
+}
+
+...
+```
+
+Run `ng serve --port 8081` for a dev server. Navigate to `http://localhost:8081/`.
+
+## More practice
+> [Angular 11 CRUD Application example with Web API](https://bezkoder.com/angular-11-crud-app/)
+
+> [Angular 11 Pagination example | ngx-pagination](https://bezkoder.com/angular-11-pagination-ngx/)
+
+> [Angular 11 File Upload example with progress bar](https://bezkoder.com/angular-11-file-upload/)
+
+Fullstack with Node.js Express:
+> [Angular 11 + Node.js Express + MySQL](https://bezkoder.com/angular-11-node-js-express-mysql/)
+
+> [Angular 11 + Node.js Express + PostgreSQL](https://bezkoder.com/angular-11-node-js-express-postgresql/)
+
+> [Angular 11 + Node.js Express + MongoDB](https://bezkoder.com/angular-11-mongodb-node-js-express/)
+
+Fullstack with Spring Boot:
+> [Angular 11 + Spring Boot + MySQL](https://bezkoder.com/angular-11-spring-boot-crud/)
+
+> [Angular 11 + Spring Boot + PostgreSQL](https://bezkoder.com/angular-11-spring-boot-postgresql/)
+
+> [Angular 11 + Spring Boot + MongoDB](https://bezkoder.com/angular-11-spring-boot-mongodb/)
+
+> [Angular 11 + Spring Boot: File upload example](https://bezkoder.com/angular-11-spring-boot-file-upload/)
+
+> [Angular 11 + Spring Boot: Pagination example](https://bezkoder.com/pagination-spring-boot-angular-11/)
+
+Fullstack with Django:
+> [Angular 11 + Django Rest Framework](https://bezkoder.com/django-angular-11-crud-rest-framework/)
+
+> [Angular 11 + Django + PostgreSQL](https://bezkoder.com/django-angular-postgresql/)
+
+Serverless with Firebase:
+> [Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase](https://bezkoder.com/angular-11-firebase-crud/)
+
+> [Angular 11 Firestore CRUD | AngularFireStore](https://bezkoder.com/angular-11-firestore-crud-angularfirestore/)
+
+> [Angular 11 Upload File to Firebase Storage: Display/Delete Files example](https://bezkoder.com/angular-11-file-upload-firebase-storage/)
+
+Integration (run back-end & front-end on same server/port)
+> [How to Integrate Angular 10 with Node.js Restful Services](https://bezkoder.com/integrate-angular-10-node-js/)
+
+> [How to Integrate Angular with Spring Boot Rest API](https://bezkoder.com/integrate-angular-spring-boot/)