diff --git a/app/index.js b/app/index.js index 8fdb0bd..a341f19 100644 --- a/app/index.js +++ b/app/index.js @@ -32,9 +32,25 @@ export const callApi = async ({ auth0, url, btnId }) => { history.pushState('', null, window.location.pathname); - const accessToken = ['scoped-api-btn', 'private-api-btn'].includes(btnId) - ? await auth0.refreshTokens(true) - : await auth0.getAccessToken(); + let accessToken = undefined; + + if (['step-up-api-btn'].includes(btnId)) { + const authOptions = { + cacheMode: "off", + authorizationParams: { + acr_values: `http://schemas.openid.net/pape/policies/2007/06/multi-factor`, + scope: "authRocks:admin", + redirect_uri: window.location.href, + audience: auth0.config?.audience, + }, + } + accessToken = await auth0.getTokenWithPopup(authOptions); + } + else { + accessToken = ['scoped-api-btn', 'private-api-btn'].includes(btnId) + ? await auth0.refreshTokens(true) + : await auth0.getAccessToken(); + } const fetchOptions = { method: 'GET', @@ -96,6 +112,7 @@ export default async () => { const publicAPIButton = document.querySelector('#public-api-btn'); const privateAPIButton = document.querySelector('#private-api-btn'); const scopedAPIButton = document.querySelector('#scoped-api-btn'); + const stepUpAPIButton = document.querySelector("#step-up-api-btn"); loginButton.addEventListener('click', () => auth0.login()); @@ -127,6 +144,14 @@ export default async () => { }) ); + stepUpAPIButton.addEventListener('click', () => + callApi({ + auth0, + url: window.location.origin + apiUrl + '/admin', + btnId: 'step-up-api-btn', + }) + ); + // If unable to parse the history hash, default to the root URL if (!showContentFromUrl(window.location.pathname)) { showContentFromUrl('/'); diff --git a/index.html b/index.html index 02e2cd6..451f9fd 100644 --- a/index.html +++ b/index.html @@ -1,242 +1,258 @@ - - - AuthRocks! UI App - - - - - - - - - - - -
-
- +
+
+
+
+
+

Hang tight!

+

The monkeys are working.

+
+
-
-
-
- -

Welcome to AuthRocks!

- -

- This is a sample application that demonstrates an authentication - flow for an SPA. -

-
+
+
+
+ +

Welcome to AuthRocks!

-
-

- Please login to continue. -

-
-
-

- Congratulations, you've logged in! -

- -
- -
-

Challenge 1: Custom Application Sign-on

-

- You're seeing this content because you're currently - logged in. -

-
+ +
+

+ Please login to continue. +

+
+
+

+ Congratulations, you've logged in! +

+ +
+ +
+

Challenge 1: Custom Application Sign-on

+

+ You're seeing this content because you're currently + logged in. +

+ -
- - - -
-

Challenge 2: Protect The API

- -
- -

- The first API is available to any calls, even without - authentication. -

-
- -
- -

- The second API requires authentication, and will only - respond successfully with an access token from the - configured tenant. -

-
- -
- -

- The last API not only requires authentication, but also - requires the proper authorization scopes/permissions in the - access token. -

-
- -
-
-
-
Result
- 
+              
+
+ + + +
+

Challenge 2: Protect The API

+ +
+ +

+ The first API is available to any calls, even without + authentication. +

+
+ +
+ +

+ The second API requires authentication, and will only + respond successfully with an access token from the + configured tenant. +

+
+ +
+ +

+ The last API not only requires authentication, but also + requires the proper authorization scopes/permissions in the + access token. +

+
+ +
+ +

+ For sensitive operations, the API requests an access token with a specific scope, i.e. + authRocks:admin, which + is provided to the application in form of custom claims. The custom claim in the access token + is only granted after users confirms their identity using multi-factor authentication (MFA). + +

+
+ +
+ +
+
+
Result
+
-
- - Back to Top - -
+
+ + Back to Top +
- -
+ +
+
-
-

- Please configure your app to continue. -

-
+
+

+ Please configure your app to continue. +

+
-