Login is the first frontend integration you should build after completing backend event handlers. In addition to the login integration procedure, this page includes instructions for installing and referencing the SDK, which is a prerequisite for all other frontend integrations.

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

​
Integrating Login

Integrate login in just three steps.
  1. Step 1 - Install OwnID Web SDK
  2. Step 2 - Reference the OwnID SDK
  3. Step 3 - Add the Widget to your Login Form
Widget Figure 1. After implementation (example)

​
Step 1 - Install OwnID Web SDK

The OwnID Web SDK provides communication between your frontend login page and the OwnID cloud server. If you’re using React or Angular frameworks, and you haven’t yet installed the OwnID SDK on your local system, you should do that now before continuing. To install the React-based or the Angular-based SDK, select the tab that matches your framework and copy the npm command shown. 
npm install @ownid/react

​
Step 2 - 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/

​
Step 3 - Add the Widget to your Login Form

The SDK login method is used to integrate the login journey. It references the field Ids in your existing login form. It also renders the OwnId widget by automatically referencing your field elements (through their id) to calculate its position in the DOM. The sample login forms in the snippets below are vanilla examples, shown here only to confirm the implementation pattern of form fields in SDK methods.

​
Calling the SDK

In JavaScript, OwnId SDK methods are instantiated by calling ownid with the appropriate method name and its parameters: 
        ownid("method_name", {
            parameter_1: value_1,
            parameter_2: value_2,
            ...
            parameter_n: value_n,
            // Handle errors as you see fit
            onError: (error) => console.log(error),
            // When the relevant event fires,
            onSomeEvent: (event) => console.log(event)
        });
We’ll use the login method name here. Check the Angular or React implementation example snippets for framework-specific variations of the syntax above.

​
Implement login Method

In the ownid method:
  1. Enter “login” for the method name.
  2. Assign the form field (as a DOM element) you use as the password to the passwordField parameter.
  3. Assign the form field (as a DOM element) you use as the login id to the loginIdField parameter.
  4. Assign an error function as desired in the onError parameter.
  5. Configure the onLogin event to copy the data.token object locally. The data.token is the value generated by the getSessionByLoginId endpoint and you should use it to set a user session or exchange it for a session token.
Session identifier can be ANY data ObjectAlthough we’re calling it a ‘token’, the session identifier can be any unique data object. We only pass it right back to you so you’re able to associate a callback with a session.
Use the code snippets below, and check the embedded comments, to model your implementation of the submit handler and the SDK login method. 
<body>
    <form name="myForm">
        <input id="email" type="text" name="email">
        <input id="password" type="password" name="password">
        <input type="submit" value="Submit">
    </form>
    <script>
        ownid("login", {
            loginIdField: document.getElementById("email"),
            passwordField: document.getElementById("password"),
            onError: (error) => console.log(error),
            onLogin: function (data) {
                // Generic example on how to set a session and redirect the user (use your own!)
                // 1. set user session using data.token (it can be any data object), generated in your backend and sent through the OwnID server, which does NOTHING with it except pass it back to you as appropriate!
                localStorage.setItem('sessionID', JSON.stringify({ token: data.token }));
                // 2. redirect the user to your preferred entry point 
                window.location.href = '/landingpage';
            }
        });
    </script>
</body>
That’s it!You’ve implemented the frontend functionality required for the user to login.If you’re ready to deploy your integration, make sure to read the Pre-Deployment Checklist before hand!

​
Styling Options

The OwnID login widget can be styled in different ways to match your application’s design:

​
Default Button (Side-by-side)

default button variant Default button variant (Example for michaelkors.com) The default implementation places the OwnID button side by side with the password field. This is the standard configuration and requires no additional parameters. If you would like to style this button, you can do it in the OwnID Console or utilize the following CSS variables: 
ownid-fingerprint-button-widget {
    --ownid-button-widget-border-radius;
    --ownid-button-widget-font-size;
    --ownid-button-widget-color;
    --ownid-button-widget-border-color;
    --ownid-button-widget-check-size;
    --ownid-button-widget-check-position-top;
    --ownid-button-widget-check-position-right;
    z-index;
}

​
Standalone Button

default button variant Standalone button variant (Example for nfl.com) For cases where you want to position the OwnID button independently from the password field, use the standalone button variant: 
ownid('login', {
  variant: 'standalone-button',
  infoTooltip: false,
  loginIdField: document.querySelector('#email'),
  element: document.getElementById('button-wrapper-div'),
  // other configuration options...
});
In the code sample above, button-wrapper-div represents the div where the button will be shown. Configure your own. If you would like to style this button, you can utilize the following CSS variables: 
ownid-standalone-button-widget {
    height: 40px;
    --ownid-button-width: 100%;
    width: 100%;
    --ownid-button-widget-border-color;
    --ownid-button-widget-border-radius;
    --ownid-button-widget-font-size;
    --ownid-button-widget-font-weight;
    --ownid-button-widget-color;
    --ownid-button-widget-icon-height;
    --ownid-button-widget-icon-stroke-width;
    --ownid-button-widget-check-size;
    --ownid-button-widget-check-position-top;
    --ownid-button-widget-check-position-right;
}

​
Custom Button

For complete control over the button’s appearance, you can create your own custom button or HTML element. To implement this:
  1. Create your custom button element:
<button id="custom-ownid-button">Sign in with a passkey</button>
  1. Trigger the OwnID login flow by calling the ownid.auth function:
const email = document.getElementById('email').value;
ownid('auth', email);
This approach gives you full control over the button’s styling while maintaining OwnID’s functionality.

​
Next Steps

​
Ready to deploy?

YES!

Take me to the Deployment Checklist

NOT YET...

I want to build another user journey