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 83cde6b

Browse files
committed
first commit
1 parent 2307133 commit 83cde6b

Some content is hidden

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

49 files changed

+1151
-389
lines changed

‎README.md‎

Lines changed: 78 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,91 @@
1-
# Angular17JwtAuth
1+
# Angular 17 JWT Authentication & Authorization example with Rest API
22

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.7.
3+
Build Angular 17 JWT Authentication & Authorization example with Rest Api, HttpOnly Cookie and JWT (including HttpInterceptor, Router & Form Validation).
4+
- JWT Authentication Flow for User Registration (Signup) & User Login
5+
- Project Structure with HttpInterceptor, Router
6+
- Way to implement HttpInterceptor
7+
- How to store JWT token in HttpOnly Cookie
8+
- Creating Login, Signup Components with Form Validation
9+
- Angular Components for accessing protected Resources
10+
- How to add a dynamic Navigation Bar to Angular App
11+
- Working with Browser Session Storage
412

5-
## Development server
13+
## Flow for User Registration and User Login
14+
For JWT – Token based Authentication with Rest API, we’re gonna call 2 endpoints:
15+
- POST `api/auth/signup` for User Registration
16+
- POST `api/auth/signin` for User Login
17+
- POST `api/auth/signout` for User Logout
618

7-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
19+
You can take a look at following flow to have an overview of Requests and Responses that Angular 17 JWT Authentication & Authorization Client will make or receive.
820

9-
## Code scaffolding
21+
![angular-17-jwt-authentication-authorization-flow](angular-17-jwt-authentication-authorization-flow.png)
1022

11-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
23+
## Angular JWT App Diagram with Router and HttpInterceptor
24+
![angular-17-jwt-authentication](angular-17-jwt-authentication.png)
1225

