Vue Storefront is now Alokai! Learn More
Sapcc Server Side Pkce Flow

sequenceDiagram autonumber participant Browser as Storefront (browser) participant Middleware as Alokai Middleware participant SAP as SAP authorization server

Browser->>Middleware: loginCustomer({ email, password })
Note over Middleware: generate code_verifier + code_challenge (S256)
Middleware->>SAP: GET /oauth/authorize (client_id, code_challenge)
SAP-->>Middleware: SAP-hosted login page (CSRF token)
Middleware->>SAP: POST /login (username, password, _csrf)
SAP-->>Middleware: 302 redirect with single-use ?code=...
Middleware->>SAP: POST /oauth/token (grant_type=authorization_code, code, code_verifier)
SAP-->>Middleware: { access_token, refresh_token, expires_in, ... }
Middleware-->>Browser: Set-Cookie vsf-sap-token (HttpOnly, Secure, SameSite=Strict)

Note over Browser,SAP: subsequent calls are authenticated
Browser->>Middleware: sdk.unified.getCart() ...
Middleware->>SAP: OCC call with Authorization: Bearer access_token