Integrating facial authentication with Fio.js
Published: 2022-12-03 11:21:39

Authentication is a very important point of websites nowadays. Without experience, you can end up with lots of flaws: not encrypting passwords, not checking for email aliases, etc.

# Is fio.js secure?

FaceIO is one of the most secure ways to authenticate your users due to:

- Faceio's compliance with broadly applicable privacy laws such as the GDPR, CCPA, and other privacy standards.
- High accuracy on the model which FaceIO uses, which scores almost 100% in the accuracy metrics which is a big number that requires an insane amount of high-quality data that costs lots of money.

You can visit https://faceio.net for more information!

# Create an application from the FaceIO console

![Tutorial gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sq9ab4ykyuac7azarzdd.gif)

-  Navigate to https://console.faceio.net/dashboard.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rp57z6hb022crpuwfus3.png)

- Click on "Applications".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0mw94hlmeq83cdzip6r.png)

- Click on "New application".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00euzc937v355lklplrp.png)

- Enter an application name.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgh3nztucl4ykumczt32.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cggw0qqdopnejwdel7sg.png)

- Click next (If you don't need to change anything, you can leave everything on default and click 4 times on next)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thb3y7owed5srh8bi3hm.png)

- Select "Freemium"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqsmhmfrc6emwmml5mpr.png)

- Check the checkboxes

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsxiemnsl2ydd25o64yj.png)

- Click "Create new FaceIO Application"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlwj1czf2sc7doeyzha4.png)

- Done! Now copy the ID.

# Making a registration app with FaceIO

> **`Fio.js`** is a simple and elegant interface to provide secure facial authentication experience to your users via simple calls to the `enroll()` & `authenticate()` methods.

You can start using it by installing using:
```bash
npm install @faceio/fiojs
```

👉 Are you using JS only? You can also use the CDN, documented [here](https://faceio.net/integration-guide).

Now, you can import and initiate the library:
```js
import faceIO from '@faceio/fiojs'

const faceio = new faceIO('app-public-id'); // Get the application Public ID at https://console.faceio.net
```

From there, you can call the implemented functions:

> 

## enroll()
Register a new user.

> Syntax
```js
import faceIO from '@faceio/fiojs'

const faceio = new faceIO('app-public-id'); // Get the application Public ID at https://console.faceio.net

function App() {
    return (
    <div className="App">
        <button onClick={enrollNewUser}>Enroll New User</button>
    </div>
    );
}

async function enrollNewUser() {
    const userInfo = await faceio.enroll({ parameters });
    console.log(userInfo)
}

export default App;
```
> Parameters

**enroll()** takes a single, optional `parameters` object.
The options are documented [here](https://github.com/symisc/faceio-npm#parameters)

> Return value

If the enrollment was successful, you will receive: `facialId`, `timestamp`, `details`, documented [here](https://github.com/symisc/faceio-npm#return-value).

## authenticate()
Identify enrolled users

> Syntax

```js
import faceIO from '@faceio/fiojs'

const faceio = new faceIO('app-public-id'); // Get the application Public ID at https://console.faceio.net

function App() {
    return (
    <div className="App">
        <button onClick={authenticateUser}>Authenticate User</button>
    </div>
    );
}

async function authenticateUser() {
    const userData = await faceio.authenticate({ parameters });

    console.log("Success, user identified")
    console.log("Linked facial Id: " + userData.facialId)
}

export default App;
```

> Parameters

**authenticate()** takes a single, optional `parameters` object, documented [here](https://github.com/symisc/faceio-npm#parameters-1).

> Return value

If the authentication was successful, you will receive: `facialId`, `payload`, documented [here](https://github.com/symisc/faceio-npm#return-value-1).

## restartSession()

> Syntax
```js
const boolean = await faceio.restartSession()
```

> Parameters

*none*

> Return value

`true` if the request for a new session have been granted, and ready for another round of calls to **enroll()** or **authenticate()** for the same user. `false` otherwise.

# Conclusion
As you have seen, the integration is very easy. Once you receive the `facialId` from **enroll()**/**authenticate()**, you can use it to make authentication for your website easier for both: UX and DX.