Angular 15 Google Social Login Tutorial Example

Here’s an example of how you can integrate Google social login into an Angular 15 application:

1. Install the @angular/fire and firebase packages by running the following command in your terminal:

Copy codenpm install @angular/fire firebase

2. Next, you need to import the AngularFireAuthModule and configure it with your Firebase API key in your app.module.ts file:

Copy codeimport { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AngularFireAuthModule,
    AngularFireModule.initializeApp(environment.firebase),
  ],
  // ...
})
export class AppModule { }

3. In the component where you want to handle the social login, import the AngularFireAuth and use it to sign in with Google.

Copy codeimport { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-login',
  template: `
    <button (click)="loginWithGoogle()">Login with Google</button>
  `
})
export class LoginComponent {
  constructor(private afAuth: AngularFireAuth) { }

  async loginWithGoogle() {
    const provider = new firebase.auth.GoogleAuthProvider();
    const credential = await this.afAuth.signInWithPopup(provider);

    console.log(credential.user);
    // Handle successful login
  }
}

4. In addition to the above steps, you need to configure your Firebase project to enable Google Sign-In and set up the web client. You can follow the instructions on the Firebase documentation to set it up.

This is a basic example of how you can integrate Google social login into an Angular 15 application. You’ll need to add more functionality to handle things like.