Firebase
Back to top

Firebase Documetation

  1. Home
  2. Firebase

Input

Modern admin using firebase social login integration with Facebook,Twitter,Google mail or Github login.

App Module

                      
import {NgModule} from '@angular/core';               
import { SocialSigninComponent } from './social-signin/social-signin.component';
import { LoginComponent } from './login';port { LoginComponent } from './login/login.component';

    @NgModule({
        imports: NgbModule
        declarations: [
            AppComponent,
            SocialSigninComponent,
            LoginComponent,
        ],
    })    
    export class AppModule { }

Social-signin Component


import { Component, OnInit } from '@angular/core';
import { AlertService } from '../_services/alert.service';
import { AuthService } from '../_services/auth.service';
import { Router, ActivatedRoute } from '@angular/router';

export class SocialSigninComponent implements OnInit {
    private homeURL = '/home';
    constructor(private route: ActivatedRoute,
      private router: Router,
      private alertService: AlertService,
      public authService: AuthService) { }

ngOnInit() {}

    tryGoogleLogin() {
        this.authService.doGoogleLogin()
            .then(res => {
                this.setUserInStorage(res);
                this.router.navigate([this.homeURL]);
            }, err => {
                this.alertService.error(err.message);
            });
    }
    tryFacebookLogin() {
        this.authService.doFacebookLogin()
            .then(res => {
                this.setUserInStorage(res);
                this.router.navigate([this.homeURL]);
            }, err => {
                this.alertService.error(err.message);
            });
    }
        
    tryTwitterLogin() {
        this.authService.doTwitterLogin()
            .then(res => {
                this.setUserInStorage(res);
                this.router.navigate([this.homeURL]);
            }, err => {
                console.log(err);
                this.alertService.error(err.message);
            });
    }
        
    tryGithubLogin() {
        this.authService.doGitHubLogin()
            .then(res => {
                this.setUserInStorage(res);
                this.router.navigate([this.homeURL]);
            }, err => {
                console.log(err);
                this.alertService.error(err.message);
            });
    }
  }

Social-signin Markup

social-signin.component.html would look like this 


        <div class="text-center">
        <a (click)="tryFacebookLogin()" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
        <a (click)="tryTwitterLogin()" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
        <a (click)="tryGoogleLogin()" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span class="la la-google font-medium-4"></span></a>
        <a (click)="tryGithubLogin()" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span class="la la-github font-medium-4"></span></a>
    </div>

Login Component

    
import { Component, OnInit } from '@angular/core';
    import { Router, ActivatedRoute } from '@angular/router';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { first } from 'rxjs/operators';
    import { AuthService } from '../_services/auth.service';
    import { AlertService } from '../_services/alert.service';

    export class LoginComponent implements OnInit {
        loginForm: FormGroup;
        loading = false;
        submitted = false;
        returnUrl: string;

        ngOnInit() {
            this.loginForm = this.formBuilder.group({
                email: ['', Validators.required],
                password: ['', Validators.required]
            });
    
            if (localStorage.getItem('currentUser')) {
                this.authService.doLogout();
            }
        }
    constructor(
        private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private router: Router,
        private alertService: AlertService,
        public authService: AuthService) { }

     tryLogin() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.loginForm.invalid) {
            return;
        }
        const value = {
            email: this.f.email.value,
            password: this.f.password.value
        };
        this.authService.doLogin(value)
            .then(res => {
                this.setUserInStorage(res);
                this.router.navigate(['/dashboard/ecommerce']);
            }, err => {
                this.submitted = false;
                this.alertService.error(err.message);
            });
    }

    setUserInStorage(res) {
        if (res.user) {
            localStorage.setItem('currentUser', JSON.stringify(res.user));
        } else {
            localStorage.setItem('currentUser', JSON.stringify(res));
        }
    }

      }

Logout Component

    
import { AuthService } from 'src/app/_services/auth.service';  
 @Component({
    selector: 'app-header-vertical',
    templateUrl: './vertical.component.html',
    styleUrls: ['./vertical.component.css']
  })          
export class VerticalComponent implements OnInit, AfterViewInit {
    constructor(
        public authService: AuthService
    )
    logout() {
        if (localStorage.getItem('currentUser')) {
          this.authService.doLogout().then(res => {
            // this.router.navigate(['/login']);
            window.location.href = '/login';
          }, err => {
            console.log(err);
          });
        }
      }

Logout Markup

        
  <a [routerLink]="" class="dropdown-item" (click)="logout()"><i class="ft-power" <a [routerLink]="" class="dropdown-item" (click)="logout()"><i class="ft-power"></i > Logout </a>