Before a user can access protected components, routes, or APIs Angular must first Authenticate them. This verification is fundamental to web security, creating a barrier that prevents unauthorized users from accessing sensitive information or performing restricted actions.
\nAuthentication is essentially about confirming “who you are” before granting access. In Angular applications, this involves validating users, like usernames and passwords, or verifying tokens from a trusted identity provider. When implemented properly, authentication creates a secure foundation for your application by ensuring only verified users can enter protected areas.
\nWithout robust authentication, your Angular application becomes vulnerable to countless security threats, it’s only a matter of time until user data is compromised.
\nAngular itself doesn’t implement authentication protocols directly. Instead, it provides a framework that makes integration with authentication systems a simple reality.
\nRemember for the actual identity verification, Angular relies on external authentication providers. These can range from your own custom backend solution to open-source solutions like SuperTokens.
\nThe separation of concerns allows Angular applications to integrate with virtually any authentication system while maintaining a clean architecture focused on delivering the core user experience.
\nPeople often use authentication and authorization interchangeably; this is a mistake, both serve distinct security functions in Angular applications. For a more detailed breakdown read this blog: Authentication vs Authorization: What’s the difference?
\nAuthentication is fundamentally about identity verification, confirming that users are who they claim to be; this involves:
\nThe auth process usually results in a security token being issued that serves as digital proof for subsequent requests.
\nAuthorization, on the other hand, determines what authenticated users can do within your application. This involves:
\nEven after a user authenticates successfully, authorization ensures they can only access the resources appropriate for their role or permission level.
\nA prevalent misconception among Angular developers is treating route guards as complete authentication solutions, rather than authorization mechanisms. This confusion can lead to security gaps in application design.
\nRoute guards like CanActivate and CanLoad are primarily authorization tools that enforce access rules, but they rely on a proper authentication system to function correctly. The common points of confusion include:
For secure Angular applications, authentication and authorization should work in harmony—authentication services verify identity and manage tokens, while route guards use this authentication state to enforce access policies throughout the application. The backend must always validate both authentication and authorization independently, as client-side checks can be circumvented.
\nA robust authentication system in Angular relies on several key components working together to create a secure user experience.
\nThe login form is your authentication system’s entry point, available in two main implementations:
\nCustom-built forms offer maximum flexibility, with reactive forms providing type safety and robust validation. These forms can be precisely tailored to match your application’s specific requirements and user flows.
\nComponent library-based forms accelerate development through pre-built, tested components from libraries like Angular Material or NgBootstrap. These ready-made solutions handle common authentication patterns while allowing customization to match your design.
\nAn effective login interface balances security with usability, incorporating elements like password strength indicators and meaningful error messages.
\nInterceptors are middleware components that transparently manage authentication across API requests by:
\nThis centralized token management eliminates the need to manually handle authentication headers throughout your codebase, improving security and reducing code duplication.
\nGuards protect navigation paths based on authentication status, connecting your auth system to Angular’s routing framework:
\nThese guards create a coherent security layer that directs users to appropriate content while preventing unauthorized access to protected resources.
\nAuthentication state must be securely maintained throughout the user session:
\nBrowser storage (localStorage/sessionStorage) offers simple persistence but with security limitations regarding XSS vulnerabilities.
\nCookies provide enhanced security options through HttpOnly, Secure, and SameSite flags that protect against common attack vectors.
\nState management libraries like NgRx or NGXS offer robust solutions for complex authentication flows in larger applications, with features like centralized state and action tracking.
\nIn-memory services balance security and simplicity by keeping authentication state in application memory, reducing exposure to client-side attacks.
\nThe right combination of these components creates an authentication system that effectively protects your application while providing a seamless experience for legitimate users.
\nJWT (JSON Web Token) authentication is the most widely adopted method in modern Angular applications. After successful login, the server generates a signed JWT containing encoded user information and permissions. This token is then:
\nJWTs are self-contained and stateless, making them ideal for scalable applications. However, they require careful implementation regarding token expiration, refresh strategies, and secure storage to prevent XSS attacks.
\nThe traditional authentication approach uses server-side sessions paired with client cookies. When implementing this in Angular:
\nThis method offers stronger security against XSS attacks through HttpOnly cookies but creates server-side state that can complicate scaling. Modern implementations often use Redis or similar technologies to manage distributed session storage.
\nFor applications requiring social logins or enterprise single sign-on (SSO), OAuth 2.0 with OpenID Connect provides a standardized authentication framework:
\nangular-oauth2-oidc simplify integrationThis approach offloads complex security concerns to specialized providers while enabling seamless integration with existing identity ecosystems. It’s particularly valuable for enterprise applications requiring compliance with security standards.
\nIncreasingly popular passwordless authentication eliminates password vulnerabilities through alternative verification methods:
\nLibraries like SuperTokens provide Angular-compatible implementations that handle the complex workflows involved in secure passwordless authentication. This method improves security by eliminating password-related vulnerabilities while often enhancing user experience through simplified login flows.
\nEach authentication method has distinct security characteristics and implementation requirements. Many modern Angular applications implement hybrid approaches, combining multiple methods to balance security with user experience based on specific application requirements.
\nBefore we begin let’s make sure we have a project structure
\nmkdir jwt-auth-project
\n\nNOTE: All code for this project can be found at this repo
\n
We’ll be making use of Node.js for our backend
\n cd jwt-auth-project\n mkdir backend\n cd backenduse npm to init our project
npm init -y\nnpm install express jsonwebtoken cors dotenv cookie-parserCreate a simple js server that can issue JWT tokens, provides public and private api routes, and some traceability so we can see what’s happening in our system.
\nFile: backend/server.js
const express = require('express');\nconst cors = require('cors');\nconst jwt = require('jsonwebtoken');\nconst cookieParser = require('cookie-parser');\nrequire('dotenv').config();\n\nconst app = express();\nconst PORT = process.env.PORT || 3000;\nconst JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';\n\napp.use(cors({\norigin: 'http://localhost:4200',\ncredentials: true // Important for cookies\n}));\napp.use(express.json());\napp.use(cookieParser()); // Needed to parse cookies from requests\n\n// Mock user database\n// IMPORTANT: In a production environment, NEVER store passwords in plain text.\n// Always use a hashing library like bcrypt to hash passwords securely.\nconst users = [{\n id: 1,\n username: 'miles@web.com',\n password: 'e-1610'\n}];\n\napp.post('/api/login', (req, res) => {\nconsole.log('Login attempt received:', req.body);\n\nconst { username, password } = req.body;\nconsole.log('Credentials extracted:', { username, password });\n\nconst user = users.find(u => u.username === username);\nconsole.log('User found:', user ? 'Yes' : 'No');\n\nif (!user) {\n console.log('User not found, returning 401');\n return res.status(401).json({ message: 'Invalid credentials' });\n}\n\nconst isPasswordValid = password === user.password;\nconsole.log('Password valid:', isPasswordValid);\nconsole.log('Received password:', password);\nconsole.log('Stored password:', user.password);\n\nif (!isPasswordValid) {\n console.log('Password invalid, returning 401');\n return res.status(401).json({ message: 'Invalid credentials' });\n}\nconsole.log('Authentication successful, generating token');\n\n// Generate JWT\nconst token = jwt.sign(\n { id: user.id, username: user.username },\n JWT_SECRET,\n { expiresIn: '1h' }\n);\n\n// Option 1: Send JWT as HttpOnly cookie (more secure)\nres.cookie('jwt_token', token, {\n httpOnly: true,\n secure: process.env.NODE_ENV === 'production', // HTTPS only in production\n sameSite: 'strict',\n maxAge: 3600000 // 1 hour\n});\nconsole.log('Token generated and cookie set');\n\n// Option 2: Send JWT in response body (for sessionStorage)\nres.json({ \n message: 'Login successful',\n token, // Remove this in production if using HttpOnly cookies\n user: { id: user.id, username: user.username }\n});\nconsole.log('Login response sent');\n});\n\n// User must be authd for this route\napp.get('/api/protected', verifyToken, (req, res) => {\nconsole.log('Protected route accessed by:', req.user?.username);\nres.json({ \n message: 'This is protected data', \n user: req.user,\n timestamp: new Date().toISOString()\n});\n});\n\n// Token verification middleware\nfunction verifyToken(req, res, next) {\nconsole.log('Verifying token...');\n\n// Option 1: Get token from cookies\nconst tokenFromCookie = req.cookies?.jwt_token;\nconsole.log('Token from cookie:', tokenFromCookie ? 'Present' : 'Not present');\n\n// Option 2: Get token from Authorization header\nconst authHeader = req.headers.authorization;\nconst tokenFromHeader = authHeader && authHeader.split(' ')[1];\nconsole.log('Token from header:', tokenFromHeader ? 'Present' : 'Not present');\n\nconst token = tokenFromCookie || tokenFromHeader;\n\nif (!token) {\n console.log('No token found, access denied');\n return res.status(401).json({ message: 'Access denied' });\n}\n\ntry {\n const decoded = jwt.verify(token, JWT_SECRET);\n console.log('Token verified successfully for user:', decoded.username);\n req.user = decoded;\n next();\n} catch (error) {\n console.error('Token verification failed:', error.message);\n res.status(401).json({ message: 'Invalid token' });\n}\n}\n\napp.post('/api/logout', (req, res) => {\nconsole.log('Logout request received');\n\nres.clearCookie('jwt_token');\nconsole.log('JWT cookie cleared');\nres.json({ message: 'Logged out successfully' });\n});\n\napp.get('/api/hello', (req, res) => {\nconsole.log('Hello endpoint accessed');\nres.json({ \n message: 'Hello from the server!',\n timestamp: new Date().toISOString()\n});\n});\n\napp.listen(PORT, () => {\nconsole.log(`Server running on http://localhost:${PORT}`);\nconsole.log('Test credentials: user@example.com / auth123');\nconsole.log('Available endpoints:');\nconsole.log(' POST /api/login - Login endpoint');\nconsole.log(' GET /api/protected - Protected endpoint (requires authentication)');\nconsole.log(' POST /api/logout - Logout endpoint');\nconsole.log(' GET /api/hello - Public test endpoint');\n});File: backend/.env
JWT_SECRET=your-secret-key \nPORT=3000The .env file contains environment variables that your server uses at runtime.
Note: With the .env file the default values in server.js will be used, which is fine for development but not secure for production.
Let’s create the Angular Authentication Components, navigate to the top level project directory and run the ng new cmd. This will create a frontend directory.
ng new frontend --routing=true --style=\"scss\" --package-manager=\"npm\" --skip-git=true --skip-tests=trueFile: frontend/src/app/auth/auth.service.ts
import { Injectable } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { BehaviorSubject, Observable, tap } from 'rxjs';\n\n@Injectable({\nprovidedIn: 'root'\n})\nexport class AuthService {\nprivate apiUrl = 'http://localhost:3000/api';\nprivate currentUserSubject = new BehaviorSubject<any>(null);\npublic currentUser$ = this.currentUserSubject.asObservable();\n\nconstructor(private http: HttpClient) {\n // Check sessionStorage for existing user on service init\n const storedUser = sessionStorage.getItem('currentUser');\n if (storedUser) {\n this.currentUserSubject.next(JSON.parse(storedUser));\n }\n}\n\nlogin(username: string, password: string): Observable<any> {\n console.log('Login attempt:', username);\n \n return this.http.post<any>(`${this.apiUrl}/login`, { username, password }, {\n withCredentials: true // Important for cookies\n }).pipe(\n tap(response => {\n console.log('Login response received:', response);\n \n // If using sessionStorage (Option 2)\n if (response.token) {\n const user = {\n ...response.user,\n token: response.token\n };\n \n // Store user details in sessionStorage\n sessionStorage.setItem('currentUser', JSON.stringify(user));\n this.currentUserSubject.next(user);\n console.log('User stored in session storage');\n }\n // If using HttpOnly cookies (Option 1)\n else if (response.user) {\n this.currentUserSubject.next(response.user);\n }\n })\n );\n}\n\nlogout(): Observable<any> {\n console.log('Logout service method called');\n \n return this.http.post<any>(`${this.apiUrl}/logout`, {}, {\n withCredentials: true // Important for cookies\n }).pipe(\n tap(() => {\n console.log('Logout response received, clearing session storage');\n // Clear sessionStorage\n sessionStorage.removeItem('currentUser');\n this.currentUserSubject.next(null);\n console.log('Current user reset to null');\n })\n );\n}\n\nget currentUserValue() {\n return this.currentUserSubject.value;\n}\n\nisLoggedIn(): boolean {\n return !!this.currentUserValue;\n}\n}File: frontend/src/app/auth/login/login.component.ts
import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';\nimport { Router } from '@angular/router';\nimport { CommonModule } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { AuthService } from '../auth.service';\n\n@Component({\nselector: 'app-login',\nstandalone: true,\nimports: [CommonModule, ReactiveFormsModule], // These are critical!\ntemplateUrl: './login.component.html',\nstyleUrls: ['./login.component.scss']\n})\nexport class LoginComponent implements OnInit {\nloginForm!: FormGroup;\nloading = false;\nerror = '';\napiResponse: any = null; // Property for API test results\n\nconstructor(\n private formBuilder: FormBuilder,\n private authService: AuthService,\n private router: Router,\n private http: HttpClient // Required for API testing\n) { }\n\nngOnInit(): void {\n this.loginForm = this.formBuilder.group({\n username: ['', [Validators.required, Validators.email]],\n password: ['', Validators.required]\n });\n \n // Redirect if already logged in\n if (this.authService.isLoggedIn()) {\n this.router.navigate(['/dashboard']);\n }\n}\n\nonSubmit(): void {\n if (this.loginForm.invalid) {\n return;\n }\n \n this.loading = true;\n this.error = '';\n \n const { username, password } = this.loginForm.value;\n \n this.authService.login(username, password)\n .subscribe({\n next: () => {\n this.router.navigate(['/dashboard']);\n },\n error: err => {\n this.error = err.error?.message || 'Login failed';\n this.loading = false;\n }\n });\n}\n\n// Add testApi method for API testing\ntestApi(endpoint: 'hello' | 'protected'): void {\n console.log(`Testing ${endpoint} API endpoint`);\n this.apiResponse = null; // Clear previous response\n \n this.http.get(`http://localhost:3000/api/${endpoint}`, {\n withCredentials: true // Important for cookies\n }).subscribe({\n next: (response) => {\n console.log(`${endpoint} API response:`, response);\n this.apiResponse = response;\n },\n error: (error) => {\n console.error(`${endpoint} API error:`, error);\n this.apiResponse = {\n error: true,\n message: error.error?.message || error.statusText || 'Unknown error',\n status: error.status\n };\n }\n });\n}\n}File: frontend/src/app/auth/login/login.component.html
You can test the API endpoints before and after login to see how authentication works.
\n \n \n \n{{ apiResponse | json }}\n <div class=\"login-container\">\n<h2>Login</h2>\n\n<form [formGroup]=\"loginForm\" (ngSubmit)=\"onSubmit()\">\n <div class=\"form-group\">\n <label for=\"username\">Email</label>\n <input\n type=\"email\"\n id=\"username\"\n formControlName=\"username\"\n class=\"form-control\"\n [ngClass]=\"{ 'is-invalid': loginForm.get('username')?.touched && loginForm.get('username')?.invalid }\"\n />\n <div *ngIf=\"loginForm.get('username')?.touched && loginForm.get('username')?.invalid\" class=\"invalid-feedback\">\n <div *ngIf=\"loginForm.get('username')?.errors?.['required']\">Email is required</div>\n <div *ngIf=\"loginForm.get('username')?.errors?.['email']\">Please enter a valid email</div>\n </div>\n </div>\n \n <div class=\"form-group\">\n <label for=\"password\">Password</label>\n <input\n type=\"password\"\n id=\"password\"\n formControlName=\"password\"\n class=\"form-control\"\n [ngClass]=\"{ 'is-invalid': loginForm.get('password')?.touched && loginForm.get('password')?.invalid }\"\n />\n <div *ngIf=\"loginForm.get('password')?.touched && loginForm.get('password')?.invalid\" class=\"invalid-feedback\">\n <div *ngIf=\"loginForm.get('password')?.errors?.['required']\">Password is required</div>\n </div>\n </div>\n \n <div class=\"form-group\">\n <button [disabled]=\"loading || loginForm.invalid\" class=\"btn btn-primary\">\n {{ loading ? 'Logging in...' : 'Login' }}\n </button>\n </div>\n \n <div *ngIf=\"error\" class=\"alert alert-danger mt-3\">\n {{ error }}\n </div>\n</form>\n\n<div class=\"api-test\">\n <h3>API Test</h3>\n <p class=\"test-description\">You can test the API endpoints before and after login to see how authentication works.</p>\n <button (click)=\"testApi('hello')\" class=\"test-btn\">Test Public API</button>\n <button (click)=\"testApi('protected')\" class=\"test-btn\">Test Protected API</button>\n \n <div *ngIf=\"apiResponse\" class=\"response-box\">\n <h4>API Response:</h4>\n <pre>{{ apiResponse | json }}</pre>\n </div>\n</div>\n</div>\nFile: frontend/src/app/auth/login/login.component.scss
.login-container {\nmax-width: 400px;\nmargin: 50px auto;\npadding: 20px;\nbox-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\nborder-radius: 5px;\n\nh2 {\n text-align: center;\n margin-bottom: 20px;\n}\n\n.form-group {\n margin-bottom: 15px;\n \n label {\n display: block;\n margin-bottom: 5px;\n font-weight: 500;\n }\n \n .form-control {\n width: 100%;\n padding: 8px;\n border: 1px solid #ddd;\n border-radius: 4px;\n \n &.is-invalid {\n border-color: #dc3545;\n }\n }\n \n .invalid-feedback {\n color: #dc3545;\n font-size: 12px;\n margin-top: 5px;\n }\n \n .btn {\n width: 100%;\n padding: 10px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n \n &:disabled {\n background-color: #7abaff;\n cursor: not-allowed;\n }\n }\n}\n\n.alert {\n padding: 10px;\n border-radius: 4px;\n \n &.alert-danger {\n background-color: #f8d7da;\n color: #721c24;\n border: 1px solid #f5c6cb;\n }\n}\n\n.api-test {\n margin-top: 30px;\n padding-top: 20px;\n border-top: 1px solid #eee;\n \n h3 {\n margin-bottom: 10px;\n font-size: 18px;\n }\n \n .test-description {\n font-size: 14px;\n color: #666;\n margin-bottom: 15px;\n }\n \n .test-btn {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 8px 12px;\n margin-right: 10px;\n margin-bottom: 10px;\n border-radius: 4px;\n cursor: pointer;\n }\n \n .test-btn:hover {\n background-color: #0069d9;\n }\n \n .response-box {\n margin-top: 15px;\n padding: 15px;\n background-color: #f1f1f1;\n border-radius: 4px;\n overflow: auto;\n \n h4 {\n margin-top: 0;\n margin-bottom: 10px;\n font-size: 16px;\n }\n \n pre {\n margin: 0;\n white-space: pre-wrap;\n font-size: 13px;\n }\n }\n}\n}In our implementation, we’ve provided two options for storing JWTs, with HttpOnly cookies as the recommended approach and sessionStorage as a fallback:
\nOption 1: HttpOnly Cookies (Primary Recommended Approach)
\nOption 2: sessionStorage (Fallback Option)
\nOur implementation supports both approaches simultaneously:
\nWhy SessionStorage over LocalStorage?
\nLet’s create an HTTP interceptor to automatically attach the JWT to all outgoing requests. Angular offers two ways to create interceptors: class-based and function-based.
\nFile: frontend/src/app/interceptors/jwt.interceptor.ts
import { HttpInterceptorFn } from '@angular/common/http';\nimport { inject } from '@angular/core';\nimport { AuthService } from '../auth/auth.service';\n\nexport const jwtInterceptor: HttpInterceptorFn = (request, next) => {\nconst authService = inject(AuthService);\n\n// Get the current user from the auth service\nconst currentUser = authService.currentUserValue;\n\n// If using sessionStorage and we have a token, add it to the Authorization header\nif (currentUser && currentUser.token) {\n request = request.clone({\n setHeaders: {\n Authorization: `Bearer ${currentUser.token}`\n }\n });\n}\n\n// If the endpoint requires credentials (for HttpOnly cookies), add withCredentials\nif (request.url.includes('/api/')) {\n request = request.clone({\n withCredentials: true\n });\n}\n\nreturn next(request);\n};Register the function-based interceptor in frontend/src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';\nimport { provideRouter } from '@angular/router';\nimport { provideHttpClient, withInterceptors } from '@angular/common/http';\n\nimport { routes } from './app.routes';\nimport { jwtInterceptor } from './interceptors/jwt.interceptor';\n\nexport const appConfig: ApplicationConfig = {\nproviders: [\n provideRouter(routes),\n provideHttpClient(withInterceptors([jwtInterceptor]))\n]\n};\nCreate an authentication guard to protect routes.
\nFile: frontend/src/app/guards/auth.guard.ts
import { Routes } from '@angular/router';\nimport { LoginComponent } from './auth/login/login.component';\nimport { DashboardComponent } from './dashboard/dashboard.component';\nimport { AuthGuard } from './guards/auth.guard';\n\nexport const routes: Routes = [\n{ path: 'login', component: LoginComponent },\n{ \n path: 'dashboard', \n component: DashboardComponent,\n canActivate: [AuthGuard] \n},\n{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },\n{ path: '**', redirectTo: '/dashboard' }\n];We already implemented the logout method in our auth service. Let’s add a simple component to use it.
\nFile: frontend/src/app/auth/logout/logout.component.ts
import { Component } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { AuthService } from '../auth.service';\n\n@Component({\nselector: 'app-logout',\ntemplate: `\n <button class=\"logout-btn\" (click)=\"logout()\">\n Logout\n </button>\n`,\nstyles: [`\n .logout-btn {\n background: none;\n border: none;\n color: #007bff;\n cursor: pointer;\n font-size: 16px;\n padding: 5px 10px;\n }\n .logout-btn:hover {\n text-decoration: underline;\n }\n`]\n})\nexport class LogoutComponent {\n\nconstructor(\n private authService: AuthService,\n private router: Router\n) {}\n\nlogout(): void {\n this.authService.logout().subscribe({\n next: () => {\n this.router.navigate(['/login']);\n },\n error: err => {\n console.error('Logout error:', err);\n // Even if the server request fails, we want to clear local state\n sessionStorage.removeItem('currentUser');\n this.router.navigate(['/login']);\n }\n });\n}\n}File: frontend/src/app/dashboard/dashboard.component.ts
Hello, {{ currentUser?.username }}
\n \nStatus: Authenticated
\nAuth Method: {{ hasToken ? 'JWT in sessionStorage' : 'HttpOnly Cookie' }}
\n \n{{ apiResponse | json }}\n import { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { Router } from '@angular/router';\nimport { AuthService } from '../auth/auth.service';\n\n@Component({\nselector: 'app-dashboard',\nstandalone: true,\nimports: [CommonModule],\ntemplate: `\n <div class=\"dashboard\">\n <h2>Welcome to your Dashboard</h2>\n <p>Hello, {{ currentUser?.username }}</p>\n \n <div class=\"auth-status\" *ngIf=\"currentUser\">\n <h3>Authentication Status</h3>\n <p><strong>Status:</strong> Authenticated</p>\n <p><strong>Auth Method:</strong> {{ hasToken ? 'JWT in sessionStorage' : 'HttpOnly Cookie' }}</p>\n \n <div class=\"api-test\">\n <h3>API Test</h3>\n <button (click)=\"testApi('hello')\" class=\"test-btn\">Test Public API</button>\n <button (click)=\"testApi('protected')\" class=\"test-btn\">Test Protected API</button>\n \n <div *ngIf=\"apiResponse\" class=\"response-box\">\n <h4>API Response:</h4>\n <pre>{{ apiResponse | json }}</pre>\n </div>\n </div>\n </div>\n \n <div class=\"actions\">\n <button class=\"logout-btn\" (click)=\"logout()\">Logout</button>\n </div>\n </div>\n`,\nstyles: [`\n .dashboard {\n max-width: 800px;\n margin: 50px auto;\n padding: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n border-radius: 5px;\n }\n \n .auth-status {\n margin: 20px 0;\n padding: 15px;\n background-color: #f8f9fa;\n border-radius: 5px;\n }\n \n .api-test {\n margin-top: 20px;\n padding-top: 15px;\n border-top: 1px solid #eee;\n }\n \n .test-btn {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 8px 12px;\n margin-right: 10px;\n border-radius: 4px;\n cursor: pointer;\n }\n \n .test-btn:hover {\n background-color: #0069d9;\n }\n \n .response-box {\n margin-top: 15px;\n padding: 15px;\n background-color: #f1f1f1;\n border-radius: 4px;\n overflow: auto;\n }\n \n pre {\n margin: 0;\n white-space: pre-wrap;\n }\n \n .actions {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #eee;\n text-align: right;\n }\n \n .logout-btn {\n background: none;\n border: none;\n color: #007bff;\n cursor: pointer;\n font-size: 16px;\n padding: 5px 10px;\n }\n \n .logout-btn:hover {\n text-decoration: underline;\n }\n`]\n})\nexport class DashboardComponent implements OnInit {\ncurrentUser: any;\nhasToken: boolean = false;\napiResponse: any = null;\n\nconstructor(\n private authService: AuthService,\n private http: HttpClient,\n private router: Router\n) {}\n\nngOnInit(): void {\n this.authService.currentUser$.subscribe(user => {\n console.log('Dashboard received user update:', user);\n this.currentUser = user;\n \n // Check if we're using token-based auth (sessionStorage)\n const storedUser = sessionStorage.getItem('currentUser');\n this.hasToken = storedUser ? true : false;\n });\n}\n\ntestApi(endpoint: 'hello' | 'protected'): void {\n console.log(`Testing ${endpoint} API endpoint`);\n this.apiResponse = null; // Clear previous response\n \n this.http.get(`http://localhost:3000/api/${endpoint}`, {\n withCredentials: true // Important for cookies\n }).subscribe({\n next: (response) => {\n console.log(`${endpoint} API response:`, response);\n this.apiResponse = response;\n },\n error: (error) => {\n console.error(`${endpoint} API error:`, error);\n this.apiResponse = {\n error: true,\n message: error.error?.message || error.statusText || 'Unknown error',\n status: error.status\n };\n }\n });\n}\n\nlogout(): void {\n console.log('Logout button clicked');\n \n this.authService.logout().subscribe({\n next: () => {\n console.log('Logout successful, redirecting to login page');\n this.router.navigate(['/login']);\n },\n error: err => {\n console.error('Logout error:', err);\n // Even if the server request fails, we want to clear local state\n sessionStorage.removeItem('currentUser');\n console.log('Session storage cleared, redirecting to login page');\n this.router.navigate(['/login']);\n }\n });\n}\n}cd jwt-auth-project/backend\nnode server.jsYou should see output like:
\nServer running on http://localhost:3000\nTest credentials: miles@web.com / e-1610\nAvailable endpoints:\n POST /api/login - Login endpoint\n GET /api/protected - Protected endpoint (requires authentication)\n POST /api/logout - Logout endpoint\n GET /api/hello - Public test endpointNote: In a different terminal start the frontend server
\ncd jwt-auth-project/frontend\nng serveNavigate to http://localhost:4200 in your browser, notice the backend server will print out what’s happening. Attempt to access the protected api before and after getting a jwt.
\nAfter implementing JWT authentication from scratch, you’ve seen firsthand the complexities involved: token storage decisions, interceptor setup, session management, and this is before even considering long-term support. While building it yourself provides valuable learning, production applications often benefit from specialized authentication libraries. This is where SuperTokens shines:
\nSuperTokens supports multiple authentication methods out of the box:
\nTraditional email and password authentication with built-in:
\nModern authentication without passwords:
\nThe beauty of SuperTokens is that these authentication methods require minimal boilerplate. The library provides pre-built UI components that you can use as-is or customize to match your application’s design.
\nSuperTokens provides a dedicated Angular SDK that integrates smoothly with Angular’s architecture:
\nSuperTokens automatically handles complex session-related tasks:
\nWith SuperTokens’ built-in route guards, protecting routes in your Angular application becomes straightforward. The guards integrate with Angular’s router to check authentication status before allowing access to protected routes.
\nSuperTokens provides several security advantages over a custom implementation:
\nSuperTokens uses HttpOnly cookies by default, protecting tokens from XSS attacks by making them inaccessible to JavaScript running in the browser.
\nBuilt-in Cross-Site Request Forgery protection is enabled automatically when using cookies, preventing attackers from tricking users into making unintended requests.
\nSessions are refreshed in the background without disrupting the user experience, ensuring a smooth user experience while maintaining security.
\nSuperTokens implements rotating refresh tokens, enhancing security by making stolen tokens invalid after use. This approach significantly reduces the risk of session hijacking.
\nSuperTokens supports immediate session revocation, allowing you to log out users from all devices in case of a security breach or suspicious activity.
\nIntegrating SuperTokens into an Angular application involves a few high-level steps:
\nThe entire process typically takes hours rather than days, with most of the security complexities handled automatically by SuperTokens.
\nMore information can be found at the SuperTokens documentation:
\nSuperTokens Frontend Angular setup
\nSuperTokens Authentication Overview
\nSuperTokens Migration Overview
\nEven experienced developers encounter challenges when implementing authentication in Angular applications. Here are the most common pitfalls and practical solutions.
\nJWTs typically expire after 15-60 minutes. When this happens during an active session, users suddenly receive 401 errors and get logged out, creating a poor experience.
\nImplement a silent refresh strategy:
\nThis approach maintains seamless user sessions while preserving security benefits of short-lived tokens.
\nMany tutorials suggest storing JWTs in localStorage for simplicity, but this exposes tokens to XSS attacks since any JavaScript on your site can access localStorage.
\nUse more secure storage approaches:
\nWhen using cookies, ensure proper security flags are set (HttpOnly, Secure, SameSite=Strict).
\nCookie-based authentication is vulnerable to Cross-Site Request Forgery (CSRF) attacks where malicious sites trick users into making unwanted actions.
\nAdd appropriate CSRF protection:
\nChoose the right protection based on your authentication method: cookie-based auth needs CSRF protection, token-based auth with Authorization headers typically doesn’t.
\nAngular applications often face timing issues during initialization where protected routes may render before authentication state is determined.
\nEnsure auth state is resolved before navigation:
\nThis prevents flickering UI, unauthorized access, and redirect loops in your application.
\nImplementing a secure authentication system in Angular requires attention to several key areas. Here are five essential practices to ensure your application remains secure while providing a smooth user experience.
\nHow you store authentication tokens directly impacts your application’s security.
\nSecure and SameSite=Strict flags for additional protectionTokens stored in HttpOnly cookies provide significant security advantages over browser storage options, especially for production applications.
\nEnsure users can only access the content they’re authorized to see.
\nCanActivate guards to all protected routesRemember that route guards are a convenience feature, not a security boundary. Always validate authorization on your server as well.
\nThe ability to invalidate active sessions is crucial for maintaining security.
\nProper revocation ensures that compromised credentials can be quickly invalidated, minimizing the damage from security breaches.
\nA well-implemented token refresh mechanism balances security with user experience.
\nLibraries like SuperTokens handle this complexity automatically. If building from scratch, carefully implement refresh logic to avoid race conditions.
\nProper cross-origin configuration is essential for secure authentication.
\nSameSite=Strict cookie settingCORS misconfiguration is a common source of security vulnerabilities in modern web applications. Test your configuration thoroughly with cross-domain requests.
\nModern applications often support authentication through popular OAuth providers like Google, GitHub, and Microsoft. This approach allows users to log in with existing accounts while delegating security to established providers.
\nAngular applications can integrate with OAuth providers using specialized libraries.
\nThe angular-oauth2-oidc library is a popular choice for implementing OAuth in Angular:
\nKey Features:
\nBasic Setup Process:
\nnpm install angular-oauth2-oidcThe standard OAuth flow follows these steps:
\nWhen a user clicks “Login with Google,” your app redirects to the provider’s authentication page.
\nThe user authenticates with the provider and grants permission for your app to access their information.
\nThe provider redirects back to your application with an authorization code that your app exchanges for tokens.
\nThe provider returns several tokens:
\nYour application extracts user information from the tokens and establishes a session.
\nThis flow happens largely behind the scenes when using libraries like angular-oauth2-oidc, which handle the complexity for you.
\nWhile OAuth delegates much of the authentication security to providers, there are still important considerations:
\nAlways validate received tokens:
\nImplement Cross-Site Request Forgery protection:
\nstate parameter to verify authentication requestsFollow the same secure storage principles discussed earlier:
\nMost OAuth libraries handle these security measures automatically, but understanding them helps you configure the libraries correctly.
\nIf you’re using SuperTokens, integrating OAuth providers becomes even simpler.
\nSuperTokens offers pre-built integration with:
\nYou can still create your own UI while leveraging SuperTokens’ backend authentication flow, giving you flexibility without sacrificing security.
\nOAuth providers are particularly valuable when:
\nBy implementing OAuth authentication with providers like Google, GitHub, or Microsoft, you create a more user-friendly login experience while leveraging the robust security infrastructure of established identity providers.
\nUnlike some frameworks that include built-in authentication, Angular leaves this critical functionality up to you:
\nThe responsibility for secure authentication falls entirely on developers, making external libraries and best practices crucial for production applications.
\nJSON Web Tokens (JWT) provide a powerful mechanism for authentication in Angular applications, but security depends on proper implementation:
\nOur detailed implementation demonstrated these concerns while showing how to build a functional JWT authentication system from the ground up.
\nWhile building authentication from scratch is educational, production applications benefit from battle-tested solutions:
\nBy using SuperTokens or similar authentication libraries, you gain robust security with significantly less development effort and risk.
\nAuthentication in Angular applications requires deliberate design and implementation. Whether you build from scratch or leverage existing solutions, understanding the security implications of your choices is essential.\nThe approaches covered in this from manual JWT implementation to SuperTokens integration provide a foundation for creating secure, user-friendly authentication systems in your Angular applications.
","frontmatter":{"date":"May 18, 2025","title":"Angular Authentication","cover":"angular-authentication.png","author":"Maurice Saldivar","description":"Learn how Angular authentication works, key methods to secure apps, and how to integrate with providers like SuperTokens or OAuth."},"fields":{"slug":"/angular-authentication/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"39117a2c-ea43-58ca-8d04-0e78b19de575","fields__slug":"/angular-authentication/","__params":{"fields__slug":"angular-authentication"}}}, "staticQueryHashes": []}