How to handle social login? - example flow

Question

I have more conteptual question, how exactly should I handle social login in my project. The use case is that I would like to allow user to login with Facebook, and keep on my backend information about this user (email, firstname, lastname)

I have some proposal Flow, but I'm not sure if it's a proper approach.

Let's say that I have application architecture as above. Now I would like to explain step-by-step full success flow.

1. Client (Vue application) make a call to AuthProvider (Facebook)
2. AuthProvider returns access_token
3. Client after reciving access_token make a call to backend endpoint like /fb_profile with access_token and userID (?)
4. Backend make a call to AuthProvider to check if given by client access_token is valid or not.
5. AuthProvider returns information about user. Backend after getting information about user, save it to database and generate new JWT token
6. Backend returns generated token to user

Now my question is - Is this good approach? Or should i handle it in other way? Like keep more logic to backend part? Instead of make a call to Facebook from Client, maybe should I make a call to backend, and backend make a call to Facebook?

Answer 1

You seem to be on right track. There could me many ways to do the same thing, here is the way which is working for me using vue/laravel/passport/socialite/github.

1. Trigger redirect in controller from frontend,

2. Provider(here github app) is triggered in browser with its url using client id/app name saved in back end config/env. Fill out your login details

3. It will redirect as created in provider and configured in backend-> show it on frontend, in my case its

   http://localhost:8080/authorize/github/callback

4. From frontend now trigger callback in controller, it will check if user details already exist and will insert if its first time user as per logic. Then it will send back access_token to frontend which can be used in frontend for all the operations

DB

Answer 2

The above will be the sequence of the request flow ( same as yours ).

This would be the standard practice we used to integrate with Facebook. In this case, I strictly advise you to use the JavaScript SDK for Facebook.

Refer below link in case if you run into the following issue:

Vuejs component wait for facebook sdk to load