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

Подписаться 3,6 тыс.

Просмотров 20 тыс.

50% 1

How To Add Google Sign In With Angular
Adding Google Sign In to your application brings so many benefits. You get to add the trusted logo of one of the biggest tech companies in the world to your application. It also brings all the security and convenience users already to know to an application that might be new to them. Today we will be adding to a Angular 14 application the ability to create the Google Sign In button as well as Sign in with it. We will then merge the information Google gives us to hit our API and return a JWT to complete the circle and authenticate a user. If you find the video useful please consider dropping a like and subscribing to the channel.
JWT Auth Playlist: • JWT Authentication & A...
Github Client Code For This Video: github.com/israelquiroz93/JWT...
Github Project Code: github.com/israelquiroz93/JWT...
Link To Sign In With Google Documentation: developers.google.com/identit...
Support Me On Patreon: / israelquiroz
Follow Me On TikTok: www.tiktok.com/@israelquiroz9...
All My Links Here: linktr.ee/israelquiroz
#GoogleSignInWithAngular #Angular #GoogleLoginButtonInAngular
TimeStamps
----------------------------
00:00 Intro
00:53 Creating The UI In Angular
16:00 Testing The UI
17:47 Registering Your App In The Google Cloud
22:36 Testing UI WIth Google Client ID
23:34 Adding The Google Authentication In Our .Net API
30:43 Testing The Full Google Sign In With Client & API

Наука

Опубликовано:

27 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 144

@Sinaiii Год назад

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

@IsraelQuiroz Год назад

Thank u! :)

@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! 😊👍

@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 😊

@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

@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!!!

@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!

@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!

@peterabouabsi8427 Год назад

Amazing dude. Great and helpful video!!!

@IsraelQuiroz Год назад

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

@krzysztofwinnicki551 9 месяцев назад

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

@IsraelQuiroz 9 месяцев назад

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

@tamaspeli9016 Месяц назад

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

@IsraelQuiroz Месяц назад

Your Welcome! i know the docs suck haha

@jean-philippeleclerc5055 Год назад

Wow thanks! Very helpful😄

@IsraelQuiroz Год назад

your welcome! :) im glad it helped!

@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 :)

@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 :)

@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

@salvatoregesualdo9940 Год назад

Thank a lot. Made my day

@IsraelQuiroz Год назад

My pleasure 😊

@sagarharkut6408 Год назад

Thanks a lot buddy!!!

@IsraelQuiroz Год назад

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

@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 5 месяцев назад

Cool Lecture and demo .

@IsraelQuiroz 5 месяцев назад

Your welcome! :)

@alexandruvilcu217 Год назад

great job!

@IsraelQuiroz Год назад

Thanks for the compliment!

@Xm0On Год назад

excellent vid man

@IsraelQuiroz Год назад

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

@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

@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 2 месяца назад

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

@ibrahimakhalilougueye4854 11 месяцев назад

you are the best brother ❤❤❤❤❤❤

@IsraelQuiroz 11 месяцев назад

no problem my guy :)

@ZiaulHaqOfficial-786 10 месяцев назад

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

@IsraelQuiroz 10 месяцев назад

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 10 месяцев назад

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

@GiorgiChikovani_FromGeorgia 6 месяцев назад

Thanks brother helped a lot

@IsraelQuiroz 6 месяцев назад

your welcome! :)

@mukeshn1746 Год назад

thank you so much😁

@IsraelQuiroz Год назад

Your welcome! :)

@hamidrezafarhadnia3571 2 месяца назад

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

@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

@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!

@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

@jayakumar2927 7 месяцев назад

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?

@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 :)

@nonamezz20 7 месяцев назад

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

@sjsurya7413 Год назад

where you have created interceptor

@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

@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

@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!

@user-li8nc5ml1s Год назад

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?

@user-li8nc5ml1s Год назад

@@IsraelQuiroz I’ll try learn from your video

@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

@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

@HyrskiyGames 2 месяца назад

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

@IsraelQuiroz 2 месяца назад

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

@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 29 дней назад

@@IsraelQuiroz Just became a member!

@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

@IsraelQuiroz Год назад

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

@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

@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 Год назад

@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

@isuckatthisgame Год назад

Are these deprecated?

@IsraelQuiroz Год назад

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

@user-st1gj3si7x Год назад

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

@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 😊

@martind.6245 5 месяцев назад

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 5 месяцев назад

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 5 месяцев назад

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

@IsraelQuiroz 5 месяцев назад

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 Год назад

@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!

@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