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

Creating the App within 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 Okta to the Moesif Developer Portal

Frontend

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_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.

Conclusion

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.