Get Started
Overview
Before you begin
First, create an OwnID account. After creating your first OwnID application in the OwnID console, we generate an appId
An 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
.
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.
Build Endpoint 2: Get OwnID data
During login, OwnID server gets the ownIdData
from your backend to resolve the biometric login challenge.
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.
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>
);
}