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

    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;
      
      }
      
  1. 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.

  2. 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);
          });
          }

          }

  3. 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

  4. 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.