13-
## Build
26+
For more detail, please visit the tutorial:
27+
> [Angular 17 JWT Authentication & Authorization with Web API example](https://www.bezkoder.com/angular-17-jwt-auth/)
1428
15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
29+
> [Angular 17 Logout when Token is expired](https://www.bezkoder.com/logout-when-token-expired-angular-17/)
1630
17-
## Running unit tests
31+
> [Angular Refresh Token with Interceptor & JWT example](https://www.bezkoder.com/angular-16-refresh-token/)
1832
19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
33+
## With Spring Boot back-end
2034

21-
## Running end-to-end tests
35+
> [Angular + Spring Boot: JWT Authentication and Authorization example](https://www.bezkoder.com/angular-16-spring-boot-jwt-auth/)
2236
23-
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
37+
## With Node.js Express back-end
2438

25-
## Further help
39+
> [Angular + Node.js Express: JWT Authentication and Authorization example](https://www.bezkoder.com/node-js-angular-16-jwt-auth/)
2640
27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
41+
Run `ng serve --port 8081` for a dev server. Navigate to `http://localhost:8081/`.
42+
43+
## More practice
44+
> [Angular 16 CRUD example with Rest API](https://www.bezkoder.com/angular-16-crud-example/)
45+
46+
> [Angular 16 Pagination example](https://www.bezkoder.com/angular-16-pagination-ngx/)
47+
48+
> [Angular 16 File upload example with Progress bar](https://www.bezkoder.com/angular-16-file-upload/)
49+
50+
> [Angular 16 Form Validation example](https://www.bezkoder.com/angular-16-form-validation/)
51+
52+
Fullstack with Node:
53+
> [Angular 16 + Node Express + MySQL example](https://www.bezkoder.com/angular-16-node-js-express-mysql/)
54+
55+
> [Angular 16 + Node Express + PostgreSQL example](https://www.bezkoder.com/angular-16-node-js-express-postgresql/)
56+
57+
> [Angular 16 + Node Express + MongoDB example](https://www.bezkoder.com/angular-16-node-js-express-mongodb/)
58+
59+
> [Angular 16 + Node Express: File upload example](https://www.bezkoder.com/angular-16-node-express-file-upload/)
60+
61+
Fullstack with Spring Boot:
62+
> [Angular 16 + Spring Boot example](https://www.bezkoder.com/spring-boot-angular-16-crud/)
63+
64+
> [Angular 16 + Spring Boot + MySQL example](https://www.bezkoder.com/spring-boot-angular-16-mysql/)
65+
66+
> [Angular 16 + Spring Boot + PostgreSQL example](https://www.bezkoder.com/spring-boot-angular-16-postgresql/)
67+
68+
> [Angular 16 + Spring Boot + MongoDB example](https://www.bezkoder.com/spring-boot-angular-16-mongodb/)
69+
70+
> [Angular 16 + Spring Boot: File upload example](https://www.bezkoder.com/angular-16-spring-boot-file-upload/)
71+
72+
Fullstack with Django:
73+
> [Angular + Django example](https://www.bezkoder.com/django-angular-13-crud-rest-framework/)
74+
75+
> [Angular + Django + MySQL](https://www.bezkoder.com/django-angular-mysql/)
76+
77+
> [Angular + Django + PostgreSQL](https://www.bezkoder.com/django-angular-postgresql/)
78+
79+
> [Angular + Django + MongoDB](https://www.bezkoder.com/django-angular-mongodb/)
80+
81+
Serverless with Firebase:
82+
> [Angular 16 Firebase CRUD with Realtime DataBase](https://www.bezkoder.com/angular-16-firebase-crud/)
83+
84+
> [Angular 16 Firestore CRUD example](https://www.bezkoder.com/angular-16-firestore-crud/)
85+
86+
> [Angular 16 Firebase Storage: File Upload/Display/Delete example](https://www.bezkoder.com/angular-16-firebase-storage/)
87+
88+
Integration (run back-end & front-end on same server/port)
89+
> [How to integrate Angular with Node Restful Services](https://www.bezkoder.com/integrate-angular-12-node-js/)
90+
91+
> [How to Integrate Angular with Spring Boot Rest API](https://www.bezkoder.com/integrate-angular-12-spring-boot/)
34 KB
Loading[フレーム]

‎angular-17-jwt-authentication.png‎

22.6 KB
Loading[フレーム]

‎angular.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,14 @@
3535
"src/assets"
3636
],
3737
"styles": [
38+
"node_modules/bootstrap/dist/css/bootstrap.min.css",
3839
"src/styles.css"
3940
],
40-
"scripts": []
41+
"scripts": [
42+
"node_modules/jquery/dist/jquery.slim.min.js",
43+
"node_modules/popper.js/dist/umd/popper.min.js",
44+
"node_modules/bootstrap/dist/js/bootstrap.min.js"
45+
]
4146
},
4247
"configurations": {
4348
"production": {

‎package-lock.json‎

Lines changed: 37 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@angular/platform-browser": "^17.0.0",
1919
"@angular/platform-browser-dynamic": "^17.0.0",
2020
"@angular/router": "^17.0.0",
21+
"bootstrap": "^4.6.2",
2122
"rxjs": "~7.8.0",
2223
"tslib": "^2.3.0",
2324
"zone.js": "~0.14.2"

‎src/app/_helpers/http.interceptor.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Injectable } from '@angular/core';
2+
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';
3+
import { Observable } from 'rxjs';
4+
5+
@Injectable()
6+
export class HttpRequestInterceptor implements HttpInterceptor {
7+
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
8+
req = req.clone({
9+
withCredentials: true,
10+
});
11+
12+
return next.handle(req);
13+
}
14+
}
15+
16+
export const httpInterceptorProviders = [
17+
{ provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true },
18+
];
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { TestBed } from '@angular/core/testing';
2+
3+
import { AuthService } from './auth.service';
4+
5+
describe('AuthService', () => {
6+
let service: AuthService;
7+
8+
beforeEach(() => {
9+
TestBed.configureTestingModule({});
10+
service = TestBed.inject(AuthService);
11+
});
12+
13+
it('should be created', () => {
14+
expect(service).toBeTruthy();
15+
});
16+
});

‎src/app/_services/auth.service.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Injectable } from '@angular/core';
2+
import { HttpClient, HttpHeaders } from '@angular/common/http';
3+
import { Observable } from 'rxjs';
4+
5+
const AUTH_API = 'http://localhost:8080/api/auth/';
6+
7+
const httpOptions = {
8+
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
9+
};
10+
11+
@Injectable({
12+
providedIn: 'root',
13+
})
14+
export class AuthService {
15+
constructor(private http: HttpClient) {}
16+
17+
login(username: string, password: string): Observable<any> {
18+
return this.http.post(
19+
AUTH_API + 'signin',
20+
{
21+
username,
22+
password,
23+
},
24+
httpOptions
25+
);
26+
}
27+
28+
register(username: string, email: string, password: string): Observable<any> {
29+
return this.http.post(
30+
AUTH_API + 'signup',
31+
{
32+
username,
33+
email,
34+
password,
35+
},
36+
httpOptions
37+
);
38+
}
39+
40+
logout(): Observable<any> {
41+
return this.http.post(AUTH_API + 'signout', { }, httpOptions);
42+
}
43+
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { TestBed } from '@angular/core/testing';
2+
3+
import { StorageService } from './storage.service';
4+
5+
describe('StorageService', () => {
6+
let service: StorageService;
7+
8+
beforeEach(() => {
9+
TestBed.configureTestingModule({});
10+
service = TestBed.inject(StorageService);
11+
});
12+
13+
it('should be created', () => {
14+
expect(service).toBeTruthy();
15+
});
16+
});

0 commit comments

Comments
(0)

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