Angular & Google Login OAuth2 / OpenID Connect - Using the angular-oauth2-oidc Library

Google has deprecated their Google Sign-In JavaScript client library. An angular google authentication can be implemented using Googles OAuth2 / OpenID Connect System. For that we use the anuglar-oauth2-oidc library, which is compatible will any authorization provider, which supports these standard protocols. The angular example application in video has full google login and logout supports and is accessing the GMail API to read E-Mails of a user.

(00:00) - Intro
(00:37) - Brief Introduction to OAuth2 and OpenID Connect (OIDC)
(02:01) - Create OAuth Client in Google Cloud Console
(04:47) - Enable GMail API in Google Cloud Console
(06:07) - Configure angular-oauth2-oidc for Google Login
(09:33) - Initialize Login
(11:17) - Load User Profile
(11:46) - Try out Google Login
(15:24) - Configure Logout
(16:43) - Single Sign-On
(17:46) - Integrate GMail API
(22:46) - Outro

[flqkqpn]

Thank you, I struggled whole day, but then found your video and it works for me!

[unicornfinance]

Danke super Ergänzung zum keycloak Video. Vielen Dank für deine Mühe, große Hilfe für mich!

[laassiliawissal]

it works :) Beautiful and Clean Explanation, Thank you

[siriuseneegy]

great work, expecting more content from you!

[kirole]

Great tutorial ! thanks, it worked flawlessly for me. Angular & google <- great stuff.

[cristiancamiloagudelo]

I solved the image problem when loading for the first time with crossorigin="anonymous"> this way <img [src]="user.avatar" crossorigin="anonymous">

Thanks video, very useful

[NiklasF]

Good video! Thanks for your explanation.

[Somerandomdudefromtheinternet]

Hey, very useful resource, I coudn't find a way to implement google signin anywhere else. Any idea on how to solve a 403: Invalid API key? Where are we supposed to put the API key in the config?

[sagarjindani]

I have followed this tutorial and made a demo project got my mails. But i tried to actually do the same for my actual project with backend and stuff. It is showing cors error. Request Header field authorization is not allowed in the access control request header

[evgeniusEmelin]

The image issue is because you are trying to load the image from non https page but the image itself is https. You can see the error message in the console messages

[santhoshkumarviswanathan]

hi bro, i have error of "popup was closed by user", when open google sdk login, after submitting user credentials it shows one moment please, it closes automatically and the error appears

[metallica]

Can you create tutorial where the login will work on button click inside a seperate component.

[jerryf]

does this video show how to get a new access token when it expires?

[momedalhouma]

is it possible to make an angular spring oauth2 example ? I don't see a lot of content on youtube about that. Thanks again

[gauravjain]

Here I have a problem comming after successful open-id api call there is one cert api call which gives me forbidden (403 ) ? Can anyone help me out of this ?

[vikaskyatannawar]

The single sign in doesn't work on the angular app though. ie say If I logout from youtube/google it doesn't logout from the angular app when refreshing. Can also test by running two angular servers with same google login(difffernet redirectURI added). For both login and logout they don't share the session it seems or they can't identiy each other lik how youtube and gmail do.

[pachathanni]

How to open google drive(include drive UI) in popup

[saikrishnan]

Hi Thanks for the video. For some reason, 'tryLoginImplicitFlow' is always returning false, which results in 'hasValidAccessToken' false and it goes in a loop. Any clue why this is happening. As per chrome I am in a logged in state.

[irajeshtailor]

Will it work with the consent
screen for gmail

[anton]

hm, i get response from google in url