Let’s Build a Robust Social Login Using Spring Boot, Vue.js and Firebase
Tags: backend, vue, springboot, firebase
Published: 2021-03-26 16:30:34



We will build a Vue.js client to login using Github/Google with Firebase and build a stateless backend using spring boot

![Photo by [Nubelson Fernandes](https://unsplash.com/@nubelsondev?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/12000/0*n3qrb2HHI5AzVxf3)

No one likes to use passwords to login for individual sites these days. Social Login using Github, Google, Facebook are the most preferred ways to build modern apps.

Implementing them is a bit tricky, as you will come across a lot of concepts and jargons, like

 1. OAuth 2.0

 2. Open ID connect

 3. Delegated Authorization

 4. Id token

 5. Refresh token
> # The goal is simple, have a front end client like Vue.js and stateless backend using JWT in [Spring Boot ](https://medium.com/javarevisited/top-10-courses-to-learn-spring-boot-in-2020-best-of-lot-6ffce88a1b6e)and users can login seamlessly using one of social provider without ever worrying about password.

## Demo Video
{% youtube VMqd25JaOCQ %}
## Architecture Diagram

![](https://cdn-images-1.medium.com/max/2700/1*ikvhJwD3shM01jxUsBj_fw.png)

 1. From the frontend, we connect to the backend via [firebase ](https://medium.com/javarevisited/why-frontend-developers-should-learn-firebase-16ff7f7150de)SDK and this allows us to communicate with all of the firebase **services** that we need from the frontend.

 2. The user **credentials** are captured via the login/signup form and then are sent securely to the server via a login or sign-up method provided by firebase SDK then on the server firebase invalidates these credentials and it sends back an **authentication token** to the client so then we can access the data in the frontend from this token such as name, email, etc.

 3. Now we pass this token as a **header** to the **backend API**. So, when we hit the firebase from the spring by the token the firebase gives us the user details (like name, email, uid, URL of the picture, etc) according to the token received, and then the user details are saved in the [**database**](https://medium.com/hackernoon/top-5-sql-and-database-courses-to-learn-online-48424533ac61).

 4. The advantage here is the server is **stateless**, so we do not have to handle **sessions, cookies** instead we just get the **token** from firebase which handles the authentication.

Luckily **Firebase** has a built-in system to integrate it, so we can focus on building our cool apps without worrying about Auth.

## Explanation
{% youtube pawFCF0bf0w %}
![Options of Social Integration by Firebase](https://cdn-images-1.medium.com/max/2088/1*pSE_DT02vBnYcQXmMKGIKw.png)

I found two excellent tutorials in medium, which I am going to use for my use case.
[**Vue 2 + Firebase: How to add Firebase Social Sign-In into your Vue application**](https://medium.com/@anas.mammeri/vue-2-firebase-how-to-add-firebase-social-sign-in-into-your-vue-application-21f341bbf1b)
[**Securing SpringBoot API using Firebase Authentication**](https://medium.com/@purikunal22/securing-springboot-api-using-firebase-authentication-16d72dd250cc)

## **Step 1: Create a firebase account**

We have to create a firebase account and we will allow GitHub login

![](https://cdn-images-1.medium.com/max/3928/1*y1sZ2BICpoQP2iIEpEBHbQ.png)

## Step 2: Create a Github OAuth app

Enter the client id, secret of the Github app into the firebase above, and use the callback URL of a firebase in GitHub.

![](https://cdn-images-1.medium.com/max/4148/1*YMz9r1YcTZrdh4h6Pu5xeg.png)

## Step 3: Login using Firebase social (Front-end)

## Project Structure

![Vue Project](https://cdn-images-1.medium.com/max/2000/1*YSCBQ81cZe3fLXahmgCaQw.png)

## 1. Creating routes

In the source directory, create a folder named router, and in that create a JavaScript file that will handle different routes.
{% gist https://gist.github.com/SudhanshuGulhane/53855f5edc7ca9c645d6241017662696.js %}
## 2.Implementing Social Login method using Firebase

![](https://cdn-images-1.medium.com/max/3774/1*rW1auYKwupJK8B42erS9mw.png)

![](https://cdn-images-1.medium.com/max/2000/1*bkThCSqqH07dGn9QQB-8NA.png)

In this step, we will obtain the credentials of the user through firebase Github login functionality and then firebase will send us the id token for that user.

Then we pass this id token to the backend API so that firebase can authenticate the user to view the features of our application (the features that are only restricted to logged-in users).

We will make a button for Github login and clicking the button will trigger the following function.

 1. first we login by firebase.auth().signInWithPopup(provider)

 2. We retrieve the Idtoken from firebase and pass it to spring boot backend in the header, where we will save the User.

So in the source directory of the vue project create a views folder and in that folder create a Vue component called Login.
{% gist https://gist.github.com/SudhanshuGulhane/7b062fa75744010f13524feb6dc0955f.js %}
After receiving the token we then pass it as a header to the backend API.So we passed the token as a parameter to the saveUsermethod which will call the backend API. Now create a JavaScript file named helper.js which will contain the method saveUser.
{% gist https://gist.github.com/SudhanshuGulhane/6b12093d6738eef2ae6500dcc940ce95.js %}
## **Step 4: Create private endpoints in Spring boot (back-end)**

## Project Structure

![Spring Boot Project](https://cdn-images-1.medium.com/max/2000/1*r9ocX4stQeX8MwU3hekD8w.png)

We configure the [Spring backend](https://medium.com/javarevisited/10-best-online-courses-to-learn-spring-framework-in-2020-f7f73599c2fd) in such a way that, when we get the id token from the frontend, we decode the token and get the user information from the firebase. You can read more about it [here](https://medium.com/@purikunal22/securing-springboot-api-using-firebase-authentication-16d72dd250cc)

Once we get the principal user, we can save the user in our database.

## Model

Since we need to store the user in the [database ](https://medium.com/javarevisited/7-free-courses-to-learn-database-and-sql-for-programmers-and-data-scientist-e7ae19514ed2)we create a user model in the model package.
{% gist https://gist.github.com/SudhanshuGulhane/77e39d694c17c0480ae6379f11884d49.js %}
## Repository

Create a repository package and in that create an interface named UserRepository. To use the crud methods of the JPA repository we need to implement a user repository that extends the [JPA](https://medium.com/javarevisited/top-5-books-to-learn-hibernate-for-java-developers-b2cb4b16ccd6?source=---------14------------------) repository.
{% gist https://gist.github.com/SudhanshuGulhane/f776bd723e4c0e9d91ddda9a477757fb.js %}
## Service

Create a service package and in that create a class UserService which will contain the business logic.

We implement the methods for saving the user in the database and fetching the user by email and fetching all the users from the [database](https://medium.com/javarevisited/top-5-courses-to-learn-mysql-in-2020-4ffada70656f).
{% gist https://gist.github.com/SudhanshuGulhane/c46a9b41f2a0e29da30b6e7ea7de4790.js %}
## Controller

Create a controller package and in that create two classes one for handling public endpoints and the other for private endpoints.

The public endpoint will contain API for fetching all the users.
{% gist https://gist.github.com/SudhanshuGulhane/05a983cbcafddd197c4d08ad0ca99215.js %}
The private endpoint will contain the API for fetching the user details and saving the user.

When the method saveUserInfois called from frontend it receives id token from the header and through that token firebase returns the information of that user and hence we save in the database.
{% gist https://gist.github.com/SudhanshuGulhane/ad0c6f9e23d6fe911cde443b7cadbaeb.js %}
## Congratulations !!!

**You have successfully created social login (GitHub) feature using Vuejs, Spring Boot, and firebase.**