Step up your authentication game

Get ready to code!

💖

Follow along using

Node.js

v18+

Your
favorite IDE

Terminal
window

Browser

Delegate to an Identity Provider

Delegate to an Identity Provider

Identity Provider manages authentication

Parameters in URL

Getting going

github.com/
alisaduncan/angular-stepup-auth

It's time to treat authentication with more granularity than true or false

RFC 9470 OAuth 2.0 Step Up Authentication Challenge

Step Up Authentication Challenge

Request stepped-up auth

Guard a route

export const myGuard: CanActivateFn = (route, state) => {
  return true;
};

export const routes: Routes = [
  {
    path: 'protected',
    component: MyComponent,
    canActivate: [myGuard]
  },
  ...,
];

OAuth 2.0 + OpenID Connect

The snorkeler's view of the protocols

Snorkeling in the bay of
OAuth 2.0 + OpenID Connect

Snorkeling in the bay of
OAuth 2.0 + OpenID Connect

The Authentication Context Class Reference (ACR) define business rules identifying levels of assurance profiles

ACR value in token

{
  "iss": "https://as.example.net",
  "sub": "someone@example.net",
  "aud": "https://rs.example.com",
  "exp": 1646343000,
  "iat": 1646340200,
  "jti" : "e1j3V_bKic8-LAEB_lccD0G",
  "client_id": "s6BhdRkqt3",
  "scope": "purchase",
  "auth_time": 1646340198,
  "acr": "myACR"
}

Step up auth in action

Step up auth in action

Step up auth in action

Step up auth in action

Step up auth in action

Step up auth in action

{
  "iss": "https://as.example.net",
  "sub": "someone@example.net",
  "aud": "https://rs.example.com",
  "exp": 1646343000,
  "iat": 1646340200,
  "jti" : "e1j3V_bKic8-LB_lDG",
  "client_id": "s6BhdRkqt3",
  "scope": "purchase",
  "auth_time": 1646340198,
  "acr": "low-ACR-level"
}

Step up auth in action

acr_values="elevated"

Step up auth in action

Authentication Context Class Reference (ACR)

• Supports standard values and custom registries
• Examples include phr for phishing-resistant, phrh for phishing-resistant hardware

Authentication Context Class Reference (ACR)

• Examples include phr for phishing-resistant, phrh for phishing-resistant hardware

• You may see ACR values such as phr, http://schemas.openid.net/pape/policies/2007/06/multi-factor, and urn:okta:loa:2fa:any

Authentication Context Class Reference (ACR)

Step up authentication route guard

const authLevelMet = authService.acrClaim === ACR_VALUES_2FA;
 
if (authLevelMet) return true; // continue navigation
 
// else authenticate with required acr_values & redirect to URL
authService.login(ACR_VALUES_2FA, currentURL);
return false; // prevent navigation for now
const authLevelMet = authService.acrClaim === ACR_VALUES_2FA;
 
if (authLevelMet) return true; // continue navigation
 
// else authenticate with required acr_values & redirect to URL
authService.login(ACR_VALUES_2FA, currentURL);
return false; // prevent navigation for now
const authLevelMet = authService.acrClaim === ACR_VALUES_2FA;
 
if (authLevelMet) return true; // continue navigation
 
// else authenticate with required acr_values & redirect to URL
authService.login(ACR_VALUES_2FA, currentURL);
return false; // prevent navigation for now
const authLevelMet = authService.acrClaim === ACR_VALUES_2FA;
 
if (authLevelMet) return true; // continue navigation
 
// else authenticate with required acr_values & redirect to URL
authService.login(ACR_VALUES_2FA, currentURL);
return false; // prevent navigation for now

What else can we protect?

It is not uncommon for resource servers to require different authentication strengths or recentness according to the characteristics of a request.

Protecting resources, not just views

Error!

acr_values="elevated"

Resource server error

HTTP/1.1 401 Unauthorized
WWW-Authenticate: Bearer error="insufficient_user_authentication",
  error_description="A different authentication level is required",
  acr_values="myACR"
          

Handle the error response

The Angular app orchestrates authenticating and re-requesting resources.

Interceptors in Angular

Use an interceptor to format the HTTP response error into something we can handle within the app

Interceptors in Angular

export const stepupInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    catchError(handleError)
  );
};

Interceptors in Angular

const handleError = (httpError: HttpErrorResponse) => {
    // verify origin url
    // ensure error is 'insufficient_user_authentication'
    // format a new Error with acr_values
};

export const stepupInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    catchError(handleError)
  );
};

Responding to errors in services

export class HeroService {
  private router = inject(Router);
  private http = inject(HttpClient);
  private authService = inject(AuthService);

  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>('/api/heroes').pipe(
      catchError(error => {
        // handle step up auth error response

        return throwError(() => error);
      })
    )
  }
}

What about recency?

• Replace acr_values with max_age
• Calculate recency using auth_time claim

Learn more

@AlisaDuncan

Senior Developer Advocate at Okta |
Angular GDE | Pluralsight Author Get the slides

• Add Step-up Authentication Using Angular and NestJS
• RFC 9470 OAuth 2.0 Step Up Authentication Challenge Protocol