How to add social login functionality using angular and spring boot

1.5k Views Asked by At

How do I add social login functionality in angular and spring boot application.I googled so many time I did not get a proper guidance.Please let me if anybody have done this already.

2

There are 2 best solutions below

0
Thierry Falvo On

You can use Firebase Auth to provide social login feature to your app. The integration with Angular is easy via AngularFire library.

See official doc for authentication.

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.user | async as user; else showLogin">
      <h1>Hello {{ user.displayName }}!</h1>
      <button (click)="logout()">Logout</button>
    </div>
    <ng-template #showLogin>
      <p>Please login.</p>
      <button (click)="login()">Login with Google</button>
    </ng-template>
  `,
})
export class AppComponent {
  constructor(public auth: AngularFireAuth) {
  }
  login() {
    this.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  logout() {
    this.auth.signOut();
  }
}

Then on backend side, with Spring Boot, you can use JWT stateless authentication by validating token received from your Angular app.

I recommend you to read my answer to similar question. The case is focused on Google Sign-in, but the main lines are similar.

The general idea is :*

  • frontend authenticates user via Firebase Auth (with AngularFire lib)
  • frontend app retrieves Authentication token as a JWT token
  • frontend sends JWT token with each HTTP request (with authorization header)
  • backend retrieves JWT for each request, validates its signature, and gets payload attributes (email, id…)
  • then, backend checks ‘email’ or ‘id’ in users database to allow or not request.

Some resources :

0
Akitha_MJ On

Check this may be helpful for someone

https://www.javainuse.com/spring/spring-social

I had existing login system using JWT Tokens with Spring boot ,So I used the Facebook login only for the authentication purpose