To add Google login functionality to your Angular project, you can use the ‘angularx-social-login’ library. Here’s a step-by-step guide:

Step 1: Create a Google Project and Configure OAuth

• Go to the Google Cloud Console.
• Create a new project or select an existing one.
• In the left navigation panel, click on “APIs & Services” > “Credentials.”
• Click on “Create Credentials” and select “OAuth client ID.”
• Choose “Web application” as the application type.
• Set the authorized JavaScript origins and redirect URIs. For development, you can set http://localhost:4200 as the redirect URI.
• After creating the OAuth client ID, note down the client ID.

Step 2: Create an Angular Project

If you haven’t created an Angular project yet, use Angular CLI:

ng new my-google-login-app
cd my-google-login-app

Step 3: Install angularx-social-login

Install the ‘angularx-social-login’ library:

npm install angularx-social-login

Step 4: Configure Social Login Module

Configure the ‘SocialLoginModule’ in your Angular app. Open your ‘app.module.ts’ file and update it like this:

// src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
import { GoogleLoginProvider } from 'angularx-social-login';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SocialLoginModule
  ],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider('YOUR_GOOGLE_CLIENT_ID') // Replace with your actual Google Client ID
          },
        ],
      } as SocialAuthServiceConfig,
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Replace ‘YOUR_GOOGLE_CLIENT_ID’ with the actual client ID you obtained from the Google Cloud Console.

Step 5: Create a LoginComponent

Create a new component named ‘login.component.ts’:

// src/app/login/login.component.ts

import { Component } from '@angular/core';
import { SocialAuthService, GoogleLoginProvider } from 'angularx-social-login';

@Component({
  selector: 'app-login',
  template: `
    Sign in with Google
  `,
})
export class LoginComponent {
  constructor(private authService: SocialAuthService) {}

  signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID).then(
      (userData) => {
        console.log('Google login success:', userData);
        // Handle the successful login, e.g., set user state, store tokens, etc.
      },
      (error) => {
        console.error('Google login failure:', error);
        // Handle the login failure, e.g., show an error message
      }
    );
  }
}

Step 6: Use LoginComponent in App Component

Update your ‘app.component.ts’ file to use the ‘LoginComponent’:

// src/app/app.component.ts

import { Component } from '@angular/core';
import { LoginComponent } from './login/login.component';

@Component({
  selector: 'app-root',
  template: `
    
Angular Google Login
    
  `,
})
export class AppComponent {}

Step 7: Run Your Angular App

Save your files and run:

ng serve

Visit http://localhost:4200 in your browser. When you click the “Sign in with Google” button, it should trigger the Google login process.

Remember to replace ‘YOUR_GOOGLE_CLIENT_ID’ with your actual Google Client ID. Additionally, handle the success and failure callbacks according to your application’s requirements.