Auth0

By integrating Auth0 with OwnID, you can implement the full set of OwnID features to simplify and streamline your user login experience.

​

How it Works

OwnID supports integration with Auth0 through our pre-built Auth0 Connector.

Configuration on the Auth0 side happens through your Auth0 Dashboard. Ensure you have an account with sufficient access in Auth0.

Complete these five basic steps to integrate OwnID with Auth0:

Step 1 - Get API Explorer Credentials.

Step 2 - Create the OwnID App.

Step 3 - Add OwnID as an Auth0 Social Connection.

Step 4 - Frontend Integration.

​

Step 1 - Get API Explorer Credentials.

1. In your Auth0 Dashboard go to Applications -> Applications -> API Explorer Application ^{Figure 1. API Explorer Application in Auth0 Dashboard}

2. If this app is not listed for you, you’d have to quickly create it:

   Go to Applications -> APIs -> Auth0 Management API, select tab API Explorer and click Create & Authorize API Explorer Application After that you should see API Explorer Application in the list of applications. ^{Figure 2. Create & Authorize API Explorer Application}

3. In API Explorer Application go to Settings tab and copy Client ID and Client Secret values. We will use them in the next step. ^{Figure 3. API Explorer Credentials}

​

Step 2 - Create the OwnID App

We’ll create a new OwnID app using the Auth0 Connector.

An OwnID App is what connects the existing identity provider used by your website with the OwnID widget you insert on the front end.

Each of your OwnID Apps acts as the central point of configuration for each of your integrations. These no-code Apps are created, hosted, and maintained entirely within the OwnID Console environment. When you create an App, it’s assigned a unique appId automatically. Use that appId in OwnID SDK interaction from your website’s front end.

​

To Create an OwnID App

1. Login to the OwnID Console (or create your account).

2. Click +Create Application from the Apps screen.

3. Enter a name for your application in the App name field.

4. From the Choose your integration panel, select the Okta tile.

5. Click Next.

6. Click Explore my App on the “Congratulations” popup.

​

Set Auth0 Integration Parameters

In your Auth0 integration page, fill in the following information:

1. In Auth0 Settings, set the Site Domain - e.g: https://acme.auth0.com

2. In Auth0 Settings, set the Client ID value you created above.

3. In Auth0 Settings, skip the Client Secret value you created above. ^{Figure 4. Auth0 settings}

4. In OpenID Connect settings, set Redirect URIs by adding one or more Auth0 redirect URIs, typically in the format https://your-auth-domain.com/login/callback.

5. Click Save Changes.

The other values in this page will be used in the next step.

​

Add OwnID as an Auth0 Social Connection.

Create a new social connection in Auth0.

1. In your Auth0 Dashboard, go to Authentication -> Social.

2. Click + Create Connection. ^{Figure 5. Create connection}

3. Scroll all the way to the bottom of the widgets list and select Create Custom. ^{Figure 6. Create custom}

4. In the General section, configure the following settings:

   • Name: OwnID
   • Authorization URL: The value from the OwnID application created in the previous step.
   • Token URL: The value from the OwnID application created in the previous step.
   • Scope: openid profile email
   • Separate scopes using a space: Enabled
   • Client ID: The value from the OwnID application created in the previous step.
   • Client Secret: The value from the OwnID application created in the previous step.
   • Fetch User Profile Script: Use the script provided below.
   • Custom Headers: Leave empty.

   In the Advanced section, disable Sync user profile attributes at each login.

function(accessToken, ctx, cb) {
    const parts = accessToken.split('.');
    const payload = JSON.parse(Buffer.from(parts[1], 'base64').toString('utf8'));
    const profile = {
        user_id: payload.user_id || payload.sub
    };
    cb(null, profile);
}

5. Click Create.

6. Once created, go to the Applications -> Applications page, choose the application you want to integrate with OwnID.

7. In the Connections tab, under the Social section, make sure ownid is enabled. ^{Figure 7. App connections}

​

Step 5 - Frontend Integration

1. In your custom login page HTML, add the following code snippet (in the <body> part). Make sure to fill in the appId of your OwnID application you created in the previous steps.

<script>
    ((o,w,n,i,d)=>{o[i]=o[i]||(async(...a)=>((o[i].q=o[i].q||[]).push(a),{error:null,data:null})),
    (d=w.createElement("script")).src='https://cdn.ownid.com/sdk/'+n,d.async=1,w.head.appendChild(d)})
    (window,document,'<app id>','ownid');
</script>

2. Add the following code snippet in addition. Make sure to fill in the app_client_id of your Auth0 application. If you are not using the Auth0 lock api , you can remove the lock.on part and just keep the ownid("login", ...) part. Make sure to call it after elements exist in the DOM.

const app_client_id = "<your auth0 app client id>"
lock.on("signin ready", function() {
    ownid("login", {
        loginIdField: document.getElementById("username"),
        targetField: document.getElementById("username"),
        variant: "inline",
        widgetPosition: "end",
        onError: (error) => console.log("ownid login failed", error),
        onLogin: function (data) {
            const { authToken } = data?.metadata || {};
            const query = new URLSearchParams(window.location.search);
            const nextQuery = new URLSearchParams();
            nextQuery.set("client_id", query.get("client") || app_client_id);
            nextQuery.set("response_type", "code");
            nextQuery.set("redirect_uri", query.get("redirect_uri") || "https://login.au.auth0.com/login/callback");
            nextQuery.set("scope", query.get("scope") || "openid profile email");
            nextQuery.set("state", query.get("state"));
            if (query.has("nonce")) {
              nextQuery.set("nonce", query.get("nonce"));
            }
            nextQuery.set("connection", "ownid");
            nextQuery.set("login_hint", authToken);
            window.location.assign(`/authorize?${nextQuery.toString()}`);
        }
    })
  });

3. Other page modifications might be required, such as hiding the Sign in with ownid. You can add a css rule to completly hide it, for example:

<style>
a[data-provider="oauth2"] {
    display: none !important;
}
</style>

​

Next Steps

​

Ready to deploy?