Configuring Auth0 as 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 Auth0 as an identity provider to work with the Moesif Developer Portal.

Creating the App within 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.

Adding Auth0 to the Moesif Developer Portal

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:

Field Description
Name A friendly name for the API. Example: “dev-portal-api”.
Identifier The API endpoint, as recommended by Auth0. Example: http://127.0.0.1:3000 or your API’s hosted URL.
Signing Algorithm Leave as default unless a specific algorithm is required.

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.

Conclusion

Once all the 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.

Updated: