JavaScript SDK
React Examples
Use the SDK in a React or Next.js application.
React Examples
The official demo app uses Vite + React and is the best reference for a real frontend integration.
This page shows the practical patterns from that demo, including initialization, popup handling, redirect result processing, and keeping UI state in sync.
Recommended React flow
- Check
isVerified()when the page loads - Initialize the SDK right before starting a verification flow
- Update local UI state inside the SDK callbacks
- Handle the callback page with
handleRedirectResult() - Optionally listen for the
unqverify:updatedbrowser event
Start page example
This pattern comes directly from the Vite demo.
import { useEffect, useState } from 'react'
import {
getVerifiedAge,
init,
isVerified,
resetVerification,
startVerificationWithPopup,
startVerificationWithRedirect,
type VerificationOutcome,
} from '@unqtech/age-verification-mitid'
export default function VerificationGate() {
const [verified, setVerified] = useState(false)
const [errorMessage, setErrorMessage] = useState('')
const [loading, setLoading] = useState(false)
const [ageToVerify, setAgeToVerify] = useState(18)
useEffect(() => {
setVerified(isVerified())
}, [])
useEffect(() => {
const handler = () => setVerified(isVerified())
window.addEventListener('unqverify:updated', handler)
return () => window.removeEventListener('unqverify:updated', handler)
}, [])
const getOutcomeMessage = (outcome: VerificationOutcome) => {
switch (outcome.code) {
case 'UNDER_AGE':
return 'Age requirement not met.'
case 'POPUP_BLOCKED':
return 'Popup blocked. Please allow popups and try again.'
default:
return outcome.message || 'Verification failed.'
}
}
const startRedirect = () => {
setLoading(true)
setErrorMessage('')
init({
publicKey: import.meta.env.VITE_PUBLIC_KEY,
ageToVerify,
redirectUri: `${window.location.origin}/verification-result`,
onVerified: () => {
setLoading(false)
setVerified(true)
},
onDenied: (outcome) => {
setLoading(false)
setVerified(false)
setErrorMessage(getOutcomeMessage(outcome))
},
onCancelled: (outcome) => {
setLoading(false)
setVerified(false)
setErrorMessage(getOutcomeMessage(outcome))
},
onError: (outcome) => {
setLoading(false)
setVerified(false)
setErrorMessage(getOutcomeMessage(outcome))
},
})
startVerificationWithRedirect()
}
return (
<div>
<button onClick={startRedirect} disabled={verified || loading}>
Start verification
</button>
{verified && <p>Age verified: {getVerifiedAge()}</p>}
{errorMessage && <p>{errorMessage}</p>}
<button onClick={() => resetVerification()}>Reset</button>
</div>
)
}Popup example
If you want popup mode in React, pre-open the window from the click handler. This improves compatibility with stricter browsers.
const popup = window.open('', 'unqverify-popup', 'width=500,height=650')
if (!popup) {
setErrorMessage('Popup blocked. Please enable popups and try again.')
return
}
init({
publicKey: import.meta.env.VITE_PUBLIC_KEY,
ageToVerify: 18,
redirectUri: `${window.location.origin}/verify-popup`,
onVerified: () => setVerified(true),
onDenied: (outcome) => setErrorMessage(outcome.message),
onCancelled: (outcome) => setErrorMessage(outcome.message),
onError: (outcome) => setErrorMessage(outcome.message),
})
startVerificationWithPopup(popup)Redirect result page
On your callback page, call handleRedirectResult() once on mount.
import { useEffect } from 'react'
import { handleRedirectResult } from '@unqtech/age-verification-mitid'
export default function VerificationResult() {
useEffect(() => {
handleRedirectResult({
onVerified: () => {
window.location.href = '/'
},
onFailure: (err) => {
console.error('Verification failed', err)
},
onError: (outcome) => {
console.error('Redirect technical error', outcome)
},
})
}, [])
return <p>Verifying...</p>
}React-specific guidance
- Put the verification start call inside a user action such as a button click
- Do not call
startVerificationWithPopup()automatically on mount - Keep the callback page lightweight; it should process the result and then redirect or close
- If your app has multiple age tiers, use
getVerifiedAge()to drive conditional UI