Integrating Auth0 Single Page Web Application (SPA) with WSO2 API Manager and Invoking APIs

This post will guide you to configure how an SPA uses the generated access tokens from Auth0 via Authorization Code grant type to invoke an API deployed in WSO2 API Manager.

Prerequisites

1. Create an account in https://auth0.com/
2. Download API Manager version 4.1.0 distribution from https://wso2.com/api-management/

Creating Applications in Auth0

For this scenario, we will be needing to create SPA and a Machine-toMachine application. In order to create applications, navigate to application pane and click on “create application”

Create a SPA application and a Machine-to-Machine application from the below prompted box one after the other.

Note:

When creating the Machine-to-Machine application, Select “Auth0 Management API” when prompt to select the API and give “All” permissions and click on “Authorize”

Adding Auth0 as external KM in WSO2 API Manager

Open https://localhost:9444/admin/ to Add Auth0 as a Key Manager in WSO2 API Manager. Goto “Key Managers” section in left pane and click on “Add Key Manager”

Enter the Name, Display Name and select Key Manager Type as “Auth0”. Find the Well Known URL in newly created M2M application and enter and click on “Import”

Note:

To get the well-known url, Goto “Applications” in left plane > select Created M2M App > Select “Settings” tab> Scroll down and expand “advance settings” > select “Endpoints” and copy “OpenID Configuration”

Most of the following entries (Issuer, Client registration Endpoint, Token Endpoint, etc.) will get auto filled.

Enter the Introspect URL as “none”.

In claim URLs, Auth0 consumer claim URI is “aud”. Scopes claim URI is where we receive the scopes where we can authorise the API access.

Note:

Check the documentation on creating an action and attach the action to the login flow. The following is the action which will execute in the login flow which attaches the roles to “scopes” claim URI

Add client_credentials, authorization_code and implicit in Grant Types. Click “Enter” after adding each type.

In Auth0, Goto “Applications” in left plane > select Created M2M App > Select “Settings” tab and copy and fill Client ID, Client Secret.

In Auth0, Goto “Applications” in left plane > select Created M2M App > Select “APIs” tab and copy “API Identifier: https://dev-09uwihrc.us.auth0.com/api/v2/” and fill Audience.

Have the “Advance Configurations” as below and “Add” the Key Manager.

Publishing Sample API

Goto “https://localhost:9444/publisher/apis” and deploy the sample API ( It will automatically get published to in the process as well)

Or, create your own. I have created an API for an available service with a GET resource (http://localhost:8080/external/rest/customer/test).

Generating Access Token

Please refer Auth0 documentation for more information on generating access token.

In the web application, the below request will result with the Authorization Code. Use SPA Application information when generating the token.

https://dev-******.us.auth0.com/authorize?client_id=************&response_type=code&audience=https://dev-******.us.auth0.com/api/v2/&redirect_uri=http://localhost:3000

For testing purpose you could paste on the browser URL and enter which will result you with the Authorization Code in the URL itself which “http://localhost:3000” will be the redirection URL for the web application

http://localhost:3000/?code=***********************************

Then use the following cURL to generate the access token and save the token. The client_is and client_secret will be the values in the SPA Application created in Auth0.

curl --location --request POST 'https://dev-09uwihrc.us.auth0.com/oauth/token' --header 'Content-Type: application/x-www-form-urlencoded' --data-urlencode 'grant_type=authorization_code' --data-urlencode 'client_id=pfykVeyy********' --data-urlencode 'client_secret=MyaVYUY*******' --data-urlencode 'audience=https://dev-09uwihrc.us.auth0.com/api/v2/' --data-urlencode 'code=Kd9J7scLmQU0sRFDBXNwSZOSwK8jzq8Jz8y0_LiaZNKUf' --data-urlencode 'redirect_uri=http://localhost:3000'

Subscribing to the API and Invoking Using the Token Retrieved via SPA Application

Goto “https://localhost:9444/devportal” and add new application.

Enter “SPAApplication” as the name and “Save”

In the application setting page, Goto Production Keys and select Auth0 and click on PROVIDE EXISTING OAUTH KEYS and click on PROVIDE.

Note:

In Auth0, Goto “Applications” in left plane > select Created SPA App > Select “Settings” tab and copy and fill Client ID, Client Secret.

Use Machine to Machine application details to fill in the details.

Afterwards, click on APIs and click on the API which published.

Subscribe to API via the Subscriptions with the application created.

Click on TRY OUT in Overview

Select SPAApplication and enter the saved token in Authorization: Bearer section

Scroll down and expand GET and click on Try it out

Click on Execute

You will be able to invoke the service via API Manager Gateway with the token generated previously.

Hope you would got an idea on how to configure WSO2 API Manager, so that you could use the access tokens generated with authorization code grant via the web application to access the services exposed via WSO2 API Manager.