> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ownid.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Registration
> Learn how to set up the registration form, submit handler, and the OwnId integration
Registration works with your existing user registration form to add new users or enroll new devices for existing users.
## Prerequisites
To get the most out of this guide, make sure to do the following tasks first:
1. Complete the backend integrations (see [Build Server-Side Endpoints](/building-blocks/build-server-endpoints)).
2. Complete the Login integration (see [Login](/building-blocks/boost/build-login)).
Figure 1. After integration (example)
The instructions on this page assume you have already installed and referenced the OwnID SDK at the top of your page as described in Steps 1 and 2 of [Login](/building-blocks/boost/build-login).
## Integrating Registration
Implement the event handler, and OwnID registration integration with references to the password and user id fields in your existing form.
### Add the Widget to your Registration Form
The SDK **register** method is used to integrate the registration journey. It references the fields in your existing registration form. It also renders the OwnId widget by automatically referencing your field Ids to calculate its position in the DOM.
The sample registration forms in the snippets below are vanilla examples, shown here only to confirm the implementation pattern of form fields in SDK methods.
#### Implement **register** Method
In the ownid method:
1. Enter "register" 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. Set the `passwordFieldBinding` parameter to `true` if you want to force the OwnID platform to automatically create a random strong password. The value is `false` by default.
5. Assign an error function as desired in the `onError` parameter.
6. Configure the `onRegister` event to copy the `ownIdData` object to a local variable. When submitting the registration form, you must send that object to your backend and store it in the `ownIdData` field you created during Preparation.
Use the code snippets below, and check the embedded comments, to model your implementation of the submit handler and the SDK **register** method.
```javascript Javascript theme={null}
```
```jsx React theme={null}
import { OwnID, WidgetType } from '@ownid/react';
...
function RegisterComponent() {
const emailField = useRef(null);
const passwordField = useRef(null);
const confirmPasswordField = useRef(null); //optional
function onRegister(ownIdData) {
// store the ownIdDataObject in your app storage.
// global variable is just an example. It's not recommended using it in that way
window.ownIdDataObject = ownIdData;
}
function onSubmit(formData) {
if (window.ownIdDataObject) {
formData.ownIdData = window.ownIdDataObject;
}
// this is just an example - Call your existing registration logic in the backend
return register(formData);
}
return (
);
}
```
```javascript Angular theme={null}
//template
//controller
import { IPartialConfig, WidgetType } from '@ownid/angular';
...
protected readonly WidgetType = WidgetType;
widgetOptions: IPartialConfig = {
passwordFieldBinding: true //false by default (if true, OwnID creates a random strong password)
};
onRegister(ownIdData) {
//store the ownIdDataObject in your app storage.
//global variable is just an example. It's not recommended using it in that way
window.ownIdDataObject = ownIdData;
}
onSubmit(formData) {
if (window.ownIdDataObject) {
formData.ownIdData = window.ownIdDataObject;
}
// this is just an example - Call your existing registration logic in the backend
return register(formData);
}
```
## Styling Options
The OwnID register widget can be styled in different ways to match your application's design:
### Default Button
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:
```css theme={null}
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
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:
```javascript theme={null}
ownid('register', {
variant: 'standalone-button',
infoTooltip: false,
loginIdField: document.querySelector('#email'),
element: document.getElementById('button-wrapper-div'),
// other configuration options...
});
```
Note: in the code sample above, `button-wrapper-div` represents the div where the button will be shown. Configure your own.
This creates a separate OwnID button that you can position anywhere in your login form.
OwnID changes the texts and icon according to the platform to ensure a higher click rate
If you would like to style this button, you can utilize the following CSS variables:
```css theme={null}
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;
}
```
```css theme={null}
ownid-standalone-button-widget[finished=true] {
--ownid-button-widget-border-color;
--ownid-button-widget-color;
--ownid-button-widget-check-color;
}
```
**That's it!**
Your users can now register for a new account and leverage other user journeys you implement.
Before going live make sure you check out the following the next steps.
## Next Steps
### Ready to deploy?
Take me to the Deployment Checklist
I want to build another user journey