Ao implementar o oAuth para integração de terceiros, me deparei com algumas informações que não eram atualizadas há um bom tempo. Aqui estou tentando capturar minha experiência e como ela funciona

Nota: Este artigo não falará em detalhes sobre o oAuth e como ele funciona. Concentre-se principalmente em como configurá-los e implementá-los no aplicativo React. Se você quiser ler sobre o oAuth, leia aqui. Fornece informações cristalinas.

O Fluxo:

Aproximadamente o fluxo funciona conforme descrito acima.

Então, qual é o problema:

Normalmente, quando você tenta obter o código e o code_verifier diretamente de um site de terceiros, você pode encontrar problemas de CORS. Isto é esperado.

Como resolvê-los?

1. Verifique com um provedor terceirizado - se eles puderem colocar seu site na lista de permissões, ótimo. Você não precisa de back-end

2. Se a lista de permissões não funcionar, você pode precisar de um back-end para funcionar como reverse_proxy para você. Em nosso caso, usamos uma configuração simples de texto digitado que faz proxy de nossa chamada e a usamos como back-end para proxy reverso. Você também pode conseguir isso com a configuração de back-end.

Por que está atingindo o CORS?

Porque provavelmente, se você usar PKCE, terá que enviar o cabeçalho de autenticação junto com sua solicitação para obter o token. O envio de autenticação é proibido pela interface do usuário por motivos de segurança.

CORs é um recurso integrado aos navegadores para maior segurança. Ele evita que qualquer site aleatório use seus cookies autenticados para enviar uma solicitação de API ao site do seu banco e fazer coisas como sacar dinheiro secretamente.

Qual biblioteca eu usei para fazer isso facilmente em reação?

https://github.com/authts/react-oidc-context
? Este. Isso fornece configuração como contexto e também suporta webstoragestatestore, o que é bom ter.

Você tem mais perguntas?

Responda aqui. Ficarei feliz em ajudar se puder :)

Boa codificação..