V
V
vorotech2019-01-06 21:08:52
Angular
vorotech, 2019-01-06 21:08:52

Social Login and Angular - client or server?

Hello. I'm missing arguments to choose which side (frontend or backend) to implement social login (Google, Facebook...) for an app that consists of two containers: Angular+Nginx (frontend) and NodeJs+Express (backend).
Each of the options is eligible for implementation. I will briefly write what I considered doing for each of the parties.
A bit of context.
After successful authentication on the backend (for example, login via email + password is now implemented), the client receives a JWT token, which Angular saves in localStalorage and, using the Interceptor, adds, as a header, to each request to protected methods on the backend.
The planned implementation of social login in general terms assumes the following logic (using facebook as an example):

  1. The user goes to a page that redirects to the facebook login page.
  2. If the user has allowed the application access to his profile, then the callback method will be called, to which access_token, refresh_token, profile { id, email, ... } are passed as parameters
  3. The database of our application is searched for a user by profile.id
  4. If the user is not found, then an email search is performed to automatically link the existing user's profile to the facebook profile
  5. If the user is not found by email, a new user is created.
  6. A JWT token is generated for the user and sent to the client.

Option 1 - if on the frontend:
Authentication logic (redirect + callback call) is performed entirely on the client. This is easily configured using node modules, for example https://github.com/abacritt/angularx-social-login
The client, as a result of successful authentication, will receive the access_token of the provider. This token must be passed to the backend, where using the provider's sdk, the backend, passing the token, will execute a request to obtain data from the profile: id, email, name.
Further, on the backend, the logic for comparing data from the profile and the database is performed. Next, the backend returns a JWT token, which the client will save to the right place and redirect the user to the authorized page.
The strange thing that I see is the need to pass a token to the backend, and the logic for validating this token, and such logic will be duplicated for each social login provider.
More about this method https://theinfogrid.com/tech/developers/angular/fa...
Option 2 - if on the backend:
REST methods for the frontend are implemented on the backend. In the case of implementing a social login, you need to add a few new ones.
app.get('/auth/facebook', ...);
app.get('/auth/facebook/callback', ...);

After pressing the [Sign In with Facebook] button on the client, a browser transition to the '/auth/facebook' page is performed
. the above method. www.passportjs.org/packages/passport-facebook
Upon successful authentication, the strategy redirects to the '/auth/facebook/callback' method, which contains the logic for matching data from the profile and the database.
After getting (or creating) a user, another redirect is performed to the page of the client application, passing the JWT token using the header. On the client, you need to implement a handler that will store the token in the right place and send the user to the authorized page.
The difficulty I see is saving additional parameters that can optionally be passed from the client (for example, a referral code) between redirects (to facebook and back). To do this, most likely, you need to save such data to the session.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question