Vue Storefront is now Alokai! Learn More
Sapcc Browser Redirect Pkce Flow

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

Note over Browser: generate code_verifier + code_challenge (S256)
Browser->>SAP: redirect GET /oauth/authorize (client_id, code_challenge)
SAP-->>Browser: SAP-hosted login page (user enters credentials)
SAP-->>Browser: 302 redirect to /login/callback?code=...

Browser->>Middleware: exchangeAuthCode({ code, codeVerifier })
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