Configuring An Identity Provider

The Moesif Developer Portal requires an Identity Provider to secure the front-end application and control access. Currently, the Moesif Developer Portal supports Auth0 and Okta. Below are the steps required to set up each identity provider to work with the Moesif Developer Portal.

Creating the App within Your Identity Provider

Auth0

To configure Auth0 to work with the portal, you will need to create an Auth0 Application. To do this, log into Auth0, and from the left-side menu click on Applications and select Applications. From the Applications page, click the Create Application button.

In the modal that appears, fill in the Name field with a value such as Developer Portal and select Single Page Application as the Application Type. After these selections are made, click Create.

On the next page that appears, select the Settings tab. In the settings tab, scroll down to the Application URIs section. In this section you’ll need to add http://127.0.0.1:4000, or the URL where your developer portal will be hosted, as an entry for Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins.

Once added, scroll to the bottom of the page and click Save Changes to save your application’s settings.

Okta

To configure Okta to work with the portal, you will need to create an Okta Application for the dev portal. To do this, log into Okta, and from the left-side menu click on Applications and select Applications. From the Applications page, click the Create App Integration button.

In the modal that appears, Under Sign-in method select the OIDC - OpenID Connect option. In the Application type selection that appears, select Single-Page Application and click Next.

On the next page that appears, fill in the App integration name field with a value such as Developer Portal. Under Grant type, make sure Authorization Code and Refresh Token are selected. Then, Under the Sign-in redirect URIs section, add in the correct values, if you’re running this locally, an example value would be http://127.0.0.1:4000/login/callback. You’ll also want to add a similar value under the Sign-in redirect URIs, like http://127.0.0.1:4000/. Lastly, under Assignments, select Skip group assignment for now (unless you want to set this). Once added, scroll to the bottom of the page and click Save to save your application’s settings.

Adding the Identity Provider to the Moesif Developer Portal

Auth0

In the my-dev-portal/.env file, we will add the correct values for both the REACT_APP_AUTH0_DOMAIN and REACT_APP_AUTH0_CLIENT_ID entries. In the .env file, we will replace the following lines:

REACT_APP_AUTH0_DOMAIN="yoururl.us.auth0.com"
REACT_APP_AUTH0_CLIENT_ID="your Auth0 client ID"

In Auth0, navigate to the Applications screen and select the application you are using for the Developer Portal. Under the Settings tab, copy the value under Domain and add it to the value under REACT_APP_AUTH0_DOMAIN in the .env file. Next copy the Client ID value and add it as the value for the REACT_APP_AUTH0_CLIENT_ID entry in the .env file.

Once both values are added, save the file to make sure the updated values are persisted. Next, we will move on to creating our products in Stripe so that they can be used in the Developer Portal.

For AWS API Gateway

A few additional steps are required to get the AWS API Gateway integration to work. These include adding the Developer Portal API to Auth0 and adding logic to add additional fields from Stripe to the JWT.

Add The Developer Portal API to Auth0

In Auth0, we will also need to add our Developer Portal API to Auth0. To do this, log into Auth0, and from the left-side menu, select Applications > APIs.

Click the Create API button in the top right on the API screen to add the API to Auth0.

We will fill in the following fields:

Name - Here, we will put a friendly name for the API. For example, you can put in a value like “dev-portal-api”.
Identifier - In this field, we will put our API endpoint, as recommended by Auth0. For example, you can put in a value like http://127.0.0.1:3000 or the URL of where your Developer Portal API is hosted.
Signing Algorithm - This field can be left as the default unless you require something more specific.

Once the fields are filled in, click Create.

In the Developer Portal UI projects .env file, we will add the following values:

REACT_APP_AUTH0_AUDIENCE="http://127.0.0.1:3030"

The value here will be what you put in the Identifier field when you create the API in Auth0. Alternatively, you can retrieve the value by going to the APIs page again, locating your API, and copying the API Audience field.

Add Custom JWT Field Logic to Auth0

Next, we will add the logic to add the Stripe Customer and Subscription ID’s to the Auth0 JWT token. To do this, we will execute the following steps.

In Auth0, from the left-side menu, navigate to Actions > Flows > Login
In the right-side panel on the Login Flow screen, click Add Action > Build Custom
Name the Custom Action AddStripeDetailsToClaim
Add the code from the my-dev-portal-authorizer/auth0/AddStripeDetailsToClaim in the code editor.js file in the Moesif Developer Portal, overwriting the existing code.
Once the code is added, click Save Draft and then Deploy.
Back in the Flows screen, drag the AddStripeDetailsToClaim action (in the right-side panel under Custom) in between the Start and Complete actions.
Click Apply to update and activate the flow.

Add Auth0 Environment Variables to API Project

Lastly, we need to add a few additional environment variables to our API project .env file. In Auth0, go to Applications > APIs and select Auth0 Management API.

From this screen, we will be able to get the values for the following values in the my-dev-portal-api project’s .env file:

AUTH0_DOMAIN="your-domain.us.auth0.com"
AUTH0_CLIENT_ID="yOurAuth0CliENtID"
AUTH0_CLIENT_SECRET="abcd1234efgh5678"
AUTH0_MANAGEMENT_API_AUDIENCE="https://{your-domain.us.auth0.com}/api/v2/"

for the AUTH0_MANAGEMENT_API_AUDIENCE value, just swap out the {your-domain.us.auth0.com} for your domain but leave the https:// and /api/v2/ in place.

Once the values are added, save the .env file.

Okta

Frontend

REACT_APP_OKTA_ORG_URL="https://yoururl.okta.com/oauth2/default"
REACT_APP_OKTA_CLIENT_ID="Your Okta Client ID"

To get these values, in the Okta console, navigate to the Applications screen and select the application you are using for the Developer Portal. Copy the Client ID value and add it as the value for the REACT_APP_OKTA_CLIENT_ID entry in the .env file. For the REACT_APP_OKTA_ORG_URL you’ll use the domain where your Okta app is running and add /oauth2/default. If you’re just using a dev instance, the result will be something like "https://dev-123456.okta.com/oauth2/default.

Once both values are added, save the file to make sure the updated values are persisted. Next, we will move on to creating our products in Stripe so that they can be used in the Developer Portal.

Backend

In the my-dev-portal-api/.env file, we will add the correct values for both the OKTA_DOMAIN, OKTA_API_TOKEN, and OKTA_APPLICATION_ID entries. In the .env file, we will replace the following lines:

OKTA_DOMAIN="https://you-okta-url.okta.com/"
OKTA_API_TOKEN="Okta API Token"
OKTA_APPLICATION_ID="Okta App/Client Id"

First, fill in the OKTA_DOMAIN with the same value we used in the REACT_APP_OKTA_DOMAIN in the frontend .env but without the /oauth2/default route attached. Next, generate an API token (as described here), and add the value as the OKTA_API_TOKEN. Lastly, add the same Client ID value we used in the frontend .env to the value for OKTA_APPLICATION_ID.

Once all three values are added, save the file to make sure the updated values are persisted. Next, we will move on to creating our products in Stripe so that they can be used in the Developer Portal.