3

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. enter image description here

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?

shaudo
  • 93
  • 1
  • 6

2 Answers2

3

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, enter image description here

  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 enter image description here

  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 enter image description here enter image description here

DBenter image description here

Manoj
  • 803
  • 7
  • 6
  • I tried this solution, but I have problem with CORS, that I can't resolve – shaudo Jun 03 '20 at 16:42
  • I guess you have already tried https://github.com/fruitcake/laravel-cors for resolving cors. Also, sometimes(in less no of cases) cors error is misleading and captured in /storage/logs/laravel.log. Also I followed this tutorial [https://www.youtube.com/watch?v=jzTNMh19aZo&list=PLRoT2Wf8XDsCoow0l5-HXDlEFZJp7alSI&index=20] for socialite. github code of this tutorial - https://github.com/mp27/laravel-vue-spa-issue-tracker-back-end , https://github.com/mp27/laravel-vue-spa-issue-tracker-front-end – Manoj Jun 03 '20 at 20:05
  • It might not be helpful for me, because I wrote my backend in Go. But thanks, I will take a look at those links :) – shaudo Jun 03 '20 at 20:37
2

enter image description here

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

Techie
  • 44,706
  • 42
  • 157
  • 243
  • Great! Thanks for your help! I'll go this way. – shaudo Jun 03 '20 at 16:10
  • 1
    Hi @Techie, i'm just curious .. once the JSON Web Token is expired. 1) How should the client app request a new JSON web token again? 2) Client app should request new JWT token based on respective expiry social token? – Tommy Leong Aug 31 '21 at 00:50