Firebase google login setup in Angular

ng-firebase-google-login.md

Firebase google login setup in Angular

Social login is the fastest way to engage users. And luckily firebase has done the hard work for us. In this post we will configure google login in no time!

Step-1: Configure firebase and google cloud console

1.1: Setup firebase project

1.1.1: Head to firebase and open your project

1.1.2: Open Authentication from left sidebar

1.1.3: Goto Sign In Methods and select Google

1.1.4: Enable it, select project support email as your gmail account from dropdown and click on the save button

1.2: Setup OAuth in google cloud console

Note: Skip this if you have already enabled

1.2.1: Head to google cloud console and select your project from the top bar

1.2.2: Open APIs & Services and then Credentials from left sidebar

1.2.3: Click on Create Credentials and select OAuth client id

1.2.4: Select Web Application and save it

Step-2: Install packages

2.1: Install firebase-tools globally if not installed

npm i -g firebase-tools

or

yarn global add firebase-tools

2.2: Install required project packages

npm install firebase @angular/fire --save

or

yarn add firebase @angular/fire

Step-3: Configure the module

...
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuth } from '@angular/fire/auth';

export const firebaseConfig = {
  "apiKey": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "authDomain": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "databaseURL": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "projectId": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "storageBucket": "",
  "messagingSenderId": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "appId": "xxxxxxxxxxxxxxxxxxxxxxxx"
}

@NgModule({
  ...
  imports: [
    ...
    AngularFireModule.initializeApp(firebaseConfig),
  ],
  providers: [
    ...,
    AngularFireAuth
    ],
  bootstrap: [...]
})
export class AppModule { }

Step-4: Add minimum code to make google login work

For this example, we will use a component named LoginComponent

login.component.html

<button (click)="_loginWithGoogle()">Google</button>

login.component.ts

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

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {


  constructor(
    private afAuth: AngularFireAuth
  ) { }

  ngOnInit() { }

  _loginWithGoogle() {
      this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider())
        .then(googleResponse => {
          // Successfully logged in
          console.log(googleResponse);
          // Add your logic here
          
        }).catch(err => {
          // Login error
          console.log(err);
        });
  }

}

there is no import { auth } from 'firebase/app';

@adventeurs with the new library you have to use it like this.

import {Component} from '@angular/core';
import { Auth, GoogleAuthProvider, signInWithRedirect } from '@angular/fire/auth';
@Component({
  selector: 'app-login',
  standalone: true,
  imports: [],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent {
  constructor(private afAuth: Auth) {
  }

  login(){
    signInWithRedirect(this.afAuth, new GoogleAuthProvider());
  }

}

In app.config.ts you have to provide auth dependency, since this is a standalone application