Let’s Build a Robust Social Login Using Spring Boot, Vue.js and Firebase

Nil Madhab
Mar 25 · 5 min read

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

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

Demo Video


Architecture Diagram

  1. From the frontend, we connect to the backend via firebase 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.
  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.


Deep dive into code

Step 1: Create a firebase account

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

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.

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

Project Structure

Vue Project

1. Creating routes

In the source directory, create a folder named router, and in that create a JavaScript file that will handle different routes.

2.Implementing Social Login method using Firebase

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.

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.

Step 4: Create private endpoints in Spring boot (back-end)

Project Structure

Spring Boot Project

We configure the Spring backend 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

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


Since we need to store the user in the database we create a user model in the model package.


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 repository.


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.


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.

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.

Congratulations !!!

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


Medium’s largest Java publication, followed by 10000+ programmers. Follow to join our community.

Sign up for Javarevisited Newsletter

By Javarevisited

Collection of best Java articles, tutorials, courses, books, and resources from Javarevisite and its authors, Java Experts and many more.  Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Nil Madhab

Written by

Developer @Booking.com | ex: Samsung, OYO | IIT Kharagpur | Entrepreneur, founder of simplecoding.dev | connect me https://twitter.com/Nilmadhabmondal


A humble place to learn Java and Programming better.

Nil Madhab

Written by

Developer @Booking.com | ex: Samsung, OYO | IIT Kharagpur | Entrepreneur, founder of simplecoding.dev | connect me https://twitter.com/Nilmadhabmondal


A humble place to learn Java and Programming better.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store