Using The Open Source Developer Portal

The Moesif Developer Portal can be used by deploying it as a traditional React/Node app. The deployment will be self-managed and hosted on your own infrastructure.

The steps to run the portal include:

  • Downloading the source code
  • Populate the .env file as necessary (details covered below)
  • Build and run the project
  • Test that all functionality is working
  • Package and deploy onto your infrastructure/servers

For the developer portal to work, you’ll need to configure the following to work within the developer portal:

  • Your APIM solution
  • Your billing Provider (Stripe is currently supported)
  • Your Identity Provider, such as Auth0 or Okta

All of these, once configured, can be plugged in directly through the .env files contained within the API and front-end projects.

Downloading the Source Code

Using git, you’ll want to clone the Moesif Developer Portal repository to your local machine. If you’re unfamiliar with how to clone a git repository, check out the GitHub guide on how to do so.

Setting up the .env File

Each of the projects in the developer portal, my-dev-portal and my-dev-portal-api, require a .env file to function. In the .env file, various API keys and other credentials are stored. Of course, when moving to production you may want to move these from the .env file and into a more secure secrets management system.

In the root of both the my-dev-portal and my-dev-portal-api projects, create a .env file. In each project, there is a .env.template file that shows the variables that you need to add. You can copy and paste these contents into the new .env files created in each of the projects. Various environment variables are covered in their respective Developer Portal docs. Each APIM, Billing Provider, and Identity Provider will have the steps to populate the .env file variables for each platform being used.

In the my-dev-portal/.env file, you should have the following key/value pairs, which will be populated depending on your desired setup:

# Portal envars
HOST="127.0.0.1"
PORT="4000"

# Stripe envars
REACT_APP_STRIPE_PRICING_TABLE_ID="prctbl_123abc"
REACT_APP_STRIPE_PUBLISHABLE_KEY="pk_test_123abc"
REACT_APP_STRIPE_MANAGEMENT_URL="https://billing.stripe.com/p/login/test_123abc"

# API server envars
REACT_APP_DEV_PORTAL_API_SERVER="http://127.0.0.1:3030"

# Auth type envars
REACT_APP_AUTH_PROVIDER="Auth0|Okta"

# Auth0 envars
REACT_APP_AUTH0_DOMAIN="yoururl.us.auth0.com"
REACT_APP_AUTH0_CLIENT_ID="Your Auth0 Client ID"

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

The only value we need to set in this .env file currently is the REACT_APP_DEV_PORTAL_API_SERVER value. This should be set to the URL and port where our my-dev-portal-api project will be deployed. If you’re running this locally and using the default configuration, this value can stay as it is. If you are running your API project on another URL or port, you can change this value to match.

In the my-dev-portal-api/.env file, you should have the following key/value pairs, depending on your desired setup:

STRIPE_API_KEY="sk_test_123abc"
MOESIF_APPLICATION_ID="your Moesif application ID"
MOESIF_MANAGEMENT_TOKEN="your Moesif management token"
MOESIF_TEMPLATE_WORKSPACE_ID_LIVE_EVENT_LOG="workspace ID"
MOESIF_TEMPLATE_WORKSPACE_ID_TIME_SERIES="workspace ID"

# APIM Provider
APIM_PROVIDER="Kong|AWS|Tyk"

# AWS envars
AWS_INVOKE_URL="https://123abc.execute-api.region.amazonaws.com"

# Kong envars
KONG_URL="http://localhost:8001"

# Tyk envars
TYK_GATEWAY_URL="http://localhost:8080"
TYK_GATEWAY_SECRET_KEY="TYK_GATEWAY_SECRET_KEY"
TYK_DASH_ORG_ID="TYK_DASH_ORG_ID"

# Okta envars
OKTA_DOMAIN="https://you-okta-url.okta.com/"
OKTA_API_TOKEN="Okta API Token"

# Auth0 envars
AUTH0_DOMAIN="your-domain.us.auth0.com"
AUTH0_CLIENT_ID="auth0 client ID"
AUTH0_CLIENT_SECRET="auth0 client secret"
AUTH0_MANAGEMENT_API_AUDIENCE="https://your-domain.us.auth0.com/api/v2/"

