What is the 'authorization code PKCE flow' complete step-by-step for a Single Page Application?

• A.Steps: 1) SPA generates a client_secret (random 32-96 bytes) and stores it in local storage; 2) SPA redirects to the IdP /authorize endpoint with the secret in the query string; 3) User authenticates at the IdP; 4) IdP redirects back to the SPA with an access token in the URL fragment; 5) SPA validates the state value; 6) SPA calls the API with the token; 7) IdP rotates the secret on each use, returning refresh tokens when needed by the single page application, with the user redirected to the IdP for each new session
• B.Order: 1) User authenticates at the IdP and the IdP issues an authorization code; 2) SPA generates a code_verifier (random 32-96 bytes) and a code_challenge after the redirect; 3) SPA posts the challenge and the code to /token; 4) IdP verifies the code, returning access and ID tokens; 5) SPA checks the state value; 6) SPA stores the refresh token in a cookie readable by scripts; 7) SPA calls the API with the access token, a flow that stores long-lived credentials in script-readable storage on the device
• C.1. SPA generates code_verifier (random 32-96 bytes) and code_challenge = base64url(sha256(verifier)). 2. Redirect to IdP: /authorize?client_id=...&code_challenge=...&code_challenge_method=S256&state=csrf&redirect_uri=... 3. User authenticates at IdP. 4. IdP redirects back to SPA: /callback?code=abc&state=csrf. 5. SPA validates state matches. 6. SPA exchanges: POST /token {code=abc, code_verifier=..., client_id=...}. 7. IdP verifies sha256(verifier)==challenge, returns access+ID+refresh tokens