Framework Integration

Learn how to integrate the Azakaw Liveness SDK with popular web frameworks.

React Integration

Basic JavaScript Setup

For plain JavaScript React applications, simply import the SDK:

import '@azakawcompliance/azakaw-liveness-sdk'

TypeScript Setup

For TypeScript React applications, you'll need to add type declarations. Create or update your global.d.ts file:

import type { LivenessWebComponent } from '@azakawcompliance/azakaw-liveness-sdk';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';
import { LivenessEnvironment, LivenessRegion } from '@azakawcompliance/azakaw-liveness-sdk';

type AzakawLivenessAttrs = {
    'session-id': string;
    'host-origin'?: string;
    'environment'?: LivenessEnvironment;
    'region'?: LivenessRegion;
};

type AzakawLivenessProps = DetailedHTMLProps<
    HTMLAttributes<LivenessWebComponent>,
    LivenessWebComponent
> & AzakawLivenessAttrs;

// React >= 17 reads React.JSX (the global JSX namespace was removed in 19).
declare module 'react' {
    namespace JSX {
        interface IntrinsicElements {
            'azakaw-liveness': AzakawLivenessProps;
        }
    }
}

// React 16 only reads the global JSX namespace.
declare global {
    namespace JSX {
        interface IntrinsicElements {
            'azakaw-liveness': AzakawLivenessProps;
        }
    }
}

Implementation Example

Here's a complete example showing best practices for event handling and performance:

import React, { useCallback, useEffect, useRef } from 'react';
import '@azakawcompliance/azakaw-liveness-sdk'
import type { LivenessWebComponent } from '@azakawcompliance/azakaw-liveness-sdk';

const Liveness = () => {
  const livenessRef = useRef<LivenessWebComponent>(null)

  // Define callback outside useEffect to prevent recreation on every render
  const livenessSuccess = useCallback((result) => {
    console.log('liveness success.', result);
  }, []);

  useEffect(() => {
    if (!livenessRef?.current) return;
    const azakawElemRef = livenessRef?.current;

    azakawElemRef?.addEventListener(
      'success',
      livenessSuccess
    );

    return () => {
      azakawElemRef?.removeEventListener(
        'success',
        livenessSuccess
      );
    };
  }, [livenessSuccess]); 

  return (
    <azakaw-liveness
      ref={livenessRef}
      session-id="YOUR_SESSION_ID"
      host-origin="YOUR_HOST_ORIGIN"
      environment="Sandbox"
    />
  );
};

export default Liveness;

Angular Integration

Add CUSTOM_ELEMENTS_SCHEMA in your components:

import '@azakawcompliance/azakaw-liveness-sdk';
import type { LivenessWebComponent } from '@azakawcompliance/azakaw-liveness-sdk';

@Component({
    selector: 'app-component',
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    template: `
       <azakaw-liveness
          id="azakaw-liveness"
          session-id="YOUR_SESSION_ID"
          host-origin="YOUR_HOST_ORIGIN"
          environment="Sandbox"
        />
  `})

export class AppComponent implements AfterViewInit, OnDestroy {
    @ViewChild('liveness')
    liveness!: ElementRef<LivenessWebComponent>;

    ngAfterViewInit() {
        this.liveness.nativeElement.settings = {
            livenessType: 0,
            customization: {
                onboardingScreenStartButtonBackground: '#c45656',
            },
        };

        this.liveness.nativeElement?.addEventListener(
            'success',
            (res)=> {
                console.log('success', res);
            }
        );
    }


        ngOnDestroy(): void {
            this.liveness?.nativeElement?.removeEventListener(
                'success', () => {}
            );
        }
    }