Auth0

​

How it Works

​

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}

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

​

Step 2.1 - 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 Auth0 tile.
5. Click Next.
6. Click Explore my App on the “Congratulations” popup.

​

Step 2.2 - Set Auth0 Integration Parameters

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.

​

Step 3 - Add OwnID as an Auth0 Social Connection.

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.

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 4 - Frontend Integration

​

Step 4.1 - Universal login page

1. In your Auth0 Dashboard, go to Branding -> Universal Login -> Advanced Options and choose the Login tab.
2. In the HTML, locate the Auth0Lock instantiation. Typically, it would be as the following:

var lock = new Auth0Lock(...

3. Add the following Javascript code snippet after the Auth0Lock instance is instantiated and configured.
   • Replace <appId> with the appId from the OwnID application created in step 2.
   • Replace <Auth0Lock instance> with the lock instance that was created in previous lines.
   • Replace <clientId> with your Auth0 login application client id.
   • Set enableRegister to false if you prefer to not render the OwnID widget on the signup form.

((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,'<appId>','ownid');
ownid("auth0Render", {auth0: {
  lock: <Auth0Lock instance>,
  universalLogin: true,
  clientId: '<clientId>',
  enableRegister: true,
}});

​

Step 4.2 - Storefront

• Returning user prompt
• Passwordless registration flow
• Device enrollment flow

​

React SDK

1. Install the OwnID React SDK:

npm install @ownid/react

2. Define the following component, import it to your App component and configure it:
   • Replace <appId> with the appId from the OwnID application created in step 2.
   • Replace <authDomain> with the your Auth0 domain.
   • Set paths in <instantConnectPathnames> for which you want the returning uer prompt to be activated. Remove or leave empty to skip this feature.
   • Set a custom <ownidConnectionName> if you had used a different name in step 3. The default name is "OwnID".
   • Set a custom <loginRedirectUri> if you had set a custom redirect path for the Auth0 login. It defaults to your app home page, same as the Auth0 sdk.

import {useAuth0} from "@auth0/auth0-react";
import {OwnIDInit} from '@ownid/react';

export const OwnIDInitAuth0 = () => {
    const auth0 = useAuth0();
    useEffect(() => {
        window.ownid("auth0Render", {auth0: {
                spaClient: auth0,
                storefront: true,
                authDomain: '<authDomain>',
                instantConnectPathnames: ["/"],
                ownidConnectionName: undefined,
                loginRedirectUri: undefined
            }});
    }, []);
    return <OwnIDInit config={{ appId: '<appId>' }}/>
}

​

Other JS Setups

1. We assume you are using the @auth0/auth0-spa-js package. Locate the Auth0Client instantiation. Typically, it would be as the following:

const auth0 = await createAuth0Client({ ... });
// or
const auth0 = new Auth0Client({ ... });

2. Define the following code snippet in your Javascript code, so that it will run on all of your application pages, and pass your Auth0Client instance to it.

• Replace <appId> with the appId from the OwnID application created in step 2.
• Replace <authDomain> with the your Auth0 domain.
• Set paths in <instantConnectPathnames> for which you want the returning uer prompt to be activated. Remove or leave empty to skip this feature.
• Set a custom <ownidConnectionName> if you had used a different name in step 3. The default name is "OwnID".
• Set a custom <loginRedirectUri> if you had set a custom redirect path for the Auth0 login. It defaults to your app home page, same as the Auth0 sdk.

((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,'<appId>','ownid');
ownid("auth0Render", {auth0: {
  spaClient: auth0,
  storefront: true,
  authDomain: '<authDomain>',
  instantConnectPathnames: ["/"],
  ownidConnectionName: undefined,
  loginRedirectUri: undefined
}});

3. To allow the returning user prompt flow (instant connect), your app would have to have a handler for the OAuth redirect callback. See the Auth0 documentation:

// On redirect path loaded:
await auth0.handleRedirectCallback();

​

Next Steps

​

Ready to deploy?