Ability to provide organization name during Authorization Code Flow

Feedback
, ,
#1

Problem Statement

We are building a multitenant system, where authentication is based on Auth0 and every tenant is an Auth0 organization. The frontend is implemented in React and is using auth0-react for authentication needs. Our Auth0 client/application is configured to display organization prompt by default. During the login flow our end users have to provide their tenant name (that is, type it in the organization prompt).

We want to improve login experience for customers that connect 3rd party IDPs (for example, their own Okta) to our Auth0 by providing them a bookmark URL that can be used in their Okta SSO portal. Ideally, this URL should sign-in authenticated end users in our app without additional prompts.

Auth0-Okta SSO Flow
Auth0-Okta SSO Flow685×595 15.3 KB

This looks feasible. However, at this moment there is no way to send organization name in Auth0Provider properties - primarily because this is not supported by Auth0 server in authorization code flow (as stated by React SDK devs in this GitHub issue).

Proposed Solution

Ideally, we would like to see Auth0 server being enhanced to accept organization_name attribute, which will allow us to skip organization prompt in a way similar to what organization attribute does today.

Available Alternatives

There are a couple of alternatives that we thought about.

Option 1
We can send organization ID to make the flow work. This means that we will have to expose internal ID of the Auth0 organization, which corresponds to the customer tenant. This solution is prone to the future internal changes, system migrations etc, and will force us to maintain those IDs pretty much forever.

Option 2
We can expose an unauthenticated API that will provide name-to-ID mapping and will be used on the SPA side to convert tenant/org name to organization ID. This API will have to utilize Auth0 management API internally - which in turn is subject to Auth0 rate limits. This means that we will have to implement own rate limiting, DoS protection etc.

Both alternatives introduce unnecessary complications to our systems. This feature would make our life much easier!

#2

Woow! Thank you for providing such extensive context. I’m gonna relay that to our product teams!

1 Like
#3

We are also running in to the same issue. Hope to see this implemented soon!

3 Likes
#4

Thanks for adding your +1!

#5

Another solution to improve the Org picking experience for your users is that you could inject javascript on the org picker page by customizing the universal login page template, Customize New Universal Login Pages.

This is a POC to replace the existing Org picker page with something more dynamic. I havn’t found a way to pass any url context through tho, since you just see that state parameter.

<!DOCTYPE html><html>
  <head>
    {%- auth0:head -%}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 
  <style>
    .orgWidgetVisible{
      display: flex;align-items: center;justify-content: center;
    }
    .orgWidgetHidden{
      display:none
    }
  </style>
​
  </head>
  <body  >
    <div id = "auth0Widget" class="orgWidgetVisible">
    {%- auth0:widget -%}
  </div>
​
    {% if prompt.name == "organizations" or prompt.screen.name == "organization-selection" %} 
​
    <script>
​
      function showOrgPicker(){
      
        let widget = document.getElementById("auth0Widget");
        widget.classList.toggle("orgWidgetHidden");
​
        let orgPicker = document.getElementsByName("orgPicker")[0];
        orgPicker.style.display = "block";
​
        let orgButton = document.getElementById("btnShowOrgPicker");
        orgButton.style.display = "none";
​
      }
​
      function orgSelected(org){
        
        let widget = document.getElementById("auth0Widget");
        widget.classList.toggle("orgWidgetHidden");
​
        let orgPicker = document.getElementsByName("orgPicker")[0];
        orgPicker.style.display = "none";
​
        let txtOrgName = document.getElementsByName("organizationName")[0];
        txtOrgName.value = org;
        txtOrgName.focus();
​
        let orgButton = document.getElementById("btnShowOrgPicker");
        orgButton.style.display = "block";
      }
  </script>
   <div style="display:flex;justify-content:center;align-items:center; margin-top: 20px;">
        <div>   <button class="btn btn-secondary" id="btnShowOrgPicker" onclick="showOrgPicker()" >I don't know my organization Name</button></div>
      </div>
 
        <div name="orgPicker" style="display:none;color:white" >
            <table class="table">
              <thead>
                <th>
                  Organization Name
                </th>
                <th>
                  Organization
                </th>
              </thead>
              <tr>
                <td><button class="btn btn-secondary" onclick="orgSelected('appleconn')" >appleconn</button></td>
                <td>Apple</td>
              </tr>
              <tr>
                <td><button class="btn btn-secondary" onclick="orgSelected('testorg')" >testorg</button></td>
                <td>The other org</td>
              </tr>
        </div>
​
 
    {% endif %}
​
  </body></html>
#6

Hi, we’re also building a multitenant SaaS and we would like to streamline the way our client’s users use Auth0 for logging in. We would also very much like first-party support for a organization_name attribute in the Auth0 server. Is there any update on this issue?

#7

Unfortunately not yet. Sorry for the inconvenience and thanks for advocating for that! I will let you know as soon as we know something!

#8

+1 for this feature, we’re currently using a lambda to exchange the name of the id using the management api, but would prefer to use the name directly

1 Like
#9

Thanks for providing that context @thomas.liversidge !

#10

To further expand on our use case, we also want to allow bookmarking of organization names via URLs that we can give to customers, and bypass the Organization login page where you have to type your organization name.

So what we’re doing is giving customers something like

https://{organization-name}.myapp.mycompany.com

and then calling a custom lambda we’ve written from JavaScript to exchange this organization-name-as-subdomain concept for an organizationId that can then be used with the Auth0 JS client library

would be much better for us if we could just use the Auth0 JS client library with the organization-name directly…

2 Likes
#11

Gotchya! Thanks for sharing that!