Post
Ask Question

Integrating Google Single Sign-On with Angular

The first step in creating a Google App and obtaining a client ID involves navigating to the Google Cloud Console. Here's a reframed step-by-step guide:

  1. Open your web browser and go to https://console.cloud.google.com.
  2. If you don't have a Google Cloud account, you'll need to sign up. Otherwise, log in to your existing Google Cloud account.
  3. Once logged in, you'll be taken to the Google Cloud Console dashboard. In the upper left corner, click on the project dropdown menu. If you don't have a project yet, click on "New Project" to create one.
  4. After selecting or creating a project, click on the navigation menu icon (three horizontal lines) in the upper left corner of the console.
  5. From the menu, navigate to "APIs & Services" and then click on "Credentials."
  6. In the Credentials page, click on the "+ CREATE CREDENTIALS" button, and choose "OAuth client ID."
  7. Select the application type based on your use case. For example, if you are creating a web application, choose "Web application."
  8. Fill in the required information, such as the name of your OAuth client, authorized redirect URIs, etc.
  9. Click "Create" to generate your OAuth client ID.
  10. Your newly created OAuth client ID and client secret will be displayed on the next screen. Make sure to securely store these credentials.

Package for Angular

Certainly! Before installing the @abacritt/angularx-social-login package from npm, you'll need to determine the version of Angular you are using. Here's a reframed guide:

  1. Open your Angular project in your preferred code editor.

  2. Check your package.json file in the root of your Angular project to find the version of Angular you are using.

  3. Once you have identified your Angular version, you can install the appropriate version of @abacritt/angularx-social-login. Let's assume you are using Angular version 10 as an example.

    npm install @abacritt/angularx-social-login@^{Version}

    Replace {Version} with the version number compatible with your Angular version. Use the appropriate version specifier (^, ~, etc.) based on your preference for versioning.

  4. After the installation is complete, you can import and use @abacritt/angularx-social-login in your Angular application.

Compatibility Matrix:

Library Version Angular Version
@abacritt/angularx-social-login:2.1.X 16, 17
@abacritt/angularx-social-login:2.0.X 15, 16
@abacritt/angularx-social-login:1 13, 14, 15
angularx-social-login:4 12, 13
angularx-social-login:3 9, 10, 11
angularx-social-login:2 5, 6, 7, 8

Remember to adapt the package version based on the Angular version you are using to ensure compatibility and proper functionality.

Setup the Google Sign-In

If you are using the Angular Stand Alone Component Structure and need to configure @abacritt/angularx-social-login in your app.config.ts file, follow these reframed steps:

  1. Open your app.config.ts file.

  2. Import the required modules and components from @abacritt/angularx-social-login:

    import {
  SocialLoginModule,
  SocialAuthServiceConfig,
  GoogleLoginProvider,
} from "@abacritt/angularx-social-login";
  3. Set up the appConfig by providing the configuration for social authentication. Update the code as follows: 
    import { ApplicationConfig } from 'path-to-your-application-config-interface'; // Update the path based on your project structure

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              "{{Part 1 of Client ID}}.apps.googleusercontent.com"
            ),
          },
        ],
        onError: (err) => {
          debugger;
          console.error(err);
        },
      } as SocialAuthServiceConfig,
    },
  ],
};

  4. Ensure that you replace {{Part 1 of Client ID}} with the actual client ID obtained from the Google Cloud Console.

  5. Save your app.config.ts file.

Note: This configuration sets up the SocialAuthServiceConfig for your Angular application, specifically for Google login. Make sure to adapt the code according to your project structure and replace the placeholder with your actual Google client ID.

If you are using Angular without a Standalone Component Structure and need to configure @abacritt/angularx-social-login, you can follow these steps to update your app.module.ts file. Here's a reframed version of the code:

  1. Open your app.module.ts file.

  2. Import the necessary modules and classes from @abacritt/angularx-social-login:

    import { NgModule } from '@angular/core'; 
import { SocialLoginModule, SocialAuthServiceConfig, GoogleLoginProvider, } from "@abacritt/angularx-social-login";

  3. Create an object appConfig to hold your social authentication configuration:

    export const appConfig: ApplicationConfig = {
  providers: [ 
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              "{{Part 1 of Client ID}}.apps.googleusercontent.com"
            )
          },
        ],
        onError: (err) => {
          console.error(err);
        },
      } as SocialAuthServiceConfig,
    }
  ] 
};

    Replace {{Part 1 of Client ID}} with the actual first part of your Google Client ID.

  4. Update the @NgModule decorator in your module to include the SocialLoginModule:

    @NgModule({
  imports: [
    // ... other imports
    SocialLoginModule,
  ],
  declarations: [
    // ... your components and directives
  ],
  providers: [
    // ... other services and providers
    appConfig.providers, // Add this line to include the social authentication configuration
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

    Make sure to replace {{Part 1 of Client ID}} with the actual first part of your Google Client ID. This configuration will enable social authentication with Google in your Angular application.

Implementation of Google Sign-In

To use SocialAuthService in your Angular component and store Google user details after logging in, follow these steps:

  • Import the necessary modules and classes: 
    import { Component, OnInit } from '@angular/core';
import { SocialAuthService, SocialUser } from "@abacritt/angularx-social-login";
  • Declare the required local variables in your component: 
    @Component({
  // ... your component metadata
})
export class YourComponent implements OnInit {
  socialUser!: SocialUser;
  public user: SocialUser = new SocialUser();

  constructor(private socialAuthServiceConfig: SocialAuthService) { }

  ngOnInit() {
    this.socialAuthServiceConfig.authState.subscribe((user1: SocialUser) => {
      this.socialUser = user1;
      console.log(user1);
    });
  }
}

Now all ready to go, Please run the application and check the output.

Run the application

Thanks.


Similar Articles