Login

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

​

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.

​

Step 2 - Reference the OwnID SDK

Reference the SDK at the top of your web pages.

​

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.

Use the code snippets below, and check the embedded comments, to model your implementation of the submit handler and the SDK login method.

​

Styling Options

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

​

Default Button (Side-by-side)

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

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>

2. 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?