DEV Community


Posted on

Angular 11 Google Social Login or Sign In Tutorial using angularx-social-login

Today, We at Bacancy Technology, shared a tutorial about how you can implement the Google Social Login with the use of the angular-social-login library which is available in angular. In Angular 9+, you can easily implement this technique. But if you want to implement this in older versions of Angular, it asks for a few modifications in the code(especially in the module.ts file).

Do you know about the benefits or we can say what is the magic in this tutorial of social login, here you can sign in to the application without even creating a new login by just using your Google/Facebook accounts. In Our tutorial, we only talked about the Google Social Login.

Let’s understand Steps to implement Google Social Login

  • Step 1: Open Google Developer console
  • Step 2: Select a project.
  • Step 3: Click the CREATE button.
  • Step 4: Now go to the OAuth consent screen
  • Step 5: Application set-up
  • Step 6: Create Credentials
  • Step 7: Create OAuth Client ID
  • Step 8: Your Client Id and Your Client Secret

We also discuss the Steps to Integrate Google Social Login with Angular 11 Application using angularx-social-login

  • Step 1: Create a new Angular app
  • Step 2: Generate a new component
  • Step 3: Install angularx-social-login and bootstrap.
  • Step 4: Open the app.module.ts file.
  • Step 5: Open login.component.html file and add the below code.
  • Step 6: the Open login.component.ts
  • Step 7: Start the development server to test the application.

So, Here just we have shared the steps but In our original blog, we have discussed the whole tutorial with all the coding required. If you want to know more about angular-social-login, jump to our original article.

Discussion (0)