Social login in Angular 5 with Laravel Api

Hi Everybody,

Nowdays everyone want single signon instead of treditional login. In this blog we will focus on how to do social login in Angular 5 and using backend as Laravel

Install via npm

npm install --save angular5-social-login

Import the module

In app.module.ts,

...



import {

    SocialLoginModule,

    AuthServiceConfig,

    GoogleLoginProvider,

    FacebookLoginProvider,

} from "angular5-social-login";





// Configs 

export function getAuthServiceConfigs() {

  let config = new AuthServiceConfig(

      [

        {

          id: FacebookLoginProvider.PROVIDER_ID,

          provider: new FacebookLoginProvider("Your-Facebook-app-id")

        },

        {

          id: GoogleLoginProvider.PROVIDER_ID,

          provider: new GoogleLoginProvid("Your-Google-Client-Id")

        },

      ];

  );

  return config;

}



@NgModule({

  imports: [

    ...

    SocialLoginModule

  ],

  providers: [

    ...

    {

      provide: AuthServiceConfig,

      useFactory: getAuthServiceConfigs

    }

  ],

  bootstrap: [...]

})



export class AppModule { }

Usage :

In signin.component.ts,

import {Component, OnInit} from '@angular/core';

import {

    AuthService,

    FacebookLoginProvider,

    GoogleLoginProvider

} from 'angular5-social-login';



@Component({

  selector: 'app-signin',

  templateUrl: './signin.component.html',

  styleUrls: ['./signin.component.css']

})





export class SigninComponent implements OnInit {



  constructor( private socialAuthService: AuthService ) {}

  

  public socialSignIn(socialPlatform : string) {

    let socialPlatformProvider;

    if(socialPlatform == "facebook"){

      socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;

    }else if(socialPlatform == "google"){

      socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;

    }

    

    this.socialAuthService.signIn(socialPlatformProvider).then(

      (userData) => {

        console.log(socialPlatform+" sign in data : " , userData);

        // Now sign-in with userData

        ...

            

      }

    );

  }

  

}

In signin.component.html,

<h1>

     Sign in

</h1>



<button (click)="socialSignIn('facebook')">Sign in with Facebook</button>

<button (click)="socialSignIn('google')">Signin in with Google</button>              

Facebook App Id :

You need to create your own app by going to Facebook Developers page. Add Facebook loginunder products and configure Valid OAuth redirect URIs.

Google Client Id :

Follow this official documentation on how to Create a Google API Console project and client ID.