Integrating facial authentication with Fio.js

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

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

• Click on "Applications".

• Click on "New application".

• Enter an application name.

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

• Select "Freemium"

• Check the checkboxes

• Click "Create new FaceIO Application"

• 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:

npm install @faceio/fiojs

👉 Are you using JS only? You can also use the CDN, documented here.

Now, you can import and initiate the library:

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

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

Return value

If the enrollment was successful, you will receive: facialId, timestamp, details, documented here.

authenticate()

Identify enrolled users

Syntax

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.

Return value

If the authentication was successful, you will receive: facialId, payload, documented here.

restartSession()

Syntax

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.