2.1.2.1 Default UI

Overview

The VerifySpeed Web UI package provides a pre-built, customizable user interface for phone number verification in web applications. This approach offers:

• Ready-to-use verification components for both Deep Link and OTP verification methods
• Consistent UI across different frameworks with minimal integration effort
• Full customization options for colors, themes, and styling
• Responsive design that works seamlessly on both mobile and desktop devices
• Automatic handling of QR code generation and Smart App Banner display based on user's device

With the Default UI, you can implement secure phone verification in minutes rather than building custom UI components from scratch. Simply install the package, configure your client key, and implement the necessary event handlers to connect with your backend.

Setup Guide for Web Integration

Step 1: Install the Package

Install the VerifySpeed Web UI package using npm:

npm install verifyspeed-web-ui

Step 2: Common Setup

The following setup is required across all frameworks:

1. Set Client Key

VerifySpeedUI.setClientKey('YOUR_CLIENT_KEY');

2. Event Handler Implementation

Implement these event handlers that will be used in your framework-specific code:

TypeScript

import { InitVerificationDetail, VerificationCompletedDetail } from 'verifyspeed-web-ui';

const handleInitVerification = async (event: CustomEvent<InitVerificationDetail>) => {
  const { methodName, resolve, reject } = event.detail;
  try {
    const response = await fetch('YOUR_API_ENDPOINT', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ methodName }),
    });

    const data = await response.json();

    resolve({
      deepLink: data.deepLink,
      verificationKey: data.verificationKey,
    });
  } catch (error) {
    reject(error);
  }
};

const handleVerificationCompleted = async (event: CustomEvent<VerificationCompletedDetail>) => {
  try {
    const { token } = event.detail;

    await fetch('YOUR_VERIFICATION_ENDPOINT', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token }),
    });
  } catch (error) {
    console.error('Verification failed:', error);
  }
};

JavaScript

const handleInitVerification = async (event) => {
  const { methodName, resolve, reject } = event.detail;
  try {
    const response = await fetch('YOUR_API_ENDPOINT', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ methodName }),
    });

    const data = await response.json();

    resolve({
      deepLink: data.deepLink,
      verificationKey: data.verificationKey,
    });
  } catch (error) {
    reject(error);
  }
};

const handleVerificationCompleted = async (event) => {
  try {
    const { token } = event.detail;
    
    await fetch('YOUR_VERIFICATION_ENDPOINT', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token }),
    });
  } catch (error) {
    console.error('Verification failed:', error);
  }
};

3. Configure UI (Optional)

VerifySpeedUI.setConfig({
  darkMode: true,
  qrCode: {
    margin: 10,
    image: 'https://i.ibb.co/kVB67QTD/Verify-Speed.png',
    ... // other options
  },
  smartAppBannerOptions: {
    position: 'top',
    theme: 'dark',
    containerStyle: 'background-color: #000000; border-radius: 10px;',
    closeButtonStyle: 'background-color: #000000; border-radius: 10px;',
    ... // other options
  },
});

Step 3: Framework-Specific Implementation

After setting up the common configuration and handlers above, choose your framework below to implement the UI component:

TypeScript

React

React implementation using hooks (useEffect and useRef) for managing component lifecycle and references:

tip

Full example project can be found here

import { useEffect, useRef } from 'react';
import { 
  InitVerificationDetail, 
  VerificationCompletedDetail, 
  VerifySpeedUI, 
  VerifySpeedUIEvent 
} from 'verifyspeed-web-ui';

function App() {
  const verifySpeedRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = verifySpeedRef.current;
    if (element) {
      element.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification as unknown as EventListener
      );
      element.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted as unknown as EventListener
      );

      return () => {
        element.removeEventListener(
          VerifySpeedUIEvent.INIT_VERIFICATION,
          handleInitVerification as unknown as EventListener
        );
        element.removeEventListener(
          VerifySpeedUIEvent.VERIFICATION_COMPLETED,
          handleVerificationCompleted as unknown as EventListener
        );
      };
    }
  }, []);

  return <verify-speed-ui ref={verifySpeedRef} />;
}

Vue 3

Vue 3 implementation using lifecycle hooks:

tip

Full example project can be found here

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { 
  InitVerificationDetail, 
  VerificationCompletedDetail, 
  VerifySpeedUI, 
  VerifySpeedUIEvent 
} from 'verifyspeed-web-ui';

