Oauth authorization code PKCE : how to keep context in SPA beyond 302 redirect?

Question

I'am currently developing a Oauth autorisation server that allows 'Authorization code grant' and I would like to use PKCE because I'have seen it could be in Oauth2.1 and it seems (a little) more secure than classical 'authorization code'.

I'am also developing a SPA application using Vue.js as my Oauth client.

I did the first steps of PKCE : generating code verifier and code challenge in client side and sending a GET /authorize request containing client_id, response_type=code, redirect_uri, code_challenge and code_challenge_request.

My "GET /authorize" request returns a 302 redirect code that the client browser will follow. At this step, because of the redirection, I'am loosing my context at the client-side and so I'am loosing the code_verifier that I will need at the end of the flow during the "POST /token" request.

So I don't understand how to use a PKCE flow with SPA, I'havent found nothing about that on internet and the RFC just say "follow the redirection" and "use the code verifier" and I don't know how to do that.

I think I could store this code_verifier in a unsecure cookie but I hope there is a better solution.

Bluecollar

Answer 1

The OIDC Client library will do this for you via one liners. There are quite a few tricky areas to SPA security and the library will do the heavy lifting for you.

RESOURCES OF MINE

• OIDC Client Code
• Blog Post

Notice that in my handleLoginResponse method you can get state from before the login redirect, and you don't have to write any PKCE code at all.

Pearse