Overview

OwnID Integration Overview

Before you begin

First, create an OwnID account. After creating your first OwnID application in the OwnID console, we generate an for you. You will need that later in this guide.

Then, create a field in your database (usually in the users’ table) to store revelant information related to OwnID authentication. Name it ownIdData.

If you have a relational database (RDBMS), be sure the field meets the following requirements:

  • A character datatype e.g., VARCHAR
  • A minimum length of 5000 chars

1. Add server-side logic

As the user interacts with OwnID to login/register, OwnID server communicates with your website’s server through API endpoints created by your team. This guide will help you build these endpoints.

Build Endpoint 1: Set OwnID data

When the user enrolls a new device, OwnID server stores the user’s ownIdData in your database, through a request to your website’s backend.

API reference documentation

Build Endpoint 2: Get OwnID data

During login, OwnID server gets the ownIdData from your backend to resolve the biometric login challenge.

API reference documentation

Build Endpoint 3: Get session

During login, OwnID server requests a session object from your website’s backend. The resulting session object will be transferred to the onLogin() callback in your frontend.

API reference documentation

2. Frontend integration

Install OwnID SDK

Use the CLI to run:

npm install @ownid/react

Initialize OwnID SDK

import { OwnIDInit } from '@ownid/react';
<OwnIDInit config={{appId:'9s8d7f9s87g98s7dgMyAppID'}}/>

Add OwnID button to your login form

Add the following code to render the login widget:

function LoginComponent() {
    const emailField = useRef(null);
    const passwordField = useRef(null);
    
    function onLogin(data) {
        //1. set user session using data.token (usually a jwt or session token), generated in your backend and sent through the OwnID server
        localStorage.setItem('sessionID', JSON.stringify({ token: data.token }));
        //2. redirect the user (this is just an example)
        window.location.href = '/account';
    }
    return (
        <form>
            <input ref={emailField} type="email" name="email" />
            <input ref={passwordField} type="password" name="password" />
            <button type="submit">Log In</button>
            <OwnID type='login'
                passwordField={passwordField}
                loginIdField={emailField}
                onError={(error) => console.error(error)}
                onLogin={onLogin} />
        </form>
    );
}

Congratulations! You can try the passwordless experience on your website!