const verifySpeedRef = ref<HTMLElement | null>(null);

onMounted(() => {
  const element = verifySpeedRef.value
  if (element) {
    element.addEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      handleInitVerification as unknown as EventListener
    )
    element.addEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      handleVerificationCompleted as unknown as EventListener
    )
  }
})

//* TIP: Remove event listeners on unmount
onUnmounted(() => {
  const element = verifySpeedRef.value
  if (element) {
    element.removeEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      handleInitVerification as unknown as EventListener
    )
    element.removeEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      handleVerificationCompleted as unknown as EventListener
    )
  }
})
</script>

<template>
  <verify-speed-ui ref="verifySpeedRef" />
</template>

Angular

Angular implementation using ViewChild decorator and lifecycle hooks:

tip

Full example project can be found here

import {
  Component,
  ElementRef,
  OnInit,
  OnDestroy,
  ViewChild,
  CUSTOM_ELEMENTS_SCHEMA,
  AfterViewInit,
} from '@angular/core';
import { 
  InitVerificationDetail, 
  VerificationCompletedDetail, 
  VerifySpeedUI, 
  VerifySpeedUIEvent 
} from 'verifyspeed-web-ui';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: '<verify-speed-ui #verifySpeed></verify-speed-ui>'
})
export class AppComponent implements OnInit, OnDestroy {
  @ViewChild('verifySpeed') verifySpeedRef!: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    const element = this.verifySpeedRef.nativeElement;
    element.addEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification as unknown as EventListener
    );
    element.addEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted as unknown as EventListener
    );
  }

  ngOnDestroy() {
    const element = this.verifySpeedRef.nativeElement;
    element.removeEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification as unknown as EventListener
    );
    element.removeEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted as unknown as EventListener
    );
  }
}

Svelte

Svelte implementation using lifecycle functions and bind directive:

tip

Full example project can be found here

<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import type { InitVerificationDetail, VerificationCompletedDetail } from 'verifyspeed-web-ui';
  import { VerifySpeedUI, VerifySpeedUIEvent } from 'verifyspeed-web-ui';

  let verifySpeedRef: HTMLElement;

  onMount(() => {
    if (verifySpeedRef) {
      verifySpeedRef.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification as unknown as EventListener
      );
      verifySpeedRef.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted as unknown as EventListener
      );
    }
  });

  onDestroy(() => {
    if (verifySpeedRef) {
      verifySpeedRef.removeEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification as unknown as EventListener
      );
      verifySpeedRef.removeEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted as unknown as EventListener
      );
    }
  });
</script>

<verify-speed-ui bind:this={verifySpeedRef} />

Lit

Lit implementation using decorators and lifecycle callbacks:

tip

Full example project can be found here

import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import {
  InitVerificationDetail,
  VerificationCompletedDetail,
  VerifySpeedUI,
  VerifySpeedUIEvent,
} from 'verifyspeed-web-ui';

@customElement('verify-speed-wrapper')
export class VerifySpeedWrapper extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.addEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification as unknown as EventListener,
    );
    this.addEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted as unknown as EventListener,
    );
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification as unknown as EventListener,
    );
    this.removeEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted as unknown as EventListener,
    );
  }

  render() {
    return html`<verify-speed-ui></verify-speed-ui>`;
  }
}

Usage in HTML:

<verify-speed-wrapper />

SolidJS

SolidJS implementation using lifecycle and refs:

tip

Full example project can be found here

import { createSignal, onMount, onCleanup } from 'solid-js'
import './App.css'
import { InitVerificationDetail, VerificationCompletedDetail, VerifySpeedUI, VerifySpeedUIEvent } from 'verifyspeed-web-ui'

function VerifySpeed() {
  const [verifySpeedRef, setVerifySpeedRef] = createSignal<HTMLElement>();

  onMount(() => {
    const element = verifySpeedRef();
    if (element) {
      element.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification as unknown as EventListener
      );
      element.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted as unknown as EventListener
      );
    }
  });

  onCleanup(() => {
    const element = verifySpeedRef();
    if (element) {
      element.removeEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification as unknown as EventListener
      );
      element.removeEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted as unknown as EventListener
      );
    }
  });

  return <verify-speed-ui ref={setVerifySpeedRef} />;
}

// Usage
function App() {
  return (
    <div>
      <VerifySpeed />
    </div>
  );
}

JavaScript

React

