Social OAuth Login Architecture with ReactJS


(Nuno Santos) #1

Hi guys

First of all, let me say I am a new developer in the react world, so I don’t have a lot of experience in it. I’ve been playing around on my own and reading online tutorials. I’m currently building a login screen and I’ve decided to integrate with both Facebook and Google.

My initial idea revolved around having a LoginPage component, with two other components, e.g. FacebookButton and GoogleButton.

I want to go beyond that and try to setup some kind of authorization in a dummy app (maybe just a couple of pages and validate the tokens from the social logins)

Given this scenario, how should I split the login logic? I know I should have a component to render the specific button, but what about integrating the the respective third apis? Is it a good practice to have it in the same component or should I have a different file with that information?

I understand I’ll have to expose the access token after the login flow, but what is the best way to go about it?