wallet-verifier-test-web

Demo application demonstrating how a relying party may implement authentication using EUDI wallet verification.

Quick Start

Development

npm run dev

Testing

npm run test        # watch mode
npm run test:once   # single run

Docker Setup

./docker/run-ngrok.sh

Access the verifier at the ngrok URL displayed by the script.

Architecture

graph TB
    subgraph "User's Browser"
        Frontend[Nuxt Frontend<br/>Port 3002]
    end
    
    subgraph "Server (Nuxt)"
        ServerAPI[Server API<br/>Nitro Endpoints]
        Memory[(In-Memory<br/>Storage)]
    end
    
    subgraph "External Services"
        Backend[EUDI Backend<br/>Port 8080]
        Wallet[Digital Wallet<br/>Port 3000]
    end
    
    Frontend <--> ServerAPI
    ServerAPI <--> Backend
    ServerAPI <--> Memory
    Wallet --> ServerAPI
    Wallet <--> Backend
    Frontend -.->|Redirect| Wallet

Loading

Verification Flow

sequenceDiagram
    participant User
    participant Frontend
    participant ServerAPI
    participant Backend
    participant Wallet
    participant Memory

    User->>Frontend: Click "Login with wallet"
    Frontend->>ServerAPI: POST /api/verifier-request<br/>(presentation_definition)
    ServerAPI->>Backend: POST /ui/presentations<br/>(type, nonce, presentation_definition)
    Backend-->>ServerAPI: Response:<br/>transaction_id, request_uri, client_id
    ServerAPI-->>Frontend: Normalized response
    
    Frontend->>User: Show "Open wallet" button
    User->>Frontend: Click "Open wallet"
    Frontend->>Wallet: Redirect to http://localhost:3000/cb<br/>with client_id & request_uri
    
    Note over Frontend: Start 90-second timer<br/>Start polling after 5s
    
    Wallet->>Backend: GET /wallet/request.jwt/{requestId}
    Backend-->>Wallet: Signed JWT with presentation definition
    
    Wallet->>User: Request approval
    User->>Wallet: Approve/Reject
    
    alt User Approves
        Wallet->>ServerAPI: POST /api/verifier-callback<br/>(vp_token, state)
        ServerAPI->>Memory: Store verification result
        ServerAPI-->>Wallet: Success
    else User Rejects
        Note over Wallet: No callback sent
    end
    
    loop Every 2 seconds (max 90 seconds)
        Frontend->>ServerAPI: GET /api/verifier-status/{id}
        ServerAPI->>Backend: GET /ui/presentations/{id}
        
        alt Backend has result
            Backend-->>ServerAPI: vp_token (SD-JWT format)
            ServerAPI->>ServerAPI: Parse SD-JWT claims
        else Backend returns error/empty
            ServerAPI->>Memory: Check fallback storage
            alt Memory has result
                Memory-->>ServerAPI: Stored verification
            else No result yet
                ServerAPI-->>Frontend: {status: "pending"}
            end
        end
        
        ServerAPI-->>Frontend: Status + credentials
    end
    
    alt Success
        Frontend->>User: Show verified credentials
    else Timeout (90 seconds)
        Frontend->>User: Show timeout error
    else Verification Failed
        Frontend->>User: Show error message
    end

Loading