Step up your authentication game

Get ready to code!

💖

Follow along using

Node.js

v18+

Your
favorite IDE

Terminal
window

Browser

Authentication is an expectation

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

Authentication may not be enough

We treat authentication equally across applications, and use authorization for access control.

But should we?

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
        

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

What about recency?

• Replace acr_values with max_age
• Calculate recency using auth_time claim

Have good authentication security

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