How to Decode a JWT in Angular Without a Library
- A reusable Angular service that decodes any JWT without a library
- How to extract claims and check expiry in Angular components
- Using interceptors to attach and refresh JWT tokens in HTTP calls
- When to use @auth0/angular-jwt vs rolling your own
Table of Contents
Angular does not include a built-in JWT decoder, but you do not need a library for decode-only use. A small injectable service using only browser APIs is everything most Angular apps need. Here is how to build and use it.
Create a JWT Decoder Service in Angular
// jwt.service.ts
import { Injectable } from '@angular/core';
export interface JwtPayload {
sub?: string;
email?: string;
name?: string;
exp?: number;
iat?: number;
[key: string]: unknown;
}
@Injectable({ providedIn: 'root' })
export class JwtService {
decodeToken(token: string): JwtPayload | null {
try {
const payload = token.split('.')[1];
const padded = payload + '=='.slice(0, (4 - payload.length % 4) % 4);
const decoded = atob(padded.replace(/-/g, '+').replace(/_/g, '/'));
return JSON.parse(decoded) as JwtPayload;
} catch {
return null;
}
}
isExpired(token: string): boolean {
const payload = this.decodeToken(token);
if (!payload?.exp) return false;
return Math.floor(Date.now() / 1000) > payload.exp;
}
getUserId(token: string): string | null {
return this.decodeToken(token)?.sub ?? null;
}
}Read Claims in Angular Components
// profile.component.ts
import { Component, OnInit } from '@angular/core';
import { JwtService } from './jwt.service';
import { AuthService } from './auth.service';
@Component({
selector: 'app-profile',
template: '<p>Hello {{ userName }}</p><p>Role: {{ userRole }}</p>'
})
export class ProfileComponent implements OnInit {
userName = '';
userRole = '';
constructor(
private jwt: JwtService,
private auth: AuthService
) {}
ngOnInit() {
const token = this.auth.getAccessToken();
if (token) {
const claims = this.jwt.decodeToken(token);
this.userName = claims?.name ?? 'User';
this.userRole = claims?.['https://myapp.com/role'] as string ?? 'viewer';
}
}
}Attach JWT to HTTP Requests With an Angular Interceptor
// jwt.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { AuthService } from './auth.service';
import { JwtService } from './jwt.service';
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
constructor(private auth: AuthService, private jwt: JwtService) {}
intercept(req: HttpRequest<unknown>, next: HttpHandler) {
const token = this.auth.getAccessToken();
if (token && !this.jwt.isExpired(token)) {
req = req.clone({
setHeaders: { Authorization: 'Bearer ' + token }
});
}
return next.handle(req);
}
}
// app.module.ts — register the interceptor
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
]When to Use @auth0/angular-jwt
The @auth0/angular-jwt package provides a JwtHelperService that does what the service above does, plus an HttpClientModule wrapper that auto-attaches tokens. It is worth adding if:
- Your team prefers an established package over a custom service
- You want the HTTP auto-attach feature without writing an interceptor
- You need TypeScript-typed return values without defining your own interface
The custom service above is sufficient for most applications and avoids a dependency. Either approach results in the same decoded payload — the JWT format does not change based on which tool you use.
Inspect Your Angular App JWT
Paste your access token above to see all claims and confirm the structure matches what your Angular service expects.
Open Free JWT DecoderFrequently Asked Questions
Does atob() work in Angular?
Yes. atob() is a global browser API available in all modern browsers that Angular supports. It also works in Angular Universal server-side rendering as long as you are running on Node.js 16+, which includes atob globally.
How do I decode a JWT in Angular without importing anything?
The decodeToken function in the service above uses only atob() and JSON.parse() — no imports needed. You can use it as a standalone function anywhere in your Angular app without the Injectable decorator.
What happens if the JWT expires while the user is on the page?
Your HTTP interceptor will stop attaching the expired token, and API calls will return 401. Handle this in an HttpInterceptor error handler — catch 401 responses, attempt a token refresh, then retry the failed request.
