How to add Google Sign in using angular | Lazy Loading Single Sign On | Angular tutorial

handling backend authorization of recaptcha:

Google Developer Console:

HTML code snippet:
meta name="" content="// your client ID"
div class="g-signin2" data-onsuccess="onSignIn" /div

data object from Google on successful sign in:
{
Bd: "John Doe", // full name
sW: "John", // first name
tU: "Doe" // last name
SK: "**address**" // image link of the user
}

to get data from profile, use this:
now to get user attributes, use this:
etc.
for full list of functions see this link:

For complete tutorial from beginning refer following playlists

Check out other videos on our channel & Don’t forget to subscribe.

[raiginvlog]

Wow great info.thanks for sharing done my part staycon

[rahulmukherjee]

I really cant understand which part of it is "lazy loading". Lazy loading as a concept is generally related to loading chunks, modules etc on demand and not eagerly. So what exactly is being loaded lazily here?

[simritifotedar]

Very nice tutorial.Had a question . kindly help.How to get the user data on successful signin. Like how can i get name, email, profile picture any details associated with that

[omartariq]

Which angular version are you using, I am using angular8 the lazy loading doesn't work, I see the meta tag generated <meta in the head and the <script in the body however the button <div class="g-signin2" in my login.component.html doesn't load.

When I don't use lazy loading, it works only if I go to login component directly (or reload login component in browser), once I go back there after logout or go from home to login the button is not visable.

Edit:
Thanks for your reply.

I have updated to angular9, stlll same issue. If you add a home component into your angular project that links to your login page, when you go from home to login using angular link the google signin button won't display.

The google guide "Google Sign-In for Websites - Integrating Google Sign-In into your web app" shows how to add signin button in plain javascript. The button does not disappear when signed in. It goes ftom "Sign In" to "Signed In". This guide works but doesn't integrate with angular, the code is placed in index.html and the login/logout buttons appear in all components, also cannot call angular components/services this way.

There is a solution to send event when clicking signIn button that angular component can pick up and then execute. reference article - "My road to a stable google sign in button with angular 8 and angular router". However with this method the login button is still visable on every component.

I am now using package for angular angularx-social-login which is working for me.

[karankapoor]

if we want user to logout then how we will do ?