35 Replies to “How to Implement Sign-in with Google in Angular and a REST API”

  1. Hi, using this plugin while logging into google I’m also gets logged into the google account. So while logging out we should log out of google account also. But that is not the standard way right? Actually logging in using google should only log into the particular web app only but not the linked google account right? So is there any solution so that we would only get logged into the particular web app but not the associated account?

  2. Hello, i have created a rest api using express js and added authentication using json web token. now i want to implement social login into the frontend and send the data to rest api backend to return back the token as usual with jwt. I am using vue js as the frontend. Can you point me in the right direction here? Flow should be:
    1. provide options to user to login with: a. email and password -> use the regular jwt authentication
    b. google sign in , c. facebook sign in

    1. When I last build a similar system, i used the following approach. The email and password login would work as normal, including JWT for session management. Then when someone logged in with Facebook or Google, i would send the token received to their respective endpoint on my server, verify they are genuine and then generate a JWT Token, similar to that of email and password login. From there, all JWT Token are the same, regardless of the login method, so validation, refreshing is done using the same methods for all sign in methods. You can improve this, by using a provider and token fields inside your JWT Token. Then, during refreshing of the JWT token, you can validate the token against either google or facebook, and whenever you are issued with a new token from google or facebook, replace the old one inside your own JWT. This process should on all backends, not just express. I hope this helps you.

          1. thanks for your reply, i have already implemented node js with express js as rest api backend, but from frontend i cannot figure out exactly how i can achieve this. Anyway, thank you very much for the conversation, you are the first person to respond with this much help. Thank you very much 🙂 .

          2. You are welcome. On the frontend, where are you having trouble? And are you using Angular or VueJS, i saw the the post you made was on a VueJS Forum.

          3. i want to build a pwa using vue where i need to add social login beside the email + password combo, i implemented email + password auth logic in the backend, but cannot figure out exactly how i can implement the social login in the frontend and send the token to the backend, and then how to verify the token is valid and send back the jwt token as usual. It would be very great if i can have some code samples in hand. I know the logic but cannot figure out the implementation that’s all. Haha. I am really new to this.

          4. I haven’t used VueJS before, so I don’t have a specific answer for you. But basically you have two options, the first is look for a social login library for Vue and use the instruction they have to try and make it work. Try, checking at frequency of updates, github stars, number of collaborators and how fast they respond to issues as a guide for choosing a library. The other option, is to implement you own system by using documentation from your login providers (Facebook, Google, Twitter etc), this won’t be easy but is also a very good learning experience and you will be happy with the results.

        1. implement social login library
          setup google oauth app or facebook app
          invoke the social login library’s signIn method passing your google app’s key
          send resulting token to your rest api to store and compare against

          1. thanks for your suggestion. once i finished implementing it, it will definitely share with a blog about it.

  3. Hello,
    I was wondering if it’s possible to implement your own provider ? I want to make a provider to log in with office 365.
    I tried to add a new file and extend the BaseLoginProvider but this doesn’t seem to work.
    I keep getting the error: “Module not found: Error: Can’t resolve ‘angularx-social-login/src/entities/base-login-provider'”
    Do you have any idea how I can achieve this ?
    Thanks in advance

    1. I haven’t had such a thought to implement a custom provide, I will look into it and get back to you as soon as possible. Have you tried raising an issue on their github page?

    1. You can achieve that by first, create a login option object, and listing your scope:

      
      const googleLoginOptions: LoginOpt = {
        scope: 'profile email' // add scopes here
      };
      
      

      Then modify the getAuthServiceConfigs and the extra login options:

      export function getAuthServiceConfigs() {
          let config = new AuthServiceConfig([{
              id: GoogleLoginProvider.PROVIDER_ID,
              provider: new GoogleLoginProvider("", googleLoginOptions )
          }]);
      
          return config;
      
      }
      
  4. Hi,
    Thank you for this wonderful tutorial. I s there any way to create a refresh token? Because this token gets expired after a certain time. But I want my user to be able to use the app without the token expiring till he log out. Or is there any way to extend the expiration time of the token?
    Thanks

    1. Hi, it should be possible possible. Could you please give me up ot next, so that I can do some research and create some tutorial for that. At the moment, I will have to test it thoroughly before recommending on the best way to achieve that.

  5. Hi.thank you very much for this article.
    I’m using JAVA spring boot in the server side.
    What is the google url to check validity of idToken?

    1. You can subscribe to the login state as follows:

      this.authService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = (user != null);
      });

    1. You can subscribe to the login state as follows:

      this.authService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = (user != null);
      });

      1. Hi, thanks a lot… It works. But how to know the login state in another ‘ts’ file? I have defined the authService component in my login.component.ts. But i want to know the login status in another file – status.ts. So when i define an authService object in ‘status.ts’ and subscribe as shown above, I’m getting the value as undefined. Can you help me?

        1. You just define the auth authService in your new component and then subscribe to the authState. Remember services are singletons, and changes are held in place for other other component and not discarded. In your new component just subscribe to the authState after injecting authService into the constructor.

          import { AuthService } from "angularx-social-login";
          import { SocialUser } from "angularx-social-login";

          @Component({
          selector: 'app-demo',
          templateUrl: './demo.component.html',
          styleUrls: ['./demo.component.css']
          })
          export class DemoComponent implements OnInit {

          private user: SocialUser;
          private loggedIn: boolean;

          constructor(private authService: AuthService) { }

          ngOnInit() {
          this.authService.authState.subscribe((user) => {
          this.user = user;
          this.loggedIn = (user != null);
          });
          }

          }

  6. Hello,

    I’m getting an error. Hoping you can help. In my app.module I have this:

    import { SocialLoginModule, AuthServiceConfig, GoogleLoginProvider } from ‘angular-6-social-login’;
    import { getAuthServiceConfigs } from “./socialLoginConfig”;

    providers: [
    SocialLoginModule.initialize(getAuthServiceConfigs)
    ],

    Getting an error that says: Property ‘initialize’ does not exist on type ‘typeof SocialLoginModule’.

    Here is my configs:
    import { SocialLoginModule, AuthServiceConfig, GoogleLoginProvider } from ‘angular-6-social-login’;

    export function getAuthServiceConfigs() {
    let config = new AuthServiceConfig([{
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider(“my provider has been removed here”)
    }]);

    return config;
    }

    Any ideas?

    Ron

    1. in app.module.ts use this code instead:

      providers: [
      {provide: AuthServiceConfig,
      useFactory: getAuthServiceConfigs}
      ]

    1. Yes, it does. You have to install the latest version of angularx-social-login which is compatible with Angular 6 and RXJS 6

  7. Nice read, I just passed this onto a colleague who was doing a little research on that. And he actually bought me lunch since I found it for him smile Therefore let me rephrase that: Thanks for lunch!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.