The only value we need to set in this .env file currently is the MOESIF_APPLICATION_ID. The rest of these values will be populated as the APIM, Billing Provider, and Identity Provider are set up.

Running the Developer Portal

Due to how Auth0/Okta and Stripe are configured, you’ll need to define a host variable in your my-dev-portal/.env. We can also define a port for the front-end. We’ll set this to the following:

HOST="127.0.0.1"
PORT="4000"

Once everything is configured and plugged into the .env files, you can start up the Developer portal. This will require starting up both the UI and the API projects.

First, start the API application. To do this, in a terminal that is pointing to the /my-dev-portal-api directory in the project, run the following command:

node app.js

Note: you’ll need to keep this terminal running after the command executes.

Secondly, we need to start the front-end UI project. After opening another terminal at the /my-dev-portal directory, run the following command:

npm start

Note: you’ll need to keep this terminal running after the command executes.

Testing the Developer Portal

Once the Developer portal is configured and running, testing out all of the moving parts of the Developer Portal is crucial. Doing this ensures that everything is working as intended. A lot is going on across multiple platforms so it is highly recommended to double-check that nothing was missed during the setup process.

To start, navigate to your developer portal in the browser, and at the Home Screen of the Developer Portal click the Sign Up button in the top right. On the form that appears, create your user, select a product, and complete the checkout process, and then you should land in the Dashboard screen of the Developer Portal. At this point, depending on your setup, you can confirm a few things in the platforms that the Developer Portal connects with/uses:

Auth0

In Auth0, on the User Management > Users screen, you should see your newly created user present, tracked by their email.

Okta

In the Okta console, on the Directory > People screen, you should see your newly created user present, tracked by their email.

Stripe

In Stripe, on the Customers screen, you should also be able to see your newly created user as well, tracked by their email. If you click on the customer, you should also be able to see their subscription. The subscription should match the one selected in the sign-up flow in the Developer Portal

Kong

In Kong, under Consumers, you should also see your new user added. For this entry, you should also see the custom_id field with the Stripe customer ID as well (will resemble cus_123abc).

AWS

With the amount of moving parts in the AWS implementation for the Moesif Developer Portal, it’s important to ensure that everything functions as intended.

Log the current user out of the Moesif Developer Portal if you have one logged in. Execute the following steps to confirm that the flow is working as intended:

  • In the Moesif Developer Portal, log in with an existing user OR create a new user, log out, and log back in.
  • Next, go to the Keys screen in the developer portal
  • From the Keys screen, generate a new key and copy it onto your clipboard
  • Navigate to www.jwt.io and go to the Debugger screen. Paste the key into the debugger and ensure that both the Stripe Customer and Subscription ID have been added to the token’s data under the stripeCustomerId and stripeSubscriptionId fields. For example, your payload data should look like this:
{
 "stripeCustomerId": "cus_OXDy3IqRlUfHOz",
 "stripeSubscriptionId": "sub_1Nk9WyCUAiurhyBq9qUzE9w1",
 "iss": "https://dev-zojlepeedyeleun3.us.auth0.com/",
 "sub": "auth0|64ecdd7f90d5900e79704f1e",
 "aud": [
   "http://127.0.0.1:3030",
   "https://dev-zojlepeedyeleun3.us.auth0.com/userinfo"
 ],
 "iat": 1693487303,
 "exp": 1693573703,
 "azp": "VFgqgySNsjhRJCl5DjsU6niftMDxIByT",
 "scope": "openid profile email offline_access"
}

Once the Stripe info is confirmed in the token, send a request to your AWS Gateway endpoint and confirm that the API call shows up in the Live Event Log in Moesif. The API call should have the Stripe Customer and Subscription ID added in the Moesif User and Company fields, respectively. Lastly, add an invalid token (the easiest thing to do is remove a few characters from your existing token to invalidate it) and ensure that the AWS Lambda Authorizer we added also rejects any unauthorized calls.

Tyk

After you create a key in the next step, head to the Tyk Dashboard, under System Management > Keys you should see a new key created. You should see the Alias / Key Hash Value associated with a Stripe customer ID (will resemble cus_123abc).

Updated: