Base solution for your next web application
Open Closed

Auto login Google user for SSO #4524


User avatar
0
joe704la created

Since my app is a work app that we are in a Google GSuite account I am forcing my users to login through Google and I got rid of the login form and just have a Sign in with Google button. I am also only allowing users from our domain to login. Everything works great but I would like when a person comes to the login page it automatically logs them in instead of making them click the button. This would create a sort of SSO with all of our other Google apps.


19 Answer(s)
  • User Avatar
    0
    aaron created
    Support Team

    This does not seem possible with Google API. It is not good UX anyway. Consider this: When a user is logged into multiple Google accounts, which would we pick? There is also no way to loop through the accounts. What if the user blocked your app?

  • User Avatar
    0
    joe704la created

    If they are logged into multiple accounts then show the screen to pick, else if one user and it matches the email in our domain, then log them in, else for the login screen. Since this is a work app I have complete control to make sure the users don't block the app.

  • User Avatar
    0
    ismcagdas created
    Support Team

    @joe704la as far as I remember google does this automatically when you redirect user to google to enter credentials. So, you can redirect users to google login page automatically on the Login action (as if they clicked to google social login button) and it should work like you expected.

  • User Avatar
    0
    joe704la created

    Excellent. Thank you.

  • User Avatar
    0
    joe704la created

    @ismcagdas I tried adding some code to the ngOnInit() of the login.component.ts but it doesn't seem to work. Can you take a look at what I am doing and maybe see what I am doing wrong? It seems like the loginService isn't getting initialized. I even tried adding this.loginService.init(); before the loop but that actually created two Google buttons.

    ngOnInit(): void {
            for (let provider of this.loginService.externalLoginProviders) {
                if (provider.name === ExternalLoginProvider.GOOGLE) {
                    this.googleProvider = provider;
                }
            }
            if (this.googleProvider != null || this.googleProvider != undefined) {
                this.externalLogin(this.googleProvider);
            }
    }
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    @joe704la, sorry I misshed your last post. Do you get an error ? Maybe you should try it in ngAfterViewInit.

  • User Avatar
    0
    joe704la created

    I tried that as well and this.loginService.externalLoginProviders is still empty for some reason.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Do you get a valid list from server for below call ?

    this._tokenAuthService.getExternalAuthenticationProviders()
    
  • User Avatar
    0
    joe704la created

    No, I copied this into login.component and it didn't work either when I called this.initExternalLoginProviders() in ngOnInit or ngAfterViewInit.

    private initExternalLoginProviders() {
            this._tokenAuthService
                .getExternalAuthenticationProviders()
                .subscribe((providers: ExternalLoginProviderInfoModel[]) => {
                    this.externalLoginProviders = _.map(providers, p => new ExternalLoginProvider(p));
                });
        }
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    @joe704la this is weird.

    • Are you selecting a tenant on login page ? Social logins don't work for host side.
    • Have you disabled multi tenancy ?
  • User Avatar
    0
    joe704la created

    @ismcagdas it is very weird. We don't use multi-tenancy in this app. It is disabled.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Could it be related to <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/issues/753">https://github.com/aspnetzero/aspnet-ze ... issues/753</a> ?

  • User Avatar
    0
    joe704la created

    @ismcagdas, I don't think so because in the UI the actual login provider does show up. This is what confuses me so much. It seems like the service is working perfectly. But for whatever reason when I try to call it in either in this.initExternalLoginProviders() in ngOnInit or ngAfterViewInit it doesn't load the providers and I cannot access them in either of those Init's

  • User Avatar
    0
    ismcagdas created
    Support Team

    @joe704la have you tried to call this code inside a settimeout function ? Something like this:

    setTimeout(function(){
        // place your Google sign-in initialization 
    },0);
    

    You can also try to increase timeout from 0 to something acceptable if it doesn't work at the first place. If this doesn't work for you, I will try to replicate same scenario.

  • User Avatar
    0
    joe704la created

    @ismcagdas thank you as always for the awesome help. It took a combination of the below code but now its working good.

    ngAfterViewInit(): void {
            this.initExternalLoginProviders();
            setTimeout(() => {
                this.tryGoogleLogin();
            }, 100);
        }
    

    One more question. I was trying to switch from having the pop-up window to it redirecting in the same window. I added the uxMode but it just gets into a redirect loop. Would you have any idea how to handle this?

    gapi.client.init({
                                clientId: loginProvider.clientId,
                                scope: 'openid profile email',
                                uxMode: 'redirect',
                                redirectUri: AppConsts.appBaseUrl
                            })
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    Can you share code of tryGoogleLogin ?

  • User Avatar
    0
    joe704la created

    No Problem.

    private tryGoogleLogin() {
            for (let provider of this.externalLoginProviders) {
                if (provider.name === ExternalLoginProvider.GOOGLE) {
                    this.googleProvider = provider;
                }
            }
            if (this.googleProvider != null || this.googleProvider != undefined) {
                this.externalLogin(this.googleProvider);
            }
        }
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    @joe704la it seems fine. I couldn't figure it out. Let me try it in AspNet Zero as well.

  • User Avatar
    0
    joe704la created

    Sounds good. Thank you