DEV Community 👩‍💻👨‍💻

Denis Anisimov
Denis Anisimov

Posted on

Implementing manual OAuth sign-in flow for Facebook and Google

Our web app uses Facebook and Google social logins. We've implemented those using the recommended approach with JS SDKs.

That was easy to do and works fine most of the time, but I've started to see many users facing issues with that when they access the web app using a private browsing mode or have other privacy-related settings turned on. Namely some browsers block the Facebook JS SDKs, and many block third-party cookies which breaks the default Google sign-in.

Given that I've started thinking about implementing the OAuth flow manually completely skipping the JS SDKs. Seems like this will give the most robust results, it is better for user's privacy and can save some bandwidth on the initial page load.

Have anyone followed the same route? Are there any concerns with this approach, e.g. about the security of SDK way vs the manual way?

See also:

Top comments (1)

dbanisimov profile image
Denis Anisimov Author

So for anyone interested I've implemented the manual OAuth flows for both Google and Facebook (look for the links at the end of the original post)

It solved both third-party cookies issue and blocked SDKs issue. The sign-in flow with redirects works perfectly in Private mode with enhanced privacy protection. So far I haven't seen any problems on desktop or mobile.

Good news is that both FB and Google can return short-lived access tokens that can be directly fed to serverless auth providers, like Firebase, so there is no need to implement your own code-token exchange.

As an extra benefit abandoning FB sdk saves same bandwidth on page load.

🌙 Dark Mode?!

Turn it on in Settings