Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including angular-6-social-login-v2 with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. require("rxjs/package.json"); // rxjs is a peer dependency. require("zone.js/package.json"); // zone.js is a peer dependency. var angular6SocialLoginV2 = require("angular-6-social-login-v2")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

angular-6-social-login-v2 v1.0.5

Agular 6 : Social Login (Facebook, Google, Vkontakte and LinkedIn)

Original project : high54

Social login api for Angular 6. Includes Facebook, Google login, Linkedin, Vkontakte.

Generic badge Generic badge AOT Compatible.

Getting started

Install via npm

npm install --save angular-6-social-login-v2

Import the module

In app.module.ts,


import {
} from "angular-6-social-login-v2";

// 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 GoogleLoginProvider("Your-Google-Client-Id")
          id: VkontakteLoginProvider.PROVIDER_ID,
          provider: new VkontakteLoginProvider("Your-VK-Client-Id")
            id: LinkedinLoginProvider.PROVIDER_ID,
            provider: new LinkedinLoginProvider("")
  return config;

  imports: [
  providers: [
      provide: AuthServiceConfig,
      useFactory: getAuthServiceConfigs
  bootstrap: [...]

export class AppModule { }

Usage :

In signin.component.ts,

import {Component, OnInit} from '@angular/core';
import {
} from 'angular-6-social-login-v2';

  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;
    } else if (socialPlatform == "linkedin") {
      socialPlatformProvider = LinkedinLoginProvider.PROVIDER_ID;
    } else if (socialPlatform == "vkontakte") {
      socialPlatformProvider = LinkedinLoginProvider.PROVIDER_ID;
      (userData) => {
        console.log(socialPlatform+" sign in data : " , userData);
        // Now sign-in with userData
        // ...

In signin.component.html,

     Sign in

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

Facebook App Id :

You need to create your own app by going to Facebook Developers page. Add Facebook login under 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.

Vkontakte Open API :

Follow this official documentation on how to Open API work

For use you need create Standalone app and then set configuration Open API: ON.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free