​
Introduction

This guide will walk you through the process of integrating OwnID’s Elite solution into your frontend application. When using the OwnID Elite, users are presented with a consistent and intuitive experience across both desktop and mobile platforms, fully orchestrated by OwnID.

Figure 1. Authentication Experience (example)

​
Prerequisites

To get the most out of this guide, make sure you’ve already completed the backend integrations as described in Build Server-Side Endpoints.

​
Install the OwnID SDK

npm install @ownid/react

​
Reference the OwnID SDK

Reference the SDK at the top of your web pages.

<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,'<appID>','ownid');
</script>

Recommendations

  • Include the SDK on all pages, even those without user-facing authentication elements. Doing so will enable users to access additional functionality, wherever they are on your site.
  • If you are using OwnID UAT environment, change the src to https://cdn.uat.ownid.com/sdk/

​
Integration

The OwnID authentication is triggered using the ownid('start') method. This method initializes the authentication flow and provides various handlers to manage different aspects of the authentication process.

  ownid('start', {
      providers: {
          session: {
              create: async (data: any) => {
                  try { 
                  // set user session using data.token (usually a jwt or session token), generated in your backend and sent through the OwnID server
                  await this.authService.onLogin(data);

                  return { status: 'logged-in' };
                  } catch (error) {
                      return { status: 'fail', reason: 'Failed to create session' };
                  }
              },
          },
          events: {
              onFinish: async () => ({ action: 'redirect', url: "/my-account" })
          }
      }
  });

​
Next Step

After understanding the basic steps of the integration, let’s deep dive into the different configuration options.

Authentication Providers

Click here to move to the next step ->