Identity Server 4 Social Login for SPA

Question

I'm working on application using a Web API(asp.net core) and a SPA (react-boilerplate). I'm starting work in user registration/login and one of the requirements is to allow for user to sign in with facebook, google, etc

I've been looking to identity server 4 for a few weeks now and to be honest, it feels like an overkill. But I'm willing to implement it. It has a javascript client sample, but this client does not use the external provider. So I'm wondering If anybody has done this before? I'm no expert on OAuth but I suppose I should redirect my user to authenticate to the token service, once there he might use whatever he prefers to authenticate and then redirect to my SPA with the token on the URL?? but I've not found examples on how to do this.

The other approach I've looked was having a simple JWT authorization on the web API and implement the social login with the javascript-SDKs of the external providers then validate their tokens, store them on my Db as a new user and generating a JWT token of my own.

1) What approach would you recommend?
2) Is there an example of Identity Server 4 with a javascript client using external providers for authentications?

Answer 1

It seems that your understanding of the external login is not correct. You should have 3 applications: Web API, SPA and the IdentityServer. The identity providers like FB and Google should be setup in the IdentityServer, not in the Javascript client.

I suggest you take a look at Quickstart 7: https://github.com/IdentityServer/IdentityServer4.Samples/tree/release/Quickstarts/7_JavaScriptClient/src. The Javascript client uses the IdentityModel client which will handle the redirect/saving tokens for you.