​

Overview

​

Before you begin

First, create an OwnID account. After creating your first OwnID application in the OwnID console, we generate an appIdAn appId is the unique identifier of the integration 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.

​

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.

router.post('/setOwnIDDataByLoginId', async (req, res) => {
    const email = req.body.loginId; //The unique id of a user in your database, usually email or phone
    const ownIdData = req.body.ownIdData; //OwnID authentication information as string
    const user = await User.findOne({ email: email }).exec();
    user.ownIdData = ownIdData;
    await user.save();
    return res.sendStatus(204);
});

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.

router.post('/getOwnIDDataByLoginId', async (req, res) => {
    const email = req.body.loginId; //The unique id of a user in your database, usually email or phone
    const user = await User.findOne({ email: email }).exec();
    if (!user) { return res.json({ errorCode: 404 }) } //Error code when user doesn't exist
    res.json({ ownIdData: user.ownIdData }) //OwnID authentication information as string
});

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.

router.post('/getSessionByLoginId', async (req, res) => {
    const sign = require('jwt-encode');
    const email = req.body.loginId; //The unique id of a user in your database, usually email or phone
    const user = await User.findOne({ email: email }).exec();
    const jwt = sign({ email: user.email }, 'secret');
    return res.json({ token: jwt });
});

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>
    );
}