openid_client icon indicating copy to clipboard operation
openid_client copied to clipboard

PKCE flow cannot be completed in AngularDart web application due incorrect 'code_verifier' value

Open theanurin opened this issue 5 years ago • 0 comments

Hello,

I am working on AngularDart Web SPA and want to implement PKCE authentication...

I meet an issue with Flow.authorizationCodeWithPKCE. Constructor of the class initializes values (see code lib/src/openid.dart#L342-L349)

    ...
    var verifier = _randomString(50);
    ...
    _proofKeyForCodeExchange = {
      'code_verifier': verifier,
      'code_challenge': challenge
    };
    ...

So each new Flow object has own verifier/challenge values.

In my authentication scenario:

  • My application creates first Flow object and make redirect to Authentication Server (IndentityServer4 in my case). Redirect looks like https://id.server/connect/authorize?response_type=code&scope=openid+openid+profile+Dashboard.Read+Dashboard.Write&client_id=angular_spa&redirect_uri=http%3A%2F%2F127.0.0.1%3A8080%2F%23%2Fchildren&state=9KFkMK4NhbCUgQpP0wNst9e5nVmFbCIeOdSNVGGgFkpfBDZeKE&code_challenge_method=S256&code_challenge=OeY8ejw4ONcZty_lQBLpWbhFyAUfyEe8uRWS5o7wPq4. This link has code_challenge from first Flow object.
  • Authentication Server ask login/password and make necessary auth action. Finally Authentication Server redirect browser back to my app. Redirect looks like http://127.0.0.1:8080/#/children?code=7B69313E40979013687FC8442829B0849E287CD351B2F35E83207290270403B3&scope=openid%20profile%20Dashboard.Read%20Dashboard.Write&state=9KFkMK4NhbCUgQpP0wNst9e5nVmFbCIeOdSNVGGgFkpfBDZeKE&session_state=b1qZ6KgawcJw5G6IDewn9UlnccZgVWhvlO68oBfC7ww.6EF65CE28705809AB26C552A3F07DBFF
  • My applications is loading into browser. The application creates second Flow object, validates query arguments and call flow.callback(q.cast()). Authentication Server sends failure response: "Transformed code verifier does not match code challenge" and this is correct due we sent incorrect code_verifier from second Flow object.
  1. Is this expected behaviour? How use Flow to avoid the issue?
  2. Provide your vision to solve the problem and I will make implementation as PR

Thanks

Screen Shot 2021-01-07 at 20 16 24

theanurin avatar Jan 07 '21 18:01 theanurin