Skip to main content
This guide refers to using SSO to authenticate access to your endpoints. You cannot use these instructions to set up SSO for logging into your ngrok account in the dashboard.
This guide walks you through configuring Azure AD B2C as an Identity Provider for your ngrok Edge using single sign-on (SSO). By integrating Azure AD B2C with ngrok, you can:
  • Restrict access to ngrok tunnels to only users who authenticated via Azure AD B2C
  • Allow users to authenticate via a local account or federated accounts via Azure AD B2C

​
What you’ll need

  • An ngrok Enterprise account with an authtoken or admin access to configure edges with SAML.
  • A Microsoft Azure account with access to an Azure AD B2C tenant.
  • An understanding of Azure AD B2C custom policies.

​
1. Create an ngrok Edge

  • Go to the ngrok dashboard.
  • Click Universal Gateway > Edges.
  • Create an Edge:
    • Click New Edge.
    • Click HTTPS Edge.
    • Click the pencil icon next to “no description”. Enter Edge With Azure Active Directory B2C SSO as the Edge name and click Save.
  • Configure the SAML module for this Edge:
    • On the Routes section, click SAML.
    • Click Begin setup.
    • In the Identity Provider section, copy the following XML as a placeholder into the input box: 
      <EntityDescriptor xmlns="urn:oasis:names:tc:SAML:2.0:metadata"></EntityDescriptor>
    • Click Save.
  • Note that ngrok has now generated values for the fields in the Service Provider section. These will be used to configure Azure AD B2C later.

​
2. Configure Azure AD B2C custom policies

  • Follow the Azure AD B2C documentation to create user flows and custom policies.
  • Some hints:
    • For a SAML application, you need to configure custom policies; user flows alone are not sufficient.
    • You can use the Azure AD B2C custom policy starter pack or the IEF Setup App to automate these steps.
    • To keep things simple, use the LocalAccounts starter pack. This means users will sign up and log in as users in your Azure AD B2C tenant instead of with another identity provider. This means you can skip configuring Facebook as an identity provider. If you are using the IEF Setup App, click the checkbox for Remove Facebook references before you deploy the starter pack.
    • Skip the steps of Register a web application and Enable ID token implicit grant unless you’d like to test this now. A SAML application will be registered and tested later.

​
3. Create an Azure AD B2C SAML application

  • Follow the Azure AD B2C documentation to register your SAML application and configure custom policies for SAML.
  • Some hints:
    • Update your previously created custom policies to use SAML. You can either update the files in the starter pack repo or download the XML files for your existing policies from the Identity Experience Framework in the Azure portal.
    • If you are using the LocalAccounts starter pack, remember to adjust the orchestration step order value to 4 as noted in these docs.
    • Use the following mapping of Azure AD B2C configuration properties to ngrok generated values (found in your Edge’s SAML configuration in the Service Provider section) to configure your application:
      Azure AD B2Cngrok
      RedirectURIACS URL
      identifierUriEntityID
      samlMetadataUrlSP Metadata

​
4. Update the ngrok Edge with the IdP metadata

  • Back in the ngrok dashboard for your Edge’s SAML configuration, copy and paste the XML found at the IdP Saml Metadata URL in the Identity Provider section, replacing the previously set placeholder value. Note the IdP Metadata URL follows this format: https://<tenant-name>.b2clogin.com/<tenant-name>.onmicrosoft.com/<policy-name>/Samlp/metadata.
  • Click Save.

​
5. Test the integration

This step assumes you have an app running locally (for example, at localhost:3000) with the ngrok client installed.
  • Launch a tunnel connected to your configured Edge.
  • On your Edge’s page, in the Routes section, click Start a tunnel.
  • Copy the tunnel command.
  • Launch a terminal and paste the command, replacing http://localhost:80 with your local web app address (for example, http://localhost:3000).
  • Press Enter to launch the tunnel.
  • Confirm that the tunnel is connected to your edge:
    • Return to the ngrok dashboard.
    • Close the Start a tunnel and the Tunnel group drawers.
    • Refresh the Edge page.
    • In the Routes section > Traffic section you will see the message You have 1 tunnel online. Start additional tunnels to begin load balancing.
  • Copy the ngrok URL on the Endpoints section.
  • Access your Edge application:
    • In your browser, launch an incognito window.
    • Access your ngrok tunnel via your copied URL.
    • You should be prompted to log in or sign up.
  • After logging in, you should be able to see the application.

​
Bonus: Update your Azure AD B2C custom policies to support the password reset flow

From the test, you may notice that the Forgot your password? link doesn’t work. You will need to embed the password reset flow as part of your sign up / sign in custom policy for local accounts, as the LocalAccounts starter pack did not include this flow as part of the sign up / sign in policy. Azure AD B2C provides sample policies for the password reset flow; use those to configure this.