Add PKCE functionality to support authentication in SPAs

[amandesai01]

I am very well aware of the efforts taken in #12, however, I do not agree with the implementation.

PKCEs are a way for SPAs to authenticate securely. They are protected by redirect_uris and use SHA-256 checksum to prevent XSS attacks.
They are pretty well adopted and almost all decent auth providers allow PKCE for authentication.

Therefore, implementing PKCE for server side code doesn't make sense. Also, PR is not being actively worked on.

Implementation Proposal:
A Nuxt plugin for providers which runs client side and performs PKCE logic.

Ref: https://github.com/bitinflow/nuxt-oauth/blob/main/src/runtime/plugin.ts

I am open to PR if we are going to merge it.

[atinux]

Thanks for the issue, this module is focused on Nuxt applications running with a server so far (and it's already quite complex).

I like the idea of the plugin but yours is working only for one specific OAuth endpoint right? We will need to have the logic for each provider in this case.

[amandesai01]

Yes, my proposal is to have similar system like in backend. Implement general PKCE and let it be customisable.

[shgnplaatjies]

Yes, my proposal is to have similar system like in backend. Implement general PKCE and let it be customisable.

Have you implemented a workaround? I'm trying to integrate this into a SPA as well and bumped into a AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption. error from Microsoft Entra ID.

[itpropro]

Thanks for the issue, this module is focused on Nuxt applications running with a server so far (and it's already quite complex).

I like the idea of the plugin but yours is working only for one specific OAuth endpoint right? We will need to have the logic for each provider in this case.

PKCE should also be used on a confidential client flow (auth code grant with a client secret) and the implementation logic should not differ between server side client side, so the utility can be universal. There are even IdPs like Zitadel who offer a PKCE only flow (no client secret).

The steps would be

1. Generate and store a PkceVerifier in the current authorization flow session
2. Generate a PkceCodeChallenge based on the PkceVerifier and attach it to the login request in the code_challenge field
3. When sending the callback token request to get a access (and/or id) token, add the PkceVerifier in the code_verifier field
4. Clear the temporary auth session used during oauth flow and use the user session or clear the PKCE fields