npm package: @ownid/react
Description: A library for integrating OwnID into a React application. ## Table of Contents * [Installation](#installation) * [Getting Started](#getting-started) * [Alternative Integration Strategies](#alternative-integration-strategies) * [What is OwnID?](#what-is-ow
Latest version: 1.7.3

# OwnID-React SDK
A library for integrating OwnID into a React application.
## Table of Contents
* [Installation](#installation)
* [Getting Started](#getting-started)
* [Alternative Integration Strategies](#alternative-integration-strategies)
* [What is OwnID?](#what-is-ownid)
* [License](#license)
## Installation
Use the npm CLI to run:
```bash
npm install @ownid/react
```
## Getting Started
* [Initialize OwnID](#initialize-ownid)
* [Add Register with OwnID to Your Application](#add-register-with-ownid-to-your-application)
* [Add OwnID Login to Your Application](#add-ownid-login-to-your-application)
### Initialize OwnID
Import `OwnIDInit` component to your App component and configure it with the `appId` of the website's OwnID application. To obtain the OwnID application's id, open the application in the [OwnID Console](https://console.ownid.com/).

```javascript
...
import { OwnIDInit } from '@ownid/react';

...

  <OwnIDInit config={{ appId: '<your application id>' }}/>
```
### Add Register with OwnID to Your Application

Add references to required elements
```typescript
  const email = useRef<HTMLInputElement>(null);
  const password = useRef<HTMLInputElement>(null);
  const passwordConfirm = useRef<HTMLInputElement>(null);
```
```html
<input ref={email} type="email" name="email"/>
<input ref={password} type="password" name="password"/>
<input ref={passwordConfirm} type="password" name="password"/>
```

Add the `OwnID` component to the registration page.
```html
<OwnID type={WidgetType.Register}
  loginIdField={email}
  passwordField={password}
  confirmPasswordContainer={passwordConfirm}
  onError={setError}
  onRegister={onRegister}
/>
```
Then add `onRegister` callback. Store `ownIdData` in your app storage. (global variable at `window` object just an example. It's not recommended using it in that way)
```typescript
onRegister(ownIdData) {
  window.ownIdData = ownIdData;
}
```

To add OwnID to your application using a service instead of the HTML template, see [Inject Service into Registration Component](#inject-service-into-registration-component).
#### Modify Existing Registration Method
Now, wrap your existing registration logic within the `getOwnIDData` function. This function adds the OwnID payload to the form data before calling your existing registraion method.
```typescript
onSubmit(formData) {
  if (window.ownIdData) {
    formData.ownIdData = window.ownIdData;
  }
  
  //Call your existing registration logic in the backend
  return register(formData);
}
```

### Add OwnID Login to Your Application
Add references to elements
```typescript
  const email = useRef<HTMLInputElement>(null);
  const password = useRef<HTMLInputElement>(null);
```
```html
    <input ref={email} type="email" name="email"/>
    <input ref={password} type="password" name="password"/>
```   

Add the `OwnID` component to the login page.
```html
    <OwnID type={WidgetType.Login}
      passwordField={password}
      loginIdField={email}
      onError={setError}
      onLogin={onLogin}
    />
```
To add OwnID to your application using a service instead of the HTML template, see [Inject Service into Login Component](#inject-service-into-login-component).
##### Define onLogin Function
Now, define the `onLogin` function that is executed when the user logs in with OwnID. This function must set the user session and execute post-login actions like triggering an event or navigating to an authorized page. For example, the `onLogin` method might look like:
```typescript
function onLogin(data: any) {
    //setting user session
    authService.setAuth({ token: data.token });
    
    //redirecting user to the account page
    navigateTo('/account');
  }
  ```
## Alternative Integration Strategies
* [Inject Service into Registration Component](#inject-service-into-registration-component)
* [Inject Service into Login Component](#inject-service-into-login-component)
### Inject Service into Registration Component
As an alternative to incorporating the OwnID component into an HTML template, use the `ownidReactService` service at the registration page:
```typescript
const email = useRef<HTMLInputElement>(null);
const password = useRef<HTMLInputElement>(null);
const passwordConfirm = useRef<HTMLInputElement>(null);

useEffect(() => ownidReactService.register({
  loginIdField: email.current,
  passwordField: password.current,
  confirmPasswordContainer: passwordConfirm.current,
  onRegister: (ownidData) => onRegister(ownidData),
  onError: (error: string) => setError(error),
}), []);
```
Now, you need to [modify your existing registration method](#modify-existing-registration-method).
### Inject Service into Login Component
As an alternative to incorporating the OwnID component into an HTML template, use the `ownidReactService` service at the login page:
```typescript
  const email = useRef<HTMLInputElement>(null);
  const password = useRef<HTMLInputElement>(null);
  
  useEffect(() => ownidReactService.login({
    loginIdField: email.current,
    passwordField: password.current,
    onLogin: (ownidData) => onLogin(ownidData),
    onError: (error: string) => setError(error),
  }), []);
```
Now, you need to [define the onLogin function](#define-onlogin-function).
## What is OwnID?
OwnID offers a passwordless login alternative to a website by using cryptographic keys to replace the traditional password. The public part of a key is stored in the website's identity platform while the private part is stored on the mobile device. With OwnID, the user’s phone becomes their method of login.
When a user registers for an account on their phone, selecting Skip Password is all that is needed to store the private key on the phone. As a result, as long as they are logging in on their phone, selecting Skip Password logs the user into the site automatically. If the user accesses the website on a desktop, they register and log in by using their mobile device to scan a QR code. Enhanced security is available by incorporating biometrics or other multi-factor authentication methods into the registration and login process.
## License
This project is licensed under the Apache License 2.0. See the LICENSE file for more information.