Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 31a4e0b

Browse files
committed
first commit
0 parents commit 31a4e0b

File tree

110 files changed

+17030
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

110 files changed

+17030
-0
lines changed

‎README.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
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.
2+
3+
## Angular 11 Spring Boot JWT Authentication example
4+
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.
5+
6+
User can signup new account, login with username & password.
7+
Authorization by the role of the User (admin, moderator, user)
8+
Screenshots
9+
Here are UI screenshots of our system.
10+
11+
– Anyone can access a public page before logging in:
12+
13+
![Angular 11 Spring Boot JWT Authentication Public Page](angular-11-spring-boot-jwt-authentication-public-page.png)
14+
15+
– New user registration:
16+
17+
![Angular 11 Spring Boot JWT Authentication User Registration](angular-11-spring-boot-jwt-authentication-user-registration.png)
18+
19+
– Signup Form Validation:
20+
21+
![Angular 11 Spring Boot JWT Authentication Form Validation](angular-11-spring-boot-jwt-authentication-form-validation.png)
22+
23+
– After signup is successful, User can login:
24+
25+
![Angular 11 Spring Boot JWT Authentication User Login](angular-11-spring-boot-jwt-authentication-user-login.png)
26+
27+
-Loggedin User can access Profile page/ User page:
28+
29+
![Angular 11 Spring Boot JWT Authentication Profile Page](angular-11-spring-boot-jwt-authentication-user-profile.png)
30+
31+
![Angular 11 Spring Boot JWT Authentication User Board](angular-11-spring-boot-jwt-authentication-user.png)
32+
33+
– This is UI for **admin**:
34+
35+
![Angular 11 Spring Boot JWT Authentication Admin UI](angular-11-spring-boot-jwt-authentication-authorization-successful.png)
36+
37+
– If a User who doesn’t have Admin role tries to access **Admin**/**Moderator Board** page:
38+
39+
![Angular 11 Spring Boot JWT Authentication Authorization](angular-11-spring-boot-jwt-authentication-authorization-failed.png)
40+
41+
## Demo
42+
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).
43+
44+
[![Angular + Spring Boot JWT Authentication & Authorization example](http://img.youtube.com/vi/QdXHkybzrUU/0.jpg)](http://www.youtube.com/watch?v=QdXHkybzrUU)
45+
46+
## Flow for User Registration and User Login
47+
The diagram shows flow for User Registration process and User Login process.
48+
![Angular 11 Spring Boot JWT Authentication Flow](angular-11-spring-boot-jwt-authentication-authorization-flow.png)
49+
50+
It’s not too difficult to understand. We have 2 endpoints for authentication:
51+
52+
* `api/auth/signup` for User Registration
53+
* `api/auth/signin` for User Login
54+
55+
If Client wants to send request to protected data/endpoints, a legal JWT must be added to HTTP Authorization Header.
56+
57+
## Spring Boot & Spring Security for Back-end
58+
![Angular 11 Spring Boot JWT Authentication Back-end](angular-11-spring-boot-jwt-authentication-authorization-server.png)
59+
60+
## Angular 11 for Front-end
61+
![Angular 11 Spring Boot JWT Authentication Front-end](angular-11-spring-boot-jwt-authentication-authorization-client.png)
62+
63+
For more details, please visit:
64+
[https://bezkoder.com/angular-11-spring-boot-jwt-auth/](https://bezkoder.com/angular-11-spring-boot-jwt-auth/)

‎angular-11-client/.browserslistrc

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2+
# For additional information regarding the format and rule options, please see:
3+
# https://github.com/browserslist/browserslist#queries
4+
5+
# For the full list of supported browsers by the Angular framework, please see:
6+
# https://angular.io/guide/browser-support
7+
8+
# You can see what browsers were selected by your queries by running:
9+
# npx browserslist
10+
11+
last 1 Chrome version
12+
last 1 Firefox version
13+
last 2 Edge major versions
14+
last 2 Safari major versions
15+
last 2 iOS major versions
16+
Firefox ESR
17+
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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

‎angular-11-client/.gitignore

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
# Only exists if Bazel was run
8+
/bazel-out
9+
10+
# dependencies
11+
/node_modules
12+
13+
# profiling files
14+
chrome-profiler-events*.json
15+
speed-measure-plugin*.json
16+
17+
# IDEs and editors
18+
/.idea
19+
.project
20+
.classpath
21+
.c9/
22+
*.launch
23+
.settings/
24+
*.sublime-workspace
25+
26+
# IDE - VSCode
27+
.vscode/*
28+
!.vscode/settings.json
29+
!.vscode/tasks.json
30+
!.vscode/launch.json
31+
!.vscode/extensions.json
32+
.history/*
33+
34+
# misc
35+
/.sass-cache
36+
/connect.lock
37+
/coverage
38+
/libpeerconnection.log
39+
npm-debug.log
40+
yarn-error.log
41+
testem.log
42+
/typings
43+
44+
# System Files
45+
.DS_Store
46+
Thumbs.db

‎angular-11-client/README.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# Angular 11 JWT Authentication example
2+
3+
## Flow for User Registration and User Login
4+
For JWT – Token based Authentication with Web API, we’re gonna call 2 endpoints:
5+
- POST `api/auth/signup` for User Registration
6+
- POST `api/auth/signin` for User Login
7+
8+
You can take a look at following flow to have an overview of Requests and Responses that Angular 10 Client will make or receive.
9+
10+
![angular-11-jwt-authentication-flow](angular-11-jwt-authentication-flow.png)
11+
12+
## Angular JWT App Diagram with Router and HttpInterceptor
13+
![angular-11-jwt-authentication-overview](angular-11-jwt-authentication-overview.png)
14+
15+
For more detail, please visit:
16+
> [Angular 11 JWT Authentication & Authorization with Web API](https://bezkoder.com/angular-11-jwt-auth/)
17+
18+
## With Spring Boot back-end
19+
20+
> [Angular + Spring Boot: JWT Authentication & Authorization example](https://bezkoder.com/angular-11-spring-boot-jwt-auth/)
21+
22+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`.
23+
24+
## With Node.js Express back-end
25+
26+
> [Angular + Node.js Express: JWT Authentication & Authorization example](https://bezkoder.com/node-js-express-angular-10-jwt-auth/)
27+
28+
Open `app/_helpers/auth.interceptor.js`, modify the code to work with **x-access-token** like this:
29+
```js
30+
...
31+
32+
// const TOKEN_HEADER_KEY = 'Authorization'; // for Spring Boot back-end
33+
const TOKEN_HEADER_KEY = 'x-access-token'; // for Node.js Express back-end
34+
35+
@Injectable()
36+
export class AuthInterceptor implements HttpInterceptor {
37+
...
38+
39+
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
40+
...
41+
if (token != null) {
42+
// for Spring Boot back-end
43+
// authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });
44+
45+
// for Node.js Express back-end
46+
authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, token) });
47+
}
48+
return next.handle(authReq);
49+
}
50+
}
51+
52+
...
53+
```
54+
55+
Run `ng serve --port 8081` for a dev server. Navigate to `http://localhost:8081/`.
56+
57+
## More practice
58+
> [Angular 11 CRUD Application example with Web API](https://bezkoder.com/angular-11-crud-app/)
59+
60+
> [Angular 10 Pagination example | ngx-pagination](https://github.com/bezkoder/angular-10-pagination-example)
61+
62+
> [Angular 10 File Upload example with progress bar](https://bezkoder.com/angular-10-file-upload/)
63+
64+
Fullstack with Node.js Express:
65+
> [Angular 11 + Node.js Express + MySQL](https://bezkoder.com/angular-11-node-js-express-mysql/)
66+
67+
> [Angular 11 + Node.js Express + PostgreSQL](https://bezkoder.com/angular-11-node-js-express-postgresql/)
68+
69+
> [Angular 11 + Node.js Express + MongoDB](https://bezkoder.com/angular-11-mongodb-node-js-express/)
70+
71+
Fullstack with Spring Boot:
72+
> [Angular 11 + Spring Boot + MySQL](https://bezkoder.com/angular-11-spring-boot-crud/)
73+
74+
> [Angular 10 + Spring Boot + PostgreSQL](https://bezkoder.com/angular-10-spring-boot-postgresql/)
75+
76+
> [Angular 10 + Spring Boot + MongoDB](https://bezkoder.com/angular-10-spring-boot-mongodb/)
77+
78+
Fullstack with Django:
79+
> [Angular 11 + Django Rest Framework](https://bezkoder.com/django-angular-11-crud-rest-framework/)
80+
81+
> [Angular 11 + Django + PostgreSQL](https://bezkoder.com/django-angular-postgresql/)
82+
83+
Serverless with Firebase:
84+
> [Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase](https://bezkoder.com/angular-11-firebase-crud/)
85+
86+
> [Angular 11 Firestore CRUD | AngularFireStore](https://bezkoder.com/angular-11-firestore-crud-angularfirestore/)
87+
88+
Integration (run back-end & front-end on same server/port)
89+
> [How to Integrate Angular 10 with Node.js Restful Services](https://bezkoder.com/integrate-angular-10-node-js/)
90+
91+
> [How to Integrate Angular with Spring Boot Rest API](https://bezkoder.com/integrate-angular-spring-boot/)
30.4 KB
Loading[フレーム]
16.8 KB
Loading[フレーム]

‎angular-11-client/angular.json

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"Angular11JwtAuth": {
7+
"projectType": "application",
8+
"schematics": {
9+
"@schematics/angular:application": {
10+
"strict": true
11+
}
12+
},
13+
"root": "",
14+
"sourceRoot": "src",
15+
"prefix": "app",
16+
"architect": {
17+
"build": {
18+
"builder": "@angular-devkit/build-angular:browser",
19+
"options": {
20+
"outputPath": "dist/Angular11JwtAuth",
21+
"index": "src/index.html",
22+
"main": "src/main.ts",
23+
"polyfills": "src/polyfills.ts",
24+
"tsConfig": "tsconfig.app.json",
25+
"aot": true,
26+
"assets": [
27+
"src/favicon.ico",
28+
"src/assets"
29+
],
30+
"styles": [
31+
"src/styles.css"
32+
],
33+
"scripts": []
34+
},
35+
"configurations": {
36+
"production": {
37+
"fileReplacements": [
38+
{
39+
"replace": "src/environments/environment.ts",
40+
"with": "src/environments/environment.prod.ts"
41+
}
42+
],
43+
"optimization": true,
44+
"outputHashing": "all",
45+
"sourceMap": false,
46+
"namedChunks": false,
47+
"extractLicenses": true,
48+
"vendorChunk": false,
49+
"buildOptimizer": true,
50+
"budgets": [
51+
{
52+
"type": "initial",
53+
"maximumWarning": "500kb",
54+
"maximumError": "1mb"
55+
},
56+
{
57+
"type": "anyComponentStyle",
58+
"maximumWarning": "2kb",
59+
"maximumError": "4kb"
60+
}
61+
]
62+
}
63+
}
64+
},
65+
"serve": {
66+
"builder": "@angular-devkit/build-angular:dev-server",
67+
"options": {
68+
"browserTarget": "Angular11JwtAuth:build"
69+
},
70+
"configurations": {
71+
"production": {
72+
"browserTarget": "Angular11JwtAuth:build:production"
73+
}
74+
}
75+
},
76+
"extract-i18n": {
77+
"builder": "@angular-devkit/build-angular:extract-i18n",
78+
"options": {
79+
"browserTarget": "Angular11JwtAuth:build"
80+
}
81+
},
82+
"test": {
83+
"builder": "@angular-devkit/build-angular:karma",
84+
"options": {
85+
"main": "src/test.ts",
86+
"polyfills": "src/polyfills.ts",
87+
"tsConfig": "tsconfig.spec.json",
88+
"karmaConfig": "karma.conf.js",
89+
"assets": [
90+
"src/favicon.ico",
91+
"src/assets"
92+
],
93+
"styles": [
94+
"src/styles.css"
95+
],
96+
"scripts": []
97+
}
98+
},
99+
"lint": {
100+
"builder": "@angular-devkit/build-angular:tslint",
101+
"options": {
102+
"tsConfig": [
103+
"tsconfig.app.json",
104+
"tsconfig.spec.json",
105+
"e2e/tsconfig.json"
106+
],
107+
"exclude": [
108+
"**/node_modules/**"
109+
]
110+
}
111+
},
112+
"e2e": {
113+
"builder": "@angular-devkit/build-angular:protractor",
114+
"options": {
115+
"protractorConfig": "e2e/protractor.conf.js",
116+
"devServerTarget": "Angular11JwtAuth:serve"
117+
},
118+
"configurations": {
119+
"production": {
120+
"devServerTarget": "Angular11JwtAuth:serve:production"
121+
}
122+
}
123+
}
124+
}
125+
}
126+
},
127+
"defaultProject": "Angular11JwtAuth"
128+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /