How To Add Google Sign In With Angular CORRECTLY! | 2023 Full Tutorial With Angular 14 .Net 6 App

[@BurnedPro]

Big thanks man, what a luck that i get to your channel.

[@IsraelQuiroz]

Your welcome dude! happy to have helped and for u stopping by!

[@souviksarkar4111]

It helped me a lot . I was stuck on one of my projects. cheers.

[@IsraelQuiroz]

I love hearing that 😊 I'm glad I could help out! I totally understand, this video took me longer than usual to make because of the lack of resources on it and how tricky it is, so I get ya but I'm glad it helped!!!

[@BraydenGirard]

Great video that fills a gap in Googles Docs. As of the end of this month old method of authentication will no longer work and googles documentation overcomplicates how simple it is to update. This video was excellent for showing how this can be done, even for an existing older Angular app! Thanks a bunch.

[@IsraelQuiroz]

Appreciate the love Brayden!!! 🫶 It took me about two weeks of work to make this video cuz I agree the Google doc is VERY LIMITED so I'm happy u guys find the value in it and can slap it into your Angular projects! And I wanna make sure u guys have the latest and greatest!

[@IcedCupcakes]

OMG thank you so much for this! I realized too that all of the tutorials use angular social login and i was looking for one that doesnt and i finally found this! Thanks! You got a new subscriber!

[@IsraelQuiroz]

Aw your welcome glad I could help someone running into the same issues I was! And welcome to the channel! 😊👍

[@joseluisjimenez2672]

I agree, this is the best way to use the new google sign in. Thanks for the video. Greetings from Cuba.

[@IsraelQuiroz]

Saludos!! :) and thank you for the comment and good vibes! i appreciate it, i worked hard to make sure it works haha

[@tamaspeli9016]

This helped clear my mind out of documentation hell. Thank you!

[@IsraelQuiroz]

Your Welcome! i know the docs suck haha

[@krzysztofwinnicki551]

Thanks a lot! You saved my life :) Great tutorial with clear explanation

[@IsraelQuiroz]

Im so happy i could help you! i know how annoying the button is so im glad u loved it!

[@peterabouabsi8427]

Amazing dude. Great and helpful video!!!

[@IsraelQuiroz]

Thank u so much!!! Happy I could help!

[@ZiaulHaqOfficial-786]

Great video, you really solved big problem, best wishes for you and your channel and please keep it up

[@IsraelQuiroz]

Thank you! that google login video, boy did this video take me a long time but i knew i was definitely not the only one struggling with this :) so im happy u and many others have found value in it! hope to see u other places on the channel!

[@ZiaulHaqOfficial-786]

@@IsraelQuiroz I was struggling to implement it for one of client but now after watching your video. I rocked it. All credit goes to you.

[@tommy--k]

Thanks much Israel great video! I am using a Django backend, and this worked great.

[@IsraelQuiroz]

your welcome! thank u for the support and comment im happy that my frontend portion was able to help you with your django backend!

[@IsraelQuiroz]

Will you guys be adding the Google Sign In to your next Angular App? Why or Why Not?

[@cynthianwakaeme2331]

Thank you so much, Google docs didn't do justice to this as you. Great tutorial 🥳

[@IsraelQuiroz]

Thank you so much how sweet of you to say!!! BUT I AGREE the google documentation is not good enough so i'm happy i can help you guys out :)

[@Sinaiii]

Dropped a like for the nice tutorial, keep it up!

[@IsraelQuiroz]

Thank u! :)

[@danylobozhagora1551]

Honestly how tf isn't it this video promoted to the first page of google when you are looking for the damn thing. thank you so much brother

[@IsraelQuiroz]

i heard if people like u keep commenting and liking the video it will be soon :) thank u so much!

[@binhhoang2112]

Your videos are always close and practicable, keep up the good work buddy

[@IsraelQuiroz]

Aww thank u so much I'm happy to hear that 😊

[@lodebosmans8957]

Great tutorial. You deserve the acknowledgement for it. I was struggling very hard to set this google login up with Google Identity. So thanks a lot!

[@IsraelQuiroz]

i appreciate the comment so much, made my night! i worked really hard on that video and i understand the struggle because it was a huge struggle to do it too haha before me nothing really worked like i needed it so im happy i could help u!

[@lodebosmans8957]

@@IsraelQuiroz As I am going further with my application, I need to adjust the code. I am a bit puzzled why the entire setup needs to check passwords? Isn't it the goal of OAuth2.0 that I do not need to worry about passwords (that is for google)? I just want to receive a token and compare it to the tokens in my database. Or what am I missing here?

[@IsraelQuiroz]

@@lodebosmans8957 the person in your application still needs an account, otherwise whether when they sign in with gooogle you create there account then or when they sign up, they need an account otherwise how do u sign someone in if they dont exist

[@GrassXMagnum]

I am working on a new (rewritten) Angular app with a legacy backend, and the old app was setting the redirectUri as a Handler (ashx) in the backend, which would then send some JS back to the client, telling it to close the popup and start using the API. It works, but as I see here, callback to backend is not necessary at all and should actually callback to frontend first, then validate access_token using backend API & set token in cache. Anyway, thanks for this, your vid saved me a lot of head scratching today!

[@IsraelQuiroz]

Your welcome! im happy u found it helpful! and there are a few ways to handle the google part of it, i just like the way i did it in the video since it gives me more control of every step

[@avg_user-ty2eg]

thanks man , this was very helpful , i've been trying for days to get it to work using different libraries that most of them can't even work on angular 15

[@IsraelQuiroz]

love to hear that! happy i could help out! and i totally get that, ide always rather use the official SDK from the company than a third party library that has to keep up, that was my focus when making it and im glad its what u needed

[@avg_user-ty2eg]

@@IsraelQuiroz Keep it up man

[@erndidi]

Has anyone had an issue with the import for typescript? I added "typeRoots": ["node_modules/@types"] to my tsconfig, added a d.ts file to declare the google-one-tap module, but I still can't get it imported.

[@yaredalmaw6644]

Cool Lecture and demo .

[@IsraelQuiroz]

Your welcome! :)

[@ibrahimakhalilougueye4854]

you are the best brother ❤❤❤❤❤❤

[@IsraelQuiroz]

no problem my guy :)

[@GiorgiChikovani_FromGeorgia]

Thanks brother helped a lot

[@IsraelQuiroz]

your welcome! :)

[@ifor3on640]

very great video i am using this way in my app right now and i have one question how to get more information from google when requesting from angular where to put the scope i want to get gender and birthday for example

[@IsraelQuiroz]

i believe you have to add the scopes in the google login popup, for the information google sends back since the user has to consent to it, so for some assistance i found some links that should help you out stackoverflow.com/questions/16501895/how-do-i-get-user-profile-using-google-access-token developers.google.com/identity/openid-connect/openid-connect#obtainuserinfo Hope these help!

[@godriusRJ]

Just fantastic! Thank you very much for sharing.

[@IsraelQuiroz]

Your welcome Rodrigo! :) I appreciate the love and support

[@godriusRJ]

@@IsraelQuiroz man, it really helped a lot! Regards direct from Brazil

[@IsraelQuiroz]

Muito Obrigado :)

[@jean-philippeleclerc5055]

Wow thanks! Very helpful😄

[@IsraelQuiroz]

your welcome! :) im glad it helped!

[@Xm0On]

excellent vid man

[@IsraelQuiroz]

I appreciate the support! thank u! hope to see u on the channel again soon!

[@salvatoregesualdo9940]

Thank a lot. Made my day

[@IsraelQuiroz]

My pleasure 😊

[@hamidrezafarhadnia3571]

Hello, thank you for the great training you had. The project link is not available!!! Please fix it

[@TolgaKoseoglu]

Great video! Exactly what I was looking for. Do you have another video using a different external authentication provider? Maybe Facebook or Microsoft?

[@IsraelQuiroz]

Appreciate it! and no i do not have anything for signing in with those other two but def they are future video idea

[@חןנעם]

Hi Israel, I’ve an old angular 1.5 that I need to add the login button, can you guide me?, or send me a link for the appropriate video

[@IsraelQuiroz]

you should probably work first on trying to update it to a more modern version of angular before doing it but if u cant my video should be a solid guide but your implementation will be different, there isnt much of any help on doing this for angular im sorry about that what do u see thats different or from my video that doesnt work?

[@חןנעם]

@@IsraelQuiroz I’ll try learn from your video

[@peterrosser1217]

Great video! By the way, your ClientId is not secret, but the ClientSecret is. In future videos, you may want to redact the ClientSecret instead of the ClientId. :)

[@IsraelQuiroz]

appreciate the compliment :)

[@regimelesmoras7805]

nice tutorial bro, can you teach me how to customize the css of the google sign in button?

[@IsraelQuiroz]

you get that code from google so its something you would have to investigate there because Google does not give you many customizations to the button its pretty standard for obvious reasons

[@regimelesmoras7805]

@@IsraelQuiroz oh i see i just want like the icon single word "G" ahaha but whenever I try to have css its not woking XD any thanks, new subscriber here ehehhe

[@nonamezz20]

Can you make a tutorial with sso saml and Microsoft entraId? One login and access to multiple apps ?

[@sagarharkut6408]

Thanks a lot buddy!!!

[@IsraelQuiroz]

no problem! :) happy to hear u found the video useful, have a great day!

[@kake1829]

Great video!! I see that the github repos are no longer available, is that intentional?

[@IsraelQuiroz]

I appreciate that!! :) And yeah they are members only now!

[@kake1829]

@@IsraelQuiroz Just became a member!

[@JustPlainRob]

When you use the login_uri response the return values from Google are passed as URL query parameters to your specified endpoint. Google's api is a modified OAuth2 flow.

[@vikaskyatannawar8417]

Is it single sign in? i.e. if I run two such apps logging in or logging out effects the other app too?

[@georgeblazhev]

That's a great video! Could this be implemented using oidc library for Angular instead of the Google js library? Thank you

[@IsraelQuiroz]

appreciate it! and i am not sure if it would or not

[@HyrskiyGames]

Holly god why is it not on the fuking tutorials, this is so simple, thanks you alot, where did you find it?

[@IsraelQuiroz]

Your welcome!!!! :) And it doesn't exist anywhere literally as far as I know haha I had to figure out the solution on my own! It took me like 1 week

[@samadbouss8842]

excellent tutorial.I really appreciate your time and dedication. Keep up the good work

[@IsraelQuiroz]

Thank you so much for the compliment :) i really appreciate the feedback, have an awesome day!

[@samadbouss8842]

@@IsraelQuiroz by the way the window.onload() method inside the onInit() is redondant. I spent quite some time to figure out why when I navigate to the login path the signIn button doesn't come up but it would when I refresh the page. That's basically because whenever you navigate to the login component the window.onload is never triggerd but it is when we refresh the page. All I had to do was to remove the window.onlad and let the onInit do its job.🤖

[@IsraelQuiroz]

oh thank you so much for catching that and explaining! i appreciate it :)

[@samadbouss8842]

@@IsraelQuiroz you're welcome 😊

[@alexandruvilcu217]

great job!

[@IsraelQuiroz]

Thanks for the compliment!

[@aymanmihidine210]

As far as i know placing any key like the client id in the front end is not safe and can be accessed by clients. What should we do in this case ?

[@IsraelQuiroz]

Check out my video on Https only cookies! :) kzbin.info/www/bejne/iIDKYqNmir9_Zq8si=IAHQ-CUyeNmgYrp0

[@pvinayak96]

Pop up window exposes client id in the url though we protect it in the frontend @22:57. I dont think it would be a concern.

[@IsraelQuiroz]

as long as its not your secret it doesnt matter

[@mukeshn1746]

thank you so much😁

[@IsraelQuiroz]

Your welcome! :)

[@umeshshelke725]

click on google signin button and then navigate to logout page or any other page and then again come back to login page . there is bug and bug is "google signin button is not displaying"

[@matheusjoveliano]

I am having the same problem :(

[@umeshshelke725]

@@matheusjoveliano window.reload() resolve my issue

[@IsraelQuiroz]

i pushed a few updates to the gitRepo for that video just now, but i am not seeing that error, my google button on my app when i click log out correctly clears the refresh token/jwt and doesnt throw any errors, make sure u have all the code correct on the logout method

[@IsraelQuiroz]

i pushed a few updates to the gitRepo for that video just now, but i am not seeing that error, my google button on my app when i click log out correctly clears the refresh token/jwt and doesnt throw any errors, make sure u have all the code correct on the logout method

[@umeshshelke725]

@@IsraelQuiroz don't do logout just normally navigate back or from another page navigate to login page without doing logout..you will see that error

[@jayakumar2927]

It is global any gmail user can able to login otherwise who need to login in this application we need to configure their cliend id and secret keys?

[@sjsurya7413]

where you have created interceptor

[@anupamdutta4551]

above github source code links are not working. It is showing PAGE NOT FOUND .Could you please share source code github link

[@IsraelQuiroz]

All GitHub repos are members only now $3 to join

[@MrKillerPT0]

Shouldnt we compare the google password with the password saved in your "database" when loggin in? For security reasons

[@IsraelQuiroz]

i dont think u need to because google is doing the checking for u, we are offloading the responsibility of signing in on google, that account while in the db it would get treated as a seperate account compared to let's say if we built a traditional account that isn't google, think of many websites these days, u can either sign in with google or with them and they get treated as two different accounts when u sign in with google its offloading the responsibility to google, i dont think u need to but its your call if u want to

[@nitishsujeebun6724]

I have a node.js backend. Any help with this please?

[@IsraelQuiroz]

they should have the equivalent code as my c# backend for node.js i just dont have that im sorry, u should be able to find that code if it helps on my backend

[@onlylovelyvibes4467]

hey sir , i could not find the source code in the video's description

[@IsraelQuiroz]

code is now exclusive to members, become a member and you get access to the repo

[@mukeshn1746]

I am getting this error "JWT contains untrusted 'aud' claim".

[@IsraelQuiroz]

Did you fix this issue?

[@patrickhume5899]

i got this too but worked out that i hadnt set GoogleClientId in the .NET project, soon as i did it resolved that issue

[@yop6356]

Your github repo is deleted ?

[@IsraelQuiroz]

It's channel members only :) let me know if u sign up!

[@isuckatthisgame]

Are these deprecated?

[@IsraelQuiroz]

No this is the one that works 😁🤙🏼 I show which package is the one that is being deprecated

[@МаксимЛеонтьэв]

Hey Israel,thanks a lot for this video.That's really helpful. Like and Subsribtion from me :)

[@IsraelQuiroz]

Of course! happy to hear it helped you out! Welcome to the family :)

[@walektine]

volume pretty low (( dislike

[@IsraelQuiroz]

lol turn the volume up problem solved

[@martind.6245]

I am using Angular 17.1.2 and there seems to be a problem with the localhost apiUrl and private path = environment.apiUrl. The error [TS2339] says the Property 'apiUrl' does not exist on type '{}'. [plugin-angular-compiler]

[@martind.6245]

after replacing environment.apiUrl with localhost:7274/, now I get [ERROR] TS2304: Cannot find name 'expect'. [plugin angular-compiler] src/app/services/auth.service.spec.ts:14:4: 14 │ expect(service).toBeTruthy();

[@martind.6245]

After adding "jasmine" to types in tsconfig.app.json the errors ceased, but now there is no Google login button anywhere.

[@IsraelQuiroz]

Did you create your environment file with property apiurl that is the localhost path to your apil?

[@geraldbustos]

.bind(this) was key for me! i didnt know that

[@IsraelQuiroz]

:)

[@patrickhume5899]

i was getting "This browser or app may not be secure" in the google sign in pop up so i had to run chrom like so ".\chrome.exe --remote-debugging-port=4200"

[@IsraelQuiroz]

Thank you for the comment and giving a short solution since i did not run into that

[@PeterZach]

Thanks, this helped me a bunch! I experienced an issue when navigating from a different in-app page to login because (hypothesis) window.onGoogleLibraryLoad() has already fired and isn't going to fire again on navigation.

[@IsraelQuiroz]

that seems to make sense, ideally i guess u wouldnt want go back there or make it an option while u are signed in but anyways haha im glad the video helped!

[@PeterZach]

It’s an issue when you are navigating from the registration page or home page to login. The button won’t show. I don’t have a workaround yet. Regardless, great video! I’ll def give it an upvote.

[@PeterZach]

I'm just posting here in case this helps someone in the future. My workaround is to run the google script at the component level instead of in index.html. This ensures that window.onGoogleLibraryLoad() is fired when entering the login view. I don't think there are any downsides to doing this but it seems to work. Oh, Angular... import { ElementRef } from '@angular/core'; constructor( private elementRef: ElementRef ) { } ngAfterViewInit() { var s = document.createElement("script"); s.type = "text/javascript"; s.src = "accounts.google.com/gsi/client"; this.elementRef.nativeElement.appendChild(s); }

[@IsraelQuiroz]

Thank you so much for posting this! i appreciate it alot!

[@macbookHuhu]

@@PeterZach saved me thanks!