Loyalty SSO - User Flow Diagram

%%{init: { "theme": "base", "themeVariables": { "fontSize": "18px", "background": "transparent", "actorBkg": "#038851", "actorTextColor": "#ffffff", "actorBorder": "#026139", "actorLineColor": "#94a3b8", "signalColor": "#64748b", "signalTextColor": "#059669", "noteBkgColor": "#e6f4ee", "noteTextColor": "#02502f", "noteBorderColor": "#038851", "activationBkgColor": "#c6ebdc", "activationBorderColor": "#026139", "sequenceNumberColor": "#ffffff" }, "sequence": { "useMaxWidth": true, "actorMargin": 70, "width": 150, "height": 60, "boxMargin": 12, "noteMargin": 14, "messageMargin": 50, "diagramMarginX": 20, "diagramMarginY": 20, "actorFontSize": 18, "actorFontWeight": 700, "noteFontSize": 15, "noteFontFamily": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", "messageFontSize": 16, "messageFontWeight": 700, "noteAlign": "left", "mirrorActors": false } }}%%
sequenceDiagram
    participant Loyalty App
    participant Deliverect
    participant Loyalty Provider
    participant Online Store
    Loyalty App->>Loyalty App: Customer selects an ordering site
    rect rgb(255, 245, 200)
    Note over Loyalty App, Loyalty Provider: Initiate SSO flow
    end
    Loyalty App->>Loyalty Provider: App redirects to loyalty provider
    Loyalty Provider->>Loyalty Provider: Generate authorization token
    rect rgb(255, 245, 200)
    Note over Deliverect, Loyalty Provider: OAuth token exchange
    end
    Loyalty Provider-->>Deliverect: HTTP redirect {ssoUrl}?code={token}&returnUrl={storeUrl}
    Deliverect-->>Loyalty Provider: POST {oauthUrl}/token
    Loyalty Provider-->>Deliverect: {accessToken}
    rect rgb(255, 245, 200)
    Note over Deliverect, Loyalty Provider: Get customer with accessToken in header
    end
    Deliverect-->>Loyalty Provider: GET {customerUrl}
    Loyalty Provider-->>Deliverect: {customer}
    rect rgb(255, 245, 200)
    Note over Deliverect: Deliverect performs user identity handshake with the store
    end
    Deliverect->>Online Store: HTTP redirect to store