React implementation using hooks (useEffect and useRef) for managing component lifecycle and references:

tip

Full example project can be found here

import { useEffect, useRef } from 'react';
import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

function App() {
  const verifySpeedRef = useRef(null);

  useEffect(() => {
    const element = verifySpeedRef.current;
    if (element) {
      element.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification
      );
      element.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted
      );

      return () => {
        element.removeEventListener(
          VerifySpeedUIEvent.INIT_VERIFICATION,
          handleInitVerification
        );
        element.removeEventListener(
          VerifySpeedUIEvent.VERIFICATION_COMPLETED,
          handleVerificationCompleted
        );
      };
    }
  }, []);

  return <verify-speed-ui ref={verifySpeedRef} />;
}

Vue 3

Vue 3 implementation using lifecycle hooks:

tip

Full example project can be found here

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

const verifySpeedRef = ref(null);

onMounted(() => {
  const element = verifySpeedRef.value
  if (element) {
    element.addEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      handleInitVerification
    )
    element.addEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      handleVerificationCompleted
    )
  }
})

onUnmounted(() => {
  const element = verifySpeedRef.value
  if (element) {
    element.removeEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      handleInitVerification
    )
    element.removeEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      handleVerificationCompleted
    )
  }
})
</script>

<template>
  <verify-speed-ui ref="verifySpeedRef" />
</template>

Svelte

Svelte implementation using lifecycle functions and bind directive:

tip

Full example project can be found here

<script>
  import { onMount, onDestroy } from 'svelte';
  import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

  let verifySpeedRef;

  onMount(() => {
    if (verifySpeedRef) {
      verifySpeedRef.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification,
      );
      verifySpeedRef.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted,
      );
    }
  });

  onDestroy(() => {
    if (verifySpeedRef) {
      verifySpeedRef.removeEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification,
      );
      verifySpeedRef.removeEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted,
      );
    }
  });
</script>

<verify-speed-ui bind:this={verifySpeedRef} />

Lit

Lit implementation using decorators and lifecycle callbacks:

tip

Full example project can be found here

import { LitElement, html } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

@customElement('verify-speed-wrapper')
export class VerifySpeedWrapper extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.addEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification,
    );
    this.addEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted,
    );
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification,
    );
    this.removeEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted,
    );
  }

  render() {
    return html`<verify-speed-ui></verify-speed-ui>`;
  }
}

Usage in HTML:

<verify-speed-wrapper></verify-speed-wrapper>

SolidJS

SolidJS implementation using lifecycle and refs:

tip

Full example project can be found here

import { createSignal, onMount, onCleanup } from 'solid-js';
import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

function VerifySpeed() {
  const [verifySpeedRef, setVerifySpeedRef] = createSignal();

  onMount(() => {
    const element = verifySpeedRef();
    if (element) {
      element.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification,
      );
      element.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted,
      );
    }
  });

  onCleanup(() => {
    const element = verifySpeedRef();
    if (element) {
      element.removeEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification,
      );
      element.removeEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted,
      );
    }
  });

  return <verify-speed-ui ref={setVerifySpeedRef} />;
}

// Usage
function App() {
  return (
    <div>
      <VerifySpeed />
    </div>
  );
}

Qwik

Qwik implementation using lifecycle and refs:

tip

Full example project can be found here

import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

function VerifySpeed() {
  const verifySpeedRef = useSignal();

  useVisibleTask$(() => {
    const element = verifySpeedRef.value;
    if (element) {
      element.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification,
      );
      element.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted,
      );

      return () => {
        element.removeEventListener(
          VerifySpeedUIEvent.INIT_VERIFICATION,
          handleInitVerification,
        );
        element.removeEventListener(
          VerifySpeedUIEvent.VERIFICATION_COMPLETED,
          handleVerificationCompleted,
        );
      };
    }
  });

  return <verify-speed-ui ref={verifySpeedRef} />;
}

// Usage
function App() {
  return (
    <div>
      <VerifySpeed />
    </div>
  );
}

tip

In example projects, search for keywords TIP if you want to know how to implement Web Integration.

Remember to replace the following placeholders with your actual values:

• 'YOUR_CLIENT_KEY': Your VerifySpeed client key
• 'YOUR_API_ENDPOINT': Your backend endpoint for starting verification
• 'YOUR_VERIFICATION_ENDPOINT': Your backend endpoint for completing verification