How to implement oAuth with PKCE for third-party integration in react

While implementing oAuth for third-party integration, I stumbled upon some informations which weren't updated for quite a while. Here I am trying to capture my experience and how it works

Note: This article won't talk in detail about oAuth and how it works. Mostly focus on how to configure and implement them in react application. If you want to read about oAuth, read here. Provides crystal clear information.

The Flow:

Roughly the flow works like described above.

So, what's the problem:

Usually when you try to get the code & code_verifier from third party website directly, you may encounter CORS issue. This is expected.

How to resolve them ?

1. Check with third party provider - If they can whitelist your website, amazing. You don't need a backend at all

2. If whitelisting doesn't work, you may need a backend to work as reverse_proxy for you. In our case, we used a simple typescript setup which proxies our call and used it as backend for reverse proxy. You can achieve it with your backend setup too.

Why it's hitting CORS?

Cause most likely, if you use PKCE, you have to send Authentication header along with your request, to get the token. Sending Authentication is a no-no from UI for security reasons.

CORs is a feature built into browsers for added security. It prevents any random website from using your authenticated cookies to send an API request to your bank's website and do stuff like secretly withdraw money.

Which library did I use to get it done easily in react?

https://github.com/authts/react-oidc-context
? this one. This provides configuration as context and also supports webstoragestatestore which is nice to have.

Do you have more questions?

Reply here. Gladly would love to help if I can :)

Happy coding..

The above is the detailed content of How to implement oAuth with PKCE for third-party integration in react. For more information, please follow other related articles on the PHP Chinese website!