Considering Authorization Code Flow with PKCE inside an iframe as follows:
+-------------------+
| Authz Server |
+--------+ | +---------------+ |
| |--(A)- Authorization Request ---->| | |
| | + t(code_verifier), t_m | | Authorization | |
| | | | Endpoint | |
| |<-(B)---- Authorization Code -----| | |
| | | +---------------+ |
| Client | | |
| | | +---------------+ |
| |--(C)-- Access Token Request ---->| | |
| | + code_verifier | | Token | |
| | | | Endpoint | |
| |<-(D)------ Access Token ---------| | |
+--------+ | +---------------+ |
+-------------------+
How does a SPA application (React, for instance) can store a code_verifier as when a (B) callback occurs (considering a 302 redirection or window.location.replace) the page reloads and the state (original code_verifier) is lost?
How to implement this flow as same as a native mobile application, without storing code_verifier in a backend and just keep it in memory?
If you don't want to use any backend to keep the code verifier, you can utilise session storage. Local storage will be blank when you come back from the Authorization Server to your SPA, but data in session storage will still be available, as long as you stay on the same tab.