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
- OAuth 2.0
- Open ID connect
- Delegated Authorization
- Id token
- Refresh token
The goal is simple, have a front end client like Vue.js and stateless backend using JWT in Spring Boot and users can login seamlessly using one of social provider without ever worrying about password.
- 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.
- 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.
- 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.
- 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.
Firebase has a built-in system to integrate it, so we can focus on building our cool apps without worrying about Auth.
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
In this tutorial, we will see how to quickly add the Firebase Social Sign-In feature into your Vue application.
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)
1. Creating 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.
- first we login by
- We retrieve the
Idtokenfrom 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
Step 4: Create private endpoints in Spring boot (back-end)
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.
You have successfully created social login (GitHub) feature using Vuejs, Spring Boot, and firebase.