Free Mapbox SSO Configuration with Auth0

I was in search of a free way to let people access our Mapbox account without giving company credentials. From there, I found Mapbox SSO which I configured with Auth0 to enable SSO (single-sign on) access to our company’s Mapbox.

System Overview:

• A NextJS application has a link with a redirect_url pointing to Mapbox’s provided single sign-on URL. The link is an href to the Auth0 application which is a login form.
• The Auth0 Mapbox SSO Integration provides fields to paste into Mapbox’s SSO configuration page
• The Auth0 application references an allowlist for users allowed to sign up using a pre-registration action
• On successful sign in, the SAML attribute role is set from user_metadata (this value is set during the pre-user-registration action) to be Admin. According to Mapbox’s SSO configuration page, “Users with the Admin role can read and write to all resources and APIs. They cannot access invoices, nor can they read or write to account settings.”

Required Code

Pre-user registration action (Auth0):

exports.onExecutePreUserRegistration = async (event, api) => {
  // Define your allowlist of emails
  const allowlist = [
    (List of allowed emails)
  ];

  // Check if the user's email is in the allowlist
  if (!event.user.email || !allowlist.includes(event.user.email)) {
    // If the email is not in the allowlist, deny access
    const msg = 'Access denied: Your email is not in the allowlist.'
    api.access.deny(msg, msg);
  }
  api.user.setUserMetadata("role", "admin")
};

Post-registration action (Auth0):

exports.onExecutePostLogin = async (event, api) => {
  const role = event.user.user_metadata["role"]
  api.samlResponse.setAttribute("role", role)
};

Link from the NextJS app:

  <a href="<domain name from the Mapbox application>/authorize?response_type=code&client_id=<client id from the Mapbox application>redirect_uri=<Mapbox-provided Single Sign-on URL>">
    Click here to redirect to SSO for MapBox
  </a>

Note: In the “Application URIs” section of the Mapbox application settings, I set these two values:

• Application Login URI: NextJS application URL containing the redirect tag
• Allowed Callback URLs: Mapbox-provided Single Sign-on URL