With the increasing popularity of social login, it is important to provide a fast, easy and friendly authentication. It’s also very common to keep the authentication state on servers. But how to implement this kind of authentication with JWT and SPA?

In a scenario with JWT and Single Page Applications, we have a stateless token and no session. To implement that authentication we need to use some “tricks”. For better understanding, I will separate this article in three parts: what is OIDC and OAuth2, using Passport and Node to use Google OAuth, and using Vue and postMessage api to connect to node api.

What are OIDC and OAuth2

OpenID Connect is about authentication, while OAuth is about authorization. OIDC was created to let a third party authenticate your user for you. If you support OIDC you can’t use credentials (username and password) with an API, because you don’t have those, so we have OAuth to rescue us; by using OAuth we can request information without share credentials.

We will use passport-google-oauth20 strategy for authenticating with Google using the OAuth 2.0 API. Also we use passport-jwt and _passport-local _to provide JWT authentication layer and to add an optional common authentication, respectively.

#vuejs #oauth2 #passport #openid-connect #nodejs