Verify Your Identity
Scan this QR code with the Self app
{selfApp ? (
{
console.error("Error: Failed to verify identity");
}}
/>
) : (
Loading QR Code...
)}
);
}
export default VerificationPage;
```
{% hint style="info" %}
If you instead want to use the Self App on a mobile then we check out the [use-deeplinking](https://docs.self.xyz/self-pass/use-deeplinking "mention") and [#usage-mobile](https://docs.self.xyz/qrcode-sdk#usage-mobile "mention") sections!
{% endhint %}
### Verification Flow
The QR code component displays the current verification status with an LED indicator and changes its appearance based on the verification state:
1. **QR Code Display**: Component shows QR code for users to scan
2. **User Scans**: User scans with Self app and provides proof
3. **Verification**:
1. Onchain Verification: Your smart contract receives the proof and verifies it on the Self VerificationHub contract.
2. Backend Verification: Your API endpoint receives and verifies the proof
4. **Success Callback**: `onSuccess` callback is triggered when verification completes
## Add `SelfBackendVerifier` to your backend
If you want to verify your proofs with the backend verifier, then you would implement the following.
### Requirements
* Node v16+
### Install dependencies
{% tabs %}
{% tab title="npm" %}
```bash
npm install @selfxyz/core
```
{% endtab %}
{% tab title="yarn" %}
```bash
yarn add @selfxyz/core
```
{% endtab %}
{% tab title="bun" %}
```bash
bun install @selfxyz/core
```
{% endtab %}
{% endtabs %}
### Set Up SelfBackendVerifier
```javascript
// app/api/verify/route.ts
import { NextResponse } from "next/server";
import { SelfBackendVerifier, AllIds, DefaultConfigStore } from "@selfxyz/core";
// Reuse a single verifier instance
const selfBackendVerifier = new SelfBackendVerifier(
"my-app", // scope — must match the scope in your frontend SelfAppBuilder
"https://your-app.com/api/verify", // your backend endpoint
false, // mockPassport: false = production, true = staging/testnet
AllIds,
new DefaultConfigStore({
minimumAge: 18,
excludedCountries: ["IRN", "PRK", "RUS", "SYR"],
ofac: true,
}),
"uuid" // userIdentifierType
);
export async function POST(req: Request) {
try {
// Extract data from the request
const { attestationId, proof, publicSignals, userContextData } = await req.json();
// Verify all required fields are present
if (!proof || !publicSignals || !attestationId || !userContextData) {
return NextResponse.json(
{
message: "Proof, publicSignals, attestationId and userContextData are required",
},
{ status: 200 }
);
}
// Verify the proof
const result = await selfBackendVerifier.verify(
attestationId, // Document type (1 = passport, 2 = EU ID card, 3 = Aadhaar, 4 = KYC)
proof, // The zero-knowledge proof
publicSignals, // Public signals array
userContextData // User context data (hex string)
);
// Check if verification was successful
if (result.isValidDetails.isValid) {
// Verification successful - process the result
return NextResponse.json({
status: "success",
result: true,
credentialSubject: result.discloseOutput,
});
} else {
// Verification failed
return NextResponse.json(
{
status: "error",
result: false,
reason: "Verification failed",
error_code: "VERIFICATION_FAILED",
details: result.isValidDetails,
},
{ status: 200 }
);
}
} catch (error) {
return NextResponse.json(
{
status: "error",
result: false,
reason: error instanceof Error ? error.message : "Unknown error",
error_code: "UNKNOWN_ERROR"
},
{ status: 200 }
);
}
}
```
{% hint style="warning" %}
The endpoint must be publicly accessible (not localhost). For local development, use ngrok to tunnel your localhost endpoint.
{% endhint %}
## Key Points
### Configuration Matching
Your frontend and backend configurations must match exactly:
```javascript
// Backend configuration
const verification_config = {
excludedCountries: [],
ofac: false,
minimumAge: 18,
};
// Frontend configuration (must match)
disclosures: {
minimumAge: 18, // Same as backend
excludedCountries: [], // Same as backend
ofac: false, // Same as backend
// Plus any disclosure fields you want
nationality: true,
gender: true,
}
```
## Next Steps
* [Disclosures](https://docs.self.xyz/self-pass/disclosures) — Full reference for all verification rules and disclosure fields
* [Deployed Contracts](https://docs.self.xyz/self-pass/basic-integration-1/deployed-contracts) — Hub addresses for Celo Mainnet and Sepolia
* [Using Mock Passports](https://docs.self.xyz/self-pass/using-mock-passports) — Test your integration without a real passport
* [Troubleshooting](https://docs.self.xyz/self-pass/troubleshooting) — Common errors and solutions
