Helper library for handling JWTs in Angular apps
MIT License
📚 Documentation - 🚀 Getting Started - 💻 API Reference - 💬 Feedback
This library provides an HttpInterceptor
which automatically attaches a JSON Web Token to HttpClient
requests.
This library does not have any functionality for (or opinion about) implementing user authentication and retrieving JWTs to begin with. Those details will vary depending on your setup, but in most cases, you will use a regular HTTP request to authenticate your users and then save their JWTs in local storage or in a cookie if successful.
This project only supports the actively supported versions of Angular as stated in the Angular documentation. Whilst other versions might be compatible they are not actively supported
# installation with npm
npm install @auth0/angular-jwt
# installation with yarn
yarn add @auth0/angular-jwt
Import the JwtModule
module and add it to your imports list. Call the forRoot
method and provide a tokenGetter
function. You must also add any domains to the allowedDomains
, that you want to make requests to by specifying an allowedDomains
array.
Be sure to import the HttpClientModule
as well.
import { JwtModule } from "@auth0/angular-jwt";
import { HttpClientModule } from "@angular/common/http";
export function tokenGetter() {
return localStorage.getItem("access_token");
}
@NgModule({
bootstrap: [AppComponent],
imports: [
// ...
HttpClientModule,
JwtModule.forRoot({
config: {
tokenGetter: tokenGetter,
allowedDomains: ["example.com"],
disallowedRoutes: ["http://example.com/examplebadroute/"],
},
}),
],
})
export class AppModule {}
Any requests sent using Angular's HttpClient
will automatically have a token attached as an Authorization
header.
import { HttpClient } from "@angular/common/http";
export class AppComponent {
constructor(public http: HttpClient) {}
ping() {
this.http.get("http://example.com/api/things").subscribe(
(data) => console.log(data),
(err) => console.log(err)
);
}
}
If you are using bootstrapApplication
to bootstrap your application using a standalone component, you will need a slightly different way to integrate our SDK:
import { JwtModule } from "@auth0/angular-jwt";
import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
export function tokenGetter() {
return localStorage.getItem("access_token");
}
bootstrapApplication(AppComponent, {
providers: [
// ...
importProvidersFrom(
JwtModule.forRoot({
config: {
tokenGetter: tokenGetter,
allowedDomains: ["example.com"],
disallowedRoutes: ["http://example.com/examplebadroute/"],
},
}),
),
provideHttpClient(
withInterceptorsFromDi()
),
],
});
As you can see, the differences are that:
importProvidersFrom
.provideHttpClient
needs to be called with withInterceptorsFromDi
.Read our API reference to get a better understanding on how to use this SDK.
We appreciate feedback and contribution to this repo! Before you get started, please see the following:
To provide feedback or report a bug, please raise an issue on our issue tracker.
Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.