dha-platform-auth

Face and Touch ID plugin for the web

Getting Started

Install

Install from npm:

• npm i dha-platform-auth

Demo Component/Module

Demo Props:

createUserForPlatformAuth Props

• prop1: Website requesting cert
• prop2: Username or email of individual registering
• prop3: Name of user

signInUserForPlatformAuth Props

• prop1: publicKeyCredential.response.clientDataJSON that is returned in object when registering for platform auth (Keep as ArrayBuffer when passing in)
• prop2: publicKeyCredential.rawId that is returned in object when registering for platform auth (Keep as ArrayBuffer when passing in)

Home.tsx - Functional component

import { useState } from 'react';
import { Button, Typography } from '@mui/material';
import { PlatformAuth } from 'dha-platform-auth';

const Home = () => {
  const authClient = PlatformAuth.getInstance();
  const [userPublicId, setUserPublicId] = useState<ArrayBuffer>();
  const [userChallenge, setUserChallenge] = useState<ArrayBuffer>();
  const [website, setWebsite] = useState('www.demo.com');
  const [userName, setUserName] = useState('TestUser');
  const [userDisplayName, setUserDisplayName] = useState("User123456");

  const onCreateButtonPressed = async () => {
    const createDataResponse: any = await authClient.createUserForPlatformAuth(website, userName, userDisplayName);
    console.log('Public Key Credential Object', createDataResponse);
    // Public Key ID used to save and refer to in the future that is tied to your web app
    // Save the credential id and public key data used for future sign in
    setUserPublicId(createDataResponse.rawId);
    setUserChallenge(createDataResponse.response.clientDataJSON);
  }

  const onSignInButtonPressed = () => {
    // Pass in userChallenge as buffer and userPublicID as buffer from the returned createDataResponse
    if (userChallenge !== undefined && userPublicId !== undefined){
      const signInDataResponse: any = authClient.signInUserForPlatformAuth(userChallenge, userPublicId);
      console.log('Public Key Credential Object After Sign In', signInDataResponse);
    }
  }

  return (
    <div>
      <Typography gutterBottom={true}>
        Platform authentication
      </Typography>
      <br />
      <Typography gutterBottom={true}>
        Make sure to have a normal password and username option for the user to login then use the platform auth as a backup login method.
        You will then need to store the user&rsquo;s public id and challenge into a database for future login with platform auth.
      </Typography>
      <Button onClick={onCreateButtonPressed}>Create Touch ID</Button>
      <Button onClick={onSignInButtonPressed}>Sign In With Touch ID</Button>
    </div>
  );
}

export default Home;

NPM

https://www.npmjs.com/package/dha-platform-auth