Angular Academy · Lesson

Adding Auth Headers

Attach tokens to outgoing requests.

Adding Auth Headers is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why intercept for auth

Most APIs require an Authorization header on every request. Rather than adding it manually to each call, an interceptor injects it automatically for all outgoing requests.

Cloning to add a header

Because requests are immutable, clone with setHeaders to attach the token.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  });
  return next(authReq);
};

Reading the token from a service

Inject an auth/token service to get the current token. Using a signal or BehaviorSubject inside it keeps the value fresh.

export class AuthService {
  private token = signal<string | null>(null);
  getToken() { return this.token(); }
  setToken(t: string) { this.token.set(t); }
}

Skip when no token

If the user is not logged in, pass the original request through unchanged.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  if (!token) return next(req);
  return next(req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  }));
};

Only attach to your API

Do not leak your token to third-party URLs. Guard by checking the request URL belongs to your backend.

const isApi = req.url.startsWith(environment.apiUrl);
if (!isApi || !token) return next(req);
return next(req.clone({
  setHeaders: { Authorization: 'Bearer ' + token }
}));

setHeaders vs headers.set

setHeaders in clone is the concise way. You can also use req.headers.set(...) and pass it via { headers }. setHeaders merges; it does not replace all headers.

const headers = req.headers.set('Authorization', 'Bearer ' + token);
return next(req.clone({ headers }));

Adding multiple headers

Attach several headers at once in a single clone.

return next(req.clone({
  setHeaders: {
    Authorization: 'Bearer ' + token,
    'X-Client': 'web',
    'Accept-Language': lang
  }
}));

withCredentials for cookies

If auth uses HttpOnly cookies instead of tokens, set withCredentials so the browser sends them cross-origin.

return next(req.clone({ withCredentials: true }));

Refreshing an expired token

For token refresh, the interceptor can catch a 401, request a new token, then retry the original request — a more advanced pattern covered with error handling.

Keeping the interceptor pure

The interceptor should read the token and clone — avoid triggering navigation or heavy logic here. Keep responsibilities focused so the request pipeline stays predictable.

Registering the auth interceptor

Place it early in the chain so the header is present before logging or other interceptors run.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Quick Check

Test your understanding of adding auth headers.

Recap: Adding Auth Headers

An auth interceptor attaches the token to outgoing requests.

Clone with setHeaders: { Authorization: ... }.
Skip when no token; restrict to your API URL.
Use withCredentials for cookie auth.

Next: handling errors globally.

Frequently asked questions

Is the “Adding Auth Headers” lesson free?

Yes — the full text of “Adding Auth Headers” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Adding Auth Headers”?

Attach tokens to outgoing requests. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Adding Auth Headers” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy