diff --git a/README.md b/README.md
index 740072d..95ee340 100644
--- a/README.md
+++ b/README.md
@@ -4,11 +4,11 @@ Monorepo for the **Aziface Web SDK** (`@azify/aziface-web`) and reference demo a
 
 ## Packages & apps
 
-| Path | Description |
-| --- | --- |
+| Path                                     | Description                                                                                 |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------- |
 | [`packages/aziface`](./packages/aziface) | Publishable SDK — biometric flows for React (enroll, authenticate, liveness, document scan) |
-| [`apps/nextapp`](./apps/nextapp) | Next.js demo app |
-| [`apps/viteapp`](./apps/viteapp) | Vite + React demo app |
+| [`apps/nextapp`](./apps/nextapp)         | Next.js demo app                                                                            |
+| [`apps/viteapp`](./apps/viteapp)         | Vite + React demo app                                                                       |
 
 **SDK documentation (installation, API, types):** [packages/aziface/README.md](./packages/aziface/README.md)
 
@@ -28,15 +28,15 @@ npm ci
 
 ### Development
 
-| Command | Description |
-| --- | --- |
-| `npm run dev` | Start all workspaces that expose a `dev` script |
-| `npm run next:dev` | Next.js demo at `http://localhost:3000` |
-| `npm run vite:dev` | Vite demo at `http://localhost:5173` |
-| `npm run build` | Build all workspaces |
-| `npm run next:build` | Build Next.js demo only |
-| `npm run vite:build` | Build Vite demo only |
-| `npm run clean` | Remove build artifacts |
+| Command              | Description                                     |
+| -------------------- | ----------------------------------------------- |
+| `npm run dev`        | Start all workspaces that expose a `dev` script |
+| `npm run next:dev`   | Next.js demo at `http://localhost:3000`         |
+| `npm run vite:dev`   | Vite demo at `http://localhost:5173`            |
+| `npm run build`      | Build all workspaces                            |
+| `npm run next:build` | Build Next.js demo only                         |
+| `npm run vite:build` | Build Vite demo only                            |
+| `npm run clean`      | Remove build artifacts                          |
 
 ### SDK package only
 
@@ -69,10 +69,10 @@ aziface-web/
 
 **Commit → release mapping** (configured in `.releaserc.js`):
 
-| Commit type | Version bump |
-| --- | --- |
-| `feat`, `chore` | minor |
-| `fix`, `perf`, `style` | patch |
+| Commit type               | Version bump                      |
+| ------------------------- | --------------------------------- |
+| `feat`, `chore`           | minor                             |
+| `fix`, `perf`, `style`    | patch                             |
 | `BREAKING CHANGE` in body | major (default analyzer behavior) |
 
 ### CI
@@ -104,11 +104,11 @@ Requires `GH_TOKEN` and `NPM_TOKEN` with publish access to the `@azify` scope.
 
 ### GitHub Actions secrets
 
-| Secret | Purpose |
-| --- | --- |
-| `GH_TOKEN_V2` | Push release commits, create GitHub releases |
-| `NPM_TOKEN_V2` | Publish `@azify/aziface-web` to npm (Automation token with **Read and Write** on `@azify`) |
-| `AZIFACE_ASSETS_URL` | FaceTec assets (CI/internal use) |
+| Secret               | Purpose                                                                                    |
+| -------------------- | ------------------------------------------------------------------------------------------ |
+| `GH_TOKEN_V2`        | Push release commits, create GitHub releases                                               |
+| `NPM_TOKEN_V2`       | Publish `@azify/aziface-web` to npm (Automation token with **Read and Write** on `@azify`) |
+| `AZIFACE_ASSETS_URL` | FaceTec assets (CI/internal use)                                                           |
 
 ## License
 
diff --git a/apps/nextapp/app/home.tsx b/apps/nextapp/app/home.tsx
index 9291cbd..94e5580 100644
--- a/apps/nextapp/app/home.tsx
+++ b/apps/nextapp/app/home.tsx
@@ -1,22 +1,17 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import toast, { Toaster } from 'react-hot-toast';
 import { useBiometricConfigs } from '@/services';
 import { useUser } from '@/hooks';
 import {
-  authenticate,
   dispose,
-  enroll,
   initialize,
-  liveness,
-  photoMatch,
-  photoScan,
   setLocale,
-  SessionError,
   InitializeParams,
   InitializeHeaders,
   Locale,
+  useAziface,
 } from '@azify/aziface-web';
 import { FaceType } from '@/types/services.types';
 import { LOCALES } from '@/constants';
@@ -28,6 +23,8 @@ export function Home() {
 
   const { data: configs } = useBiometricConfigs();
   const { tokenBiometric, logout } = useUser();
+  const { error, authenticate, enroll, liveness, photoMatch, photoScan } =
+    useAziface();
 
   const onInitialize = (): void => {
     const params: InitializeParams = {
@@ -72,33 +69,32 @@ export function Home() {
   };
 
   const onFaceScan = async (type: FaceType): Promise<void> => {
-    try {
-      switch (type) {
-        case 'enroll':
-          await enroll();
-          break;
-        case 'authenticate':
-          await authenticate();
-          break;
-        case 'liveness':
-          await liveness();
-          break;
-        case 'photoMatch':
-          await photoMatch();
-          break;
-        case 'photoScan':
-          await photoScan();
-          break;
-        default:
-          toast.error(`Invalid face scan type: ${type}`);
-          break;
-      }
-    } catch (error) {
-      const sessionError = error as SessionError;
-      toast.error(sessionError.message);
+    switch (type) {
+      case 'enroll':
+        await enroll();
+        break;
+      case 'authenticate':
+        await authenticate();
+        break;
+      case 'liveness':
+        await liveness();
+        break;
+      case 'photoMatch':
+        await photoMatch();
+        break;
+      case 'photoScan':
+        await photoScan();
+        break;
+      default:
+        toast.error(`Invalid face scan type: ${type}`);
+        break;
     }
   };
 
+  useEffect(() => {
+    if (error) toast.error(error.message);
+  }, [error]);
+
   return (
     <div className='min-h-screen flex items-center justify-center bg-gray-50'>
       <Toaster position='bottom-right' />
diff --git a/apps/nextapp/package.json b/apps/nextapp/package.json
index b8b8142..1bdab96 100644
--- a/apps/nextapp/package.json
+++ b/apps/nextapp/package.json
@@ -16,7 +16,7 @@
     "react-dom": "19.2.3",
     "react-hot-toast": "^2.6.0",
     "react-if": "^4.1.6",
-    "zustand": "^5.0.12"
+    "zustand": "^5.0.14"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
diff --git a/apps/viteapp/README.md b/apps/viteapp/README.md
index 14e2439..f5af884 100644
--- a/apps/viteapp/README.md
+++ b/apps/viteapp/README.md
@@ -8,13 +8,14 @@ Use this app to validate SDK changes in a Vite environment before publishing.
 
 - Node.js 22+
 - FaceTec assets under `public/core/` (see [SDK static assets](../../packages/aziface/README.md#static-assets))
+
 ## Environment variables
 
-| Variable | App | Description |
-| --- | --- | --- |
+| Variable                     | App     | Description          |
+| ---------------------------- | ------- | -------------------- |
 | `VITE_PUBLIC_API_URL_AZTECH` | ViteApp | Aziface API base URL |
-| `VITE_PUBLIC_API_CLIENT_API` | ViteApp | Client API base URL |
-| `VITE_PUBLIC_X_API_KEY` | ViteApp | API key header |
+| `VITE_PUBLIC_API_CLIENT_API` | ViteApp | Client API base URL  |
+| `VITE_PUBLIC_X_API_KEY`      | ViteApp | API key header       |
 
 Create a `.env` file in this directory with the values above (ask the team for staging credentials).
 
@@ -38,12 +39,12 @@ npm run lint
 
 ## Project layout
 
-| Path | Description |
-| --- | --- |
-| `src/screens/` | App screens (`login`, `home`) |
-| `src/services/` | API client and biometric config |
+| Path                   | Description                      |
+| ---------------------- | -------------------------------- |
+| `src/screens/`         | App screens (`login`, `home`)    |
+| `src/services/`        | API client and biometric config  |
 | `public/core/facetec/` | FaceTec SDK script and resources |
-| `public/core/images/` | Theme images for `withTheme` |
+| `public/core/images/`  | Theme images for `withTheme`     |
 
 ## SDK integration
 
diff --git a/apps/viteapp/eslint.config.js b/apps/viteapp/eslint.config.js
index 5e6b472..ef614d2 100644
--- a/apps/viteapp/eslint.config.js
+++ b/apps/viteapp/eslint.config.js
@@ -16,7 +16,6 @@ export default defineConfig([
       reactRefresh.configs.vite,
     ],
     languageOptions: {
-      ecmaVersion: 2020,
       globals: globals.browser,
     },
   },
diff --git a/apps/viteapp/package.json b/apps/viteapp/package.json
index 631b083..0a1bc39 100644
--- a/apps/viteapp/package.json
+++ b/apps/viteapp/package.json
@@ -10,29 +10,33 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@azify/aziface-web": "1.0.6",
-    "@tailwindcss/vite": "^4.2.2",
-    "@tanstack/react-query": "5.74.9",
+    "@azify/aziface-web": "1.1.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/react-query": "5.91.0",
     "axios": "1.13.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-hot-toast": "^2.6.0",
     "react-if": "^4.1.6",
-    "tailwindcss": "^4.2.2",
-    "zustand": "5.0.3"
+    "tailwindcss": "^4.3.3",
+    "zustand": "5.0.14"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
-    "@types/node": "^24.12.2",
-    "@types/react": "^19.2.14",
+    "@babel/core": "^7.29.7",
+    "@eslint/js": "^10.0.1",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.4.0",
+    "@vitejs/plugin-react": "^6.0.3",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^10.6.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "globals": "^17.7.0",
     "typescript": "~6.0.2",
-    "typescript-eslint": "^8.58.0",
-    "vite": "^8.0.4"
+    "typescript-eslint": "^8.62.0",
+    "vite": "^8.1.1"
   }
 }
diff --git a/apps/viteapp/src/main.tsx b/apps/viteapp/src/main.tsx
index e17d50b..dcf08c3 100644
--- a/apps/viteapp/src/main.tsx
+++ b/apps/viteapp/src/main.tsx
@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
+import './index.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
diff --git a/apps/viteapp/src/screens/home.tsx b/apps/viteapp/src/screens/home.tsx
index 33c6b9b..8d6fd96 100644
--- a/apps/viteapp/src/screens/home.tsx
+++ b/apps/viteapp/src/screens/home.tsx
@@ -1,17 +1,12 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import toast, { Toaster } from 'react-hot-toast';
 import { useBiometricConfigs } from '../services';
 import { useUser } from '../hooks';
 import {
-  authenticate,
   dispose,
-  enroll,
   initialize,
-  liveness,
-  photoMatch,
-  photoScan,
   setLocale,
-  SessionError,
+  useAziface,
   type InitializeParams,
   type InitializeHeaders,
   type Locale,
@@ -26,6 +21,8 @@ export function Home() {
 
   const { data: configs } = useBiometricConfigs();
   const { tokenBiometric, logout } = useUser();
+  const { error, authenticate, enroll, liveness, photoMatch, photoScan } =
+    useAziface();
 
   const onInitialize = (): void => {
     const params: InitializeParams = {
@@ -70,33 +67,32 @@ export function Home() {
   };
 
   const onFaceScan = async (type: FaceType): Promise<void> => {
-    try {
-      switch (type) {
-        case 'enroll':
-          await enroll();
-          break;
-        case 'authenticate':
-          await authenticate();
-          break;
-        case 'liveness':
-          await liveness();
-          break;
-        case 'photoMatch':
-          await photoMatch();
-          break;
-        case 'photoScan':
-          await photoScan();
-          break;
-        default:
-          toast.error(`Invalid face scan type: ${type}`);
-          break;
-      }
-    } catch (error) {
-      const sessionError = error as SessionError;
-      toast.error(sessionError.message);
+    switch (type) {
+      case 'enroll':
+        await enroll();
+        break;
+      case 'authenticate':
+        await authenticate();
+        break;
+      case 'liveness':
+        await liveness();
+        break;
+      case 'photoMatch':
+        await photoMatch();
+        break;
+      case 'photoScan':
+        await photoScan();
+        break;
+      default:
+        toast.error(`Invalid face scan type: ${type}`);
+        break;
     }
   };
 
+  useEffect(() => {
+    if (error) toast.error(error.message);
+  }, [error]);
+
   return (
     <div className='min-h-screen flex items-center justify-center bg-gray-50'>
       <Toaster position='bottom-right' />
diff --git a/apps/viteapp/tsconfig.app.json b/apps/viteapp/tsconfig.app.json
index 1d29c88..6830b6f 100644
--- a/apps/viteapp/tsconfig.app.json
+++ b/apps/viteapp/tsconfig.app.json
@@ -2,9 +2,10 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "es2023",
-    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "lib": ["ES2023", "DOM"],
     "module": "esnext",
     "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
     "skipLibCheck": true,
 
     /* Bundler mode */
diff --git a/apps/viteapp/tsconfig.node.json b/apps/viteapp/tsconfig.node.json
index d3c52ea..8455dcb 100644
--- a/apps/viteapp/tsconfig.node.json
+++ b/apps/viteapp/tsconfig.node.json
@@ -3,12 +3,11 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "es2023",
     "lib": ["ES2023"],
-    "module": "esnext",
     "types": ["node"],
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "module": "nodenext",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
diff --git a/apps/viteapp/vite.config.ts b/apps/viteapp/vite.config.ts
index da17daf..b31e9a1 100644
--- a/apps/viteapp/vite.config.ts
+++ b/apps/viteapp/vite.config.ts
@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import react, { reactCompilerPreset } from '@vitejs/plugin-react';
+import babel from '@rolldown/plugin-babel';
 import tailwindcss from '@tailwindcss/vite';
 
+// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    babel({ presets: [reactCompilerPreset()] }),
+  ],
 });
diff --git a/packages/aziface/README.md b/packages/aziface/README.md
index 0bc92f0..3ff087c 100644
--- a/packages/aziface/README.md
+++ b/packages/aziface/README.md
@@ -18,11 +18,6 @@ Web SDK adapter for React — face enrollment, authentication, liveness, and doc
     - [`Properties`](#properties)
   - [`dispose`](#dispose)
     - [`Properties`](#properties-1)
-  - [`enroll`](#enroll)
-  - [`authenticate`](#authenticate)
-  - [`liveness`](#liveness)
-  - [`photoScan`](#photoscan)
-  - [`photoMatch`](#photomatch)
   - [`withTheme`](#withtheme)
     - [`Properties`](#properties-2)
     - [`Custom images`](#custom-images)
@@ -30,6 +25,14 @@ Web SDK adapter for React — face enrollment, authentication, liveness, and doc
   - [`resetTheme`](#resettheme)
   - [`setLocale`](#setlocale)
     - [`Properties`](#properties-3)
+- [Hooks]
+  - [`useAziface`](#useaziface)
+    - [`Properties`](#properties-4)
+      - [`enroll`](#enroll)
+      - [`authenticate`](#authenticate)
+      - [`liveness`](#liveness)
+      - [`photoScan`](#photoscan)
+      - [`photoMatch`](#photomatch)
 - [Styles](#styles)
 - [Types](#types)
   - [`Initialize`](#initialize-1)
@@ -57,21 +60,25 @@ Web SDK adapter for React — face enrollment, authentication, liveness, and doc
 - **FaceTec static assets** hosted by your application (not bundled in the npm package)
 - Valid Aziface credentials: `deviceKeyIdentifier`, `baseUrl`, and `x-token-bearer`
 
+<hr/>
+
 ## Installation
 
 ```bash
 npm i @azify/aziface-web
 ```
 
+<hr/>
+
 ## Static assets
 
 The SDK expects FaceTec resources to be available at runtime. Host the following paths in your app's public directory:
 
-| Path | Purpose |
-| --- | --- |
-| `/core/facetec/FaceTecSDK.js` | FaceTec browser SDK (loaded via `<script>`) |
-| `/core/facetec/resources/` | FaceTec resource bundle |
-| `/core/images/` | Branding and cancel button images (optional; used by `withTheme`) |
+| Path                          | Purpose                                                           |
+| ----------------------------- | ----------------------------------------------------------------- |
+| `/core/facetec/FaceTecSDK.js` | FaceTec browser SDK (loaded via `<script>`)                       |
+| `/core/facetec/resources/`    | FaceTec resource bundle                                           |
+| `/core/images/`               | Branding and cancel button images (optional; used by `withTheme`) |
 
 Reference implementations live in this monorepo:
 
@@ -143,7 +150,7 @@ Typical integration flow:
 2. Import SDK methods and styles (`@azify/aziface-web/dist/aziface.css`)
 3. Call `initialize()` once with credentials and headers
 4. Optionally call `setLocale()` and `withTheme()` after a successful init
-5. Run session methods: `enroll`, `authenticate`, `liveness`, `photoScan`, or `photoMatch`
+5. Use `useAziface()` to access session methods: `enroll`, `authenticate`, `liveness`, `photoScan`, and `photoMatch`
 6. Call `dispose()` when the SDK is no longer needed
 
 Session methods throw [`SessionError`](#sessionerror) on failure — always wrap them in `try/catch`.
@@ -155,17 +162,12 @@ Session methods throw [`SessionError`](#sessionerror) on failure — always wrap
 ```tsx
 // ...
 import {
-  authenticate,
   dispose,
-  enroll,
   initialize,
-  liveness,
-  photoMatch,
-  photoScan,
   setLocale,
+  useAziface,
   withTheme,
   SessionError,
-  type Initialize,
   type InitializeHeaders,
   type InitializeParams,
 } from '@azify/aziface-web';
@@ -174,6 +176,8 @@ import '@azify/aziface-web/dist/aziface.css';
 export function MyPage() {
   // ...
   const [isInitialized, setIsInitialized] = useState(false);
+  const { data, error, authenticate, enroll, liveness, photoMatch, photoScan } =
+    useAziface();
 
   const onInitialize = (): void => {
     const params: InitializeParams = {
@@ -236,7 +240,11 @@ export function MyPage() {
       console.error(sessionError.message);
     }
   };
-  // ...
+
+  useEffect(() => {
+    if (data) console.log(data);
+    if (error) console.error(error.message);
+  }, [data, error]);
 
   return (
     <div className='min-h-screen flex items-center justify-center bg-gray-50'>
@@ -388,46 +396,6 @@ dispose(disposed => {
 | ---------- | ------------------------------------- | -------- |
 | `callback` | [`DisposeCallback`](#disposecallback) | ✅       |
 
-### `enroll`
-
-The `enroll` method in the Aziface SDK is responsible for registering a user’s face for the first time and creating a secure biometric identity. During enrollment, the SDK guides the user through a liveness detection process to ensure that a real person is present and not a photo, video, or spoofing attempt.
-
-While the user follows on-screen instructions (such as positioning their face within the oval and performing natural movements), the SDK captures a set of facial data and generates a secure face scan. This face scan is then encrypted and sent to the backend for processing and storage.
-
-The result of a successful enrollment is a trusted biometric template associated with the user’s identity, which can later be used for authentication, verification, or ongoing identity checks. If the enrollment fails due to poor lighting, incorrect positioning, or liveness issues, the SDK returns detailed status and error information so the application can handle retries or user feedback appropriately.
-
-### `authenticate`
-
-The `authenticate` method verifies a user's identity by comparing a newly captured face scan against a previously enrolled biometric template. This process confirms that the person attempting to access the system is the same individual who completed enrollment.
-
-During authentication, the SDK performs an active liveness check while guiding the user through simple on-screen instructions. A fresh face scan is captured, encrypted, and securely transmitted to the backend, where it is matched against the stored enrollment data.
-
-If the comparison is successful and the liveness checks pass, the authentication is approved and the user is granted access. If the process fails due to a mismatch, spoofing attempt, or poor capture conditions, the SDK returns detailed result and error codes so the application can handle denial, retries, or alternative verification flows.
-
-### `liveness`
-
-The `liveness` method in the Aziface SDK is designed to determine whether the face presented to the camera belongs to a real, live person at the time of capture, without necessarily verifying their identity against a stored template.
-
-In this flow, the SDK guides the user through a short interaction to capture facial movements and depth cues that are difficult to replicate with photos, videos, or masks. The resulting face scan is encrypted and sent to the backend, where advanced liveness detection algorithms analyze it for signs of spoofing or fraud.
-
-A successful liveness result confirms real human presence and can be used as a standalone security check or as part of broader workflows such as authentication, onboarding, or high-risk transactions. If the liveness check fails, the SDK provides detailed feedback to allow the application to respond appropriately.
-
-### `photoMatch`
-
-The `photoMatch` method in the Aziface SDK is used to verify a user’s identity by analyzing a government-issued identity document and comparing it with the user’s live facial biometric data.
-
-In this flow, the SDK first guides the user to capture high-quality images of their identity document. Then, a face scan is collected through a liveness-enabled facial capture. Both the document images and the face scan are encrypted and securely transmitted to the backend.
-
-A successful result provides strong identity assurance, combining document authenticity and biometric verification. This flow is commonly used in regulated onboarding, KYC, and high-security access scenarios. If any step fails, the SDK returns detailed results and error information to support retries or alternative verification paths.
-
-### `photoScan`
-
-The `photoScan` method in the Aziface SDK is used to verify the authenticity and validity of a government-issued identity document without performing facial biometric verification.
-
-In this flow, the SDK guides the user to capture images of the identity document, ensuring proper framing, focus, and lighting. The captured document images are encrypted and securely sent to the backend for analysis.
-
-A successful document-only verification is suitable for lower-risk scenarios or cases where biometric capture is not required. If the verification fails due to image quality issues, unsupported documents, or suspected tampering, the SDK provides detailed feedback for proper error handling and user guidance.
-
 ### `withTheme`
 
 This method customizes your SDK theme during a session. The Aziface SDK must be successfully initialized **before calling** this API.
@@ -524,6 +492,71 @@ initialize(
 
 <hr/>
 
+## Hooks
+
+### `useAziface`
+
+The `useAziface` hook centralizes the session methods and exposes reactive `data` and `error` values.
+
+```ts
+const { data, error, enroll, authenticate, liveness, photoMatch, photoScan } =
+  useAziface();
+```
+
+#### Properties
+
+| Property                        | Type                       |
+| ------------------------------- | -------------------------- |
+| `data`                          | `SessionCode \| undefined` |
+| `error`                         | `Error \| undefined`       |
+| [`enroll`](#enroll)             | `Promise<boolean>`         |
+| [`authenticate`](#authenticate) | `Promise<boolean>`         |
+| [`liveness`](#liveness)         | `Promise<boolean>`         |
+| [`photoMatch`](#photomatch)     | `Promise<boolean>`         |
+| [`photoScan`](#photoscan)       | `Promise<boolean>`         |
+
+##### `enroll`
+
+The `enroll` method (returned by `useAziface()`) is responsible for registering a user’s face for the first time and creating a secure biometric identity. During enrollment, the SDK guides the user through a liveness detection process to ensure that a real person is present and not a photo, video, or spoofing attempt.
+
+While the user follows on-screen instructions (such as positioning their face within the oval and performing natural movements), the SDK captures a set of facial data and generates a secure face scan. This face scan is then encrypted and sent to the backend for processing and storage.
+
+The result of a successful enrollment is a trusted biometric template associated with the user’s identity, which can later be used for authentication, verification, or ongoing identity checks. If the enrollment fails due to poor lighting, incorrect positioning, or liveness issues, the SDK returns detailed status and error information so the application can handle retries or user feedback appropriately.
+
+##### `authenticate`
+
+The `authenticate` method (returned by `useAziface()`) verifies a user's identity by comparing a newly captured face scan against a previously enrolled biometric template. This process confirms that the person attempting to access the system is the same individual who completed enrollment.
+
+During authentication, the SDK performs an active liveness check while guiding the user through simple on-screen instructions. A fresh face scan is captured, encrypted, and securely transmitted to the backend, where it is matched against the stored enrollment data.
+
+If the comparison is successful and the liveness checks pass, the authentication is approved and the user is granted access. If the process fails due to a mismatch, spoofing attempt, or poor capture conditions, the SDK returns detailed result and error codes so the application can handle denial, retries, or alternative verification flows.
+
+##### `liveness`
+
+The `liveness` method (returned by `useAziface()`) is designed to determine whether the face presented to the camera belongs to a real, live person at the time of capture, without necessarily verifying their identity against a stored template.
+
+In this flow, the SDK guides the user through a short interaction to capture facial movements and depth cues that are difficult to replicate with photos, videos, or masks. The resulting face scan is encrypted and sent to the backend, where advanced liveness detection algorithms analyze it for signs of spoofing or fraud.
+
+A successful liveness result confirms real human presence and can be used as a standalone security check or as part of broader workflows such as authentication, onboarding, or high-risk transactions. If the liveness check fails, the SDK provides detailed feedback to allow the application to respond appropriately.
+
+##### `photoMatch`
+
+The `photoMatch` method (returned by `useAziface()`) is used to verify a user’s identity by analyzing a government-issued identity document and comparing it with the user’s live facial biometric data.
+
+In this flow, the SDK first guides the user to capture high-quality images of their identity document. Then, a face scan is collected through a liveness-enabled facial capture. Both the document images and the face scan are encrypted and securely transmitted to the backend.
+
+A successful result provides strong identity assurance, combining document authenticity and biometric verification. This flow is commonly used in regulated onboarding, KYC, and high-security access scenarios. If any step fails, the SDK returns detailed results and error information to support retries or alternative verification paths.
+
+##### `photoScan`
+
+The `photoScan` method (returned by `useAziface()`) is used to verify the authenticity and validity of a government-issued identity document without performing facial biometric verification.
+
+In this flow, the SDK guides the user to capture images of the identity document, ensuring proper framing, focus, and lighting. The captured document images are encrypted and securely sent to the backend for analysis.
+
+A successful document-only verification is suitable for lower-risk scenarios or cases where biometric capture is not required. If the verification fails due to image quality issues, unsupported documents, or suspected tampering, the SDK provides detailed feedback for proper error handling and user guidance.
+
+<hr/>
+
 ## Styles
 
 Aziface Web recommends importing our predefined styles for the best user experience.
@@ -532,15 +565,7 @@ Simply import them onto the screen where you are using Aziface methods.
 
 ```tsx
 // ...
-import {
-  authenticate,
-  dispose,
-  enroll,
-  initialize,
-  liveness,
-  photoMatch,
-  photoScan,
-} from '@azify/aziface-web';
+import { dispose, initialize, useAziface } from '@azify/aziface-web';
 import '@azify/aziface-web/dist/aziface.css'; // <-- Add this import
 ```
 
diff --git a/packages/aziface/package.json b/packages/aziface/package.json
index 2f1f1c9..f673855 100644
--- a/packages/aziface/package.json
+++ b/packages/aziface/package.json
@@ -21,5 +21,8 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
+  },
+  "peerDependencies": {
+    "react": "*"
   }
 }
diff --git a/packages/aziface/src/hooks/useAziface.ts b/packages/aziface/src/hooks/useAziface.ts
new file mode 100644
index 0000000..8f6ba78
--- /dev/null
+++ b/packages/aziface/src/hooks/useAziface.ts
@@ -0,0 +1,40 @@
+import { useSyncExternalStore } from 'react';
+import { AzifaceController, controller } from '../module/aziface';
+import { SnapshotProps } from '../types/aziface';
+
+export function useAziface() {
+  const state = useSyncExternalStore<SnapshotProps>(
+    AzifaceController.subscribe,
+    AzifaceController.getSnapshot,
+    AzifaceController.getSnapshot,
+  );
+
+  async function enroll(): Promise<boolean> {
+    return await controller.enroll();
+  }
+
+  async function authenticate(): Promise<boolean> {
+    return await controller.authenticate();
+  }
+
+  async function liveness(): Promise<boolean> {
+    return await controller.liveness();
+  }
+
+  async function photoMatch(): Promise<boolean> {
+    return await controller.photoMatch();
+  }
+
+  async function photoScan(): Promise<boolean> {
+    return await controller.photoScan();
+  }
+
+  return {
+    enroll,
+    authenticate,
+    liveness,
+    photoMatch,
+    photoScan,
+    ...state,
+  };
+}
diff --git a/packages/aziface/src/index.ts b/packages/aziface/src/index.ts
index 00bc12f..02c4990 100644
--- a/packages/aziface/src/index.ts
+++ b/packages/aziface/src/index.ts
@@ -1,16 +1,13 @@
 export {
-  authenticate,
   dispose,
-  enroll,
   initialize,
-  liveness,
-  photoMatch,
-  photoScan,
   resetTheme,
   withTheme,
   setLocale,
 } from './module/aziface';
 
+export { useAziface } from './hooks/useAziface';
+
 export type {
   CancelLocation,
   DisposeCallback,
diff --git a/packages/aziface/src/module/aziface.ts b/packages/aziface/src/module/aziface.ts
index 7ad1c1c..e75bd1c 100644
--- a/packages/aziface/src/module/aziface.ts
+++ b/packages/aziface/src/module/aziface.ts
@@ -19,6 +19,7 @@ import {
   InitializeHeaders,
   Locale,
   MethodError,
+  SnapshotProps,
   Style,
 } from '../types/aziface';
 import { i18n } from '../i18n';
@@ -29,12 +30,33 @@ export class AzifaceController implements Controller {
   public static isInitialized: boolean = false;
   public static isDevelopment: boolean = false;
   private static latestExternalDatabaseRefID: string = '';
+  private static listeners: Set<VoidFunction> = new Set();
+  private static currentSnapshot: SnapshotProps = {
+    data: undefined,
+    error: undefined,
+  };
+  private static oldSnapshot: SnapshotProps = {
+    data: undefined,
+    error: undefined,
+  };
   public static deviceKeyIdentifier: string = '';
   public static baseUrl: string = '';
   public static headers: InitializeHeaders = {} as InitializeHeaders;
   private faceTecSDKInstance: FaceTecSDKInstance | null = null;
   private internalID: number | undefined = undefined;
 
+  public static subscribe(listener: VoidFunction): VoidFunction {
+    AzifaceController.listeners.add(listener);
+
+    return () => {
+      AzifaceController.listeners.delete(listener);
+    };
+  }
+
+  public static getSnapshot(): SnapshotProps {
+    return AzifaceController.currentSnapshot;
+  }
+
   public initialize = (
     init: Initialize,
     callback: InitializeCallback,
@@ -195,6 +217,12 @@ export class AzifaceController implements Controller {
     AzifaceController.baseUrl = init?.params?.baseUrl || '';
     AzifaceController.isDevelopment = init?.params?.isDevelopment || false;
     AzifaceController.headers = init?.headers;
+    AzifaceController.currentSnapshot = {
+      data: undefined,
+      error: undefined,
+    };
+
+    this.onStateChange();
   };
 
   private cleanup = (): void => {
@@ -204,11 +232,16 @@ export class AzifaceController implements Controller {
     AzifaceController.deviceKeyIdentifier = '';
     AzifaceController.baseUrl = '';
     AzifaceController.headers = {} as InitializeHeaders;
+    AzifaceController.currentSnapshot = {
+      data: undefined,
+      error: undefined,
+    };
 
     window.removeEventListener('click', applyResponsiveStyles);
     window.clearInterval(this.internalID);
 
     this.withTheme();
+    this.onStateChange();
   };
 
   private generateExternalDatabaseRefID = (): string =>
@@ -229,9 +262,30 @@ export class AzifaceController implements Controller {
 
     const isError =
       faceTecSessionStatus !== FaceTecSDK.FaceTecSessionStatus.SessionCompleted;
-    if (isError) {
-      throw new SessionError(faceTecSessionStatus);
-    }
+
+    AzifaceController.currentSnapshot = {
+      data: isError ? undefined : faceTecSessionStatus,
+      error: isError ? new SessionError(faceTecSessionStatus) : undefined,
+    };
+
+    this.onStateChange();
+  };
+
+  private onStateChange = (): void => {
+    const didChange =
+      AzifaceController.currentSnapshot.data !==
+        AzifaceController.oldSnapshot.data ||
+      AzifaceController.currentSnapshot.error !==
+        AzifaceController.oldSnapshot.error;
+
+    if (!didChange) return;
+
+    AzifaceController.oldSnapshot = {
+      data: AzifaceController.currentSnapshot.data,
+      error: AzifaceController.currentSnapshot.error,
+    };
+
+    AzifaceController.listeners.forEach(listener => listener());
   };
 
   private onAttach = () => {
@@ -259,7 +313,7 @@ export class AzifaceController implements Controller {
   };
 }
 
-const controller = new AzifaceController();
+export const controller = new AzifaceController();
 
 export function initialize(
   init: Initialize,
@@ -272,26 +326,6 @@ export function dispose(callback: DisposeCallback): void {
   controller.dispose(callback);
 }
 
-export async function enroll(): Promise<boolean> {
-  return await controller.enroll();
-}
-
-export async function authenticate(): Promise<boolean> {
-  return await controller.authenticate();
-}
-
-export async function liveness(): Promise<boolean> {
-  return await controller.liveness();
-}
-
-export async function photoMatch(): Promise<boolean> {
-  return await controller.photoMatch();
-}
-
-export async function photoScan(): Promise<boolean> {
-  return await controller.photoScan();
-}
-
 export function withTheme(overrides?: Style): void {
   controller.withTheme(overrides);
 }
diff --git a/packages/aziface/src/types/aziface.ts b/packages/aziface/src/types/aziface.ts
index 51fb9f4..a7713ec 100644
--- a/packages/aziface/src/types/aziface.ts
+++ b/packages/aziface/src/types/aziface.ts
@@ -345,6 +345,11 @@ export type Locale =
   | 'vi'
   | 'zh';
 
+export interface SnapshotProps {
+  data?: SessionCode;
+  error?: Error;
+}
+
 export interface Controller {
   initialize: (init: Initialize, callback: InitializeCallback) => void;
   dispose: (callback: DisposeCallback) => void;