stepup-authentication.alisaduncan.dev Open in urlscan Pro
44.217.161.11  Public Scan

Form analysis
0 forms found in the DOM

Text Content

STEP UP YOUR AUTHENTICATION GAME

@AlisaDuncan
Senior Developer Advocate at Okta

Consider the case of a buyer making a large purchase


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

OAuth 2.0

OpenID Connect


DELEGATE TO AN IDENTITY PROVIDER

OAuth 2.0

Authorization

OpenID Connect

Authentication


IDENTITY PROVIDER MANAGES AUTHENTICATION

Parameters in URL



GETTING GOING

github.com/
alisaduncan/angular-stepup-auth


TIME TO CODE

 1. Get Tour of Heroes project from alisaduncan/angular-stepup-auth
 2. Install dependencies with npm ci
 3. Run app locally using npm start
 4. Log in and sign up using password and email verification


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

Elevate authentication factors

Enforce recent authentication


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]
  },
  ...,
];


PROTECT THE ADMIN ROUTE

 1. Add a stepUpGuard in auth.guard.ts file
 2. Prevent route navigation by returning false
 3. Add the step up guard to the "/admin" route


OAUTH 2.0 + OPENID CONNECT

The snorkeler's view of the protocols


SNORKELING IN THE BAY OF
OAUTH 2.0 + OPENID CONNECT

OAuth 2.0

OpenID Connect


SNORKELING IN THE BAY OF
OAUTH 2.0 + OPENID CONNECT

OAuth 2.0

 * Authorization
 * Access token

OpenID Connect

 * Authentication
 * ID token

The Access and ID tokens are JSON Web Token (JWT) format

The Access and ID tokens are JSON Web Token (JWT) format

The payload contains metadata called "claims"

{
  "claimKey": "claimValue"
}

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)

acr

The claim identifying the current authentication level.

acr_values

The requested authentication level.

acr_values_supported

ACR values supported by the authorization server. May be listed in the OIDC
discovery document.


WHAT ABOUT ACCESS CONTROL MEASURES?

Access controls complement step up authentication challenge to better protect
views and resources.


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


FINISH STEP UP GUARD IMPLEMENTATION

 1. Get the acr claim from the ID token
 2. Check claim matches the acr_values
 3. Call authService.login()

Use route data to define ACR levels per route


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.
> 
> —OAuth 2.0 Step Up Authentication Challenge Protocol


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"
          

It's time we protect the heroes!


ENABLE STEP UP MIDDLEWARE IN API

 1. Add the StepUpMiddleware to routes
 2. Review the middleware implementation


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);
      })
    )
  }
}


RESPONDING TO STEP UP AUTH ERROR

 1. Ensure the HttpErrorResponse contains the step up auth error header
 2. Pull key step up auth info from the error
 3. Authenticate with the required ACR values
 4. Re-request the resource


SEE THE COMPLETED PROJECT

github.com/
alisaduncan/angular-stepup-auth

Check out the completed branch

Congrats!

Let's talk about next steps!

If you use Okta, the Angular SDK has built-in stepup auth support.


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






Resume presentation
Step up your authentication game @AlisaDuncan Senior Developer Advocate at Okta
@AlisaDuncan #stepupAuth