How to add Google Sign In using Capacitor to your Ionic App

  Рет қаралды 31,321

Simon Grimm

Simon Grimm

Күн бұрын

In this video we will implement the Google Sign in dialog for Android, iOS and even on the web using Capacitor!
🔥 Learn Ionic faster with the Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic.com/
🎉 Get my Practical Ionic Book: devdactic.com/practical-ionic/
#############################
👨‍💻 Want to read instead of watch?
Here's the full Ionic tutorial: ionicacademy.com/google-sign-...
😱 NEW: Capacitor Crash Course!
ionicacademy.com/capacitor-cr...
⚡️Take my famous 7 Day Ionic Crash Course
ionicacademy.com/ionic-crash-...
🤷‍♂️Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
Or join our Facebook group:
/ simonics
#############################
00:00 Intro
01:34 Google Sign in for the web
11:42 iOS configuration
15:12 Android configuration
23:15 Outro
#capacitor #ionic #oauth

Пікірлер: 129
@joep-ddq
@joep-ddq Жыл бұрын
Again a life saver! Thanks Simon! Adding an OAuth android key in the GCloud console with SHA-1 key is the key (no pun intended). Without it, you only get the vague error 10 something went wrong message.
@MakeAppswithDanny
@MakeAppswithDanny 9 ай бұрын
Thanks Simon. I've been implementing Google Auth for a Quasar app (Capacitor for iOS & Android, Electron for Mac & Windows) and this video has helped massively for the Capacitor part 👍
@galaxies_dev
@galaxies_dev 9 ай бұрын
Glad it helped!
@NicClaassen
@NicClaassen Жыл бұрын
Simon, you rock. The Android integration was driving me crazy and in the end it was because I was using the android client id on android instead of the web client id...thanks!
@galaxies_dev
@galaxies_dev Жыл бұрын
Awesome, glad I could help Nic!
@Luis-ue9ut
@Luis-ue9ut 7 ай бұрын
Bro, thanks!!! 22:05 I felt the same reliefe when it worked on android I was trying to login with google for 2 days, and your video really help me!!
@codeperhour9567
@codeperhour9567 2 жыл бұрын
Hello simon, I really appreciate the work you are putting in to build this community 👍 But I really wish you could revise some of your videos and post on the blog. Some don't work any more and new devs like my self only end up in alot of frustration trying to follow along. Thank you
@galaxies_dev
@galaxies_dev 2 жыл бұрын
Sure I'm trying to create updated versions - could you let me know a list of topics that you think need an updated version? Thanks!
@HackHeyner
@HackHeyner 2 жыл бұрын
HUAHUAH At this very moment I was implementing an app according to your previous video about Google Signin with capacitor. And you present us with an updated version?!
@galaxies_dev
@galaxies_dev 2 жыл бұрын
Haha looks like my predictions were correct again 😎
@pierrechevalet8284
@pierrechevalet8284 5 ай бұрын
Thanks a lot!!! The part about investigating Android with chrome inspect is a great tip
@Superluj00
@Superluj00 4 ай бұрын
Simon, your videos always helps me, thanks a lot 😃
@galaxies_dev
@galaxies_dev 4 ай бұрын
My pleasure!
@nakshi_ashik9181
@nakshi_ashik9181 Жыл бұрын
Man i finally got it to work! you miss one little detail and the whole process is botched, then it's just better to start over than try to fix anything! Thanks for the tutorial.
@galaxies_dev
@galaxies_dev Жыл бұрын
Yeah it's definitely challenging :D Glad it finally works Amin!
@sajankhandelwal8570
@sajankhandelwal8570 11 ай бұрын
Thanks a lot.. may god bless you.. was trying for the entire week.. finally saved
@galaxies_dev
@galaxies_dev 11 ай бұрын
Welcome 👍
@Miodrag0204
@Miodrag0204 2 жыл бұрын
Nice video! Thanks!
@DavidSosaMoriana
@DavidSosaMoriana 28 күн бұрын
thank so much. I didnt found anything about the web key, only you said this, you save me
@RuturajPatki
@RuturajPatki 2 жыл бұрын
Background music for intro part is a nice addition.
@IceBreakerGamer
@IceBreakerGamer 2 жыл бұрын
You have no idea how helpful this was...
@galaxies_dev
@galaxies_dev 2 жыл бұрын
Super happy to help!
@danielramirez0318
@danielramirez0318 2 жыл бұрын
thank you simon, it helped me to implement it in android and ios
@galaxies_dev
@galaxies_dev Жыл бұрын
Happy to hear Daniel!
@gastonduault2060
@gastonduault2060 29 күн бұрын
I'm not used to comment video, but really you help me so much thank you so much
@galaxies_dev
@galaxies_dev 26 күн бұрын
Happy to help!
@abdallamaro
@abdallamaro 2 жыл бұрын
Thank you Simon for the comprehensive demo. I have been facing the following error: The Login Popup disappears with no further information once I select an account. This fails on an Android device but works well on the web. Kindly guide
@mmarcoscolombo
@mmarcoscolombo Жыл бұрын
Thanks Simon!
@antoineblanquet5508
@antoineblanquet5508 9 ай бұрын
Thanks you for this tutorial, I was stuck in a situation where my google auth worked on web but not on my natives apps. I wasn't using the plugin. I was wondering if by using Deeplink we doesn't need to create a android and ios clients OAuth 2.0 and only use the web OAuth 2.0 client ? Or the ios and android oauth clients are mandatory in any case? Aniway, thanks for explanations, i'll try the to use this plugin in my application and see if it's easier.
@CableBoiiz69
@CableBoiiz69 Жыл бұрын
Hi Simon! Awesome videos, have really helped me out. I'm having the same issue you briefly had around the 15:00 mark. I authenticate with Google, select my account successfully, and hit a navigateByUrl block in Angular code. This should navigate the user to my authenticated page, but it just sits there (no errors)! I saw that happened to you too but you quickly fixed it. Can you elaborate a bit more on how that was resolved? Thanks!
@robertcapa1233
@robertcapa1233 4 ай бұрын
Great man!
@ThePokepuppets
@ThePokepuppets Жыл бұрын
in ios it returns you serverAuthCode in null? The json that it returns is not displayed correctly in the video and I have this detail where it works on both platforms but on ios it returns null serverAuthCode while on android it brings the value
@maulanatriharja8756
@maulanatriharja8756 Жыл бұрын
I got an error : {"message":"Something went wrong","code":"10"} any video how to fix it ?
@mehedihasansony
@mehedihasansony Жыл бұрын
same error. any slotion yet?
@manufdez3375
@manufdez3375 Жыл бұрын
same here, any solution?
@lAstralz
@lAstralz Жыл бұрын
same error =(
@SiphiweGwebu
@SiphiweGwebu 3 ай бұрын
Just ran into this error myself. Anybody managed to get around it? Maybe @galaxies_dev?
@nasilemak3948
@nasilemak3948 2 жыл бұрын
hi Simon. I have followed the tutorial in your video. but I have occurred an error "export 'registerPlugin' was not found in '@capacitor/core'. can u please help me
@artushalexanyan527
@artushalexanyan527 4 ай бұрын
Wery helpful, thank you!
@galaxies_dev
@galaxies_dev 4 ай бұрын
You're welcome!
@shivanshsubnani3383
@shivanshsubnani3383 2 жыл бұрын
Hi Simon , can you help me setting up google sign with ionic cordova app ?
@IsraelSistemas
@IsraelSistemas 2 жыл бұрын
it's missing a video about how to add Adds to our capacitor application :( ,...how ever, your videos are awesome :)
@galaxies_dev
@galaxies_dev 2 жыл бұрын
I'll try to work on something about AdMob!
@user-dc6xc5lq6j
@user-dc6xc5lq6j Ай бұрын
Thank u so much
@azeemjoseph3946
@azeemjoseph3946 10 ай бұрын
Thanks a lot Simon GOD bless you Sir ,
@galaxies_dev
@galaxies_dev 10 ай бұрын
Thank you mate 🙌
@emmanuela7404
@emmanuela7404 Жыл бұрын
Thanks for the tutorial! It was really helpful! However I have one issue on Android, I can login with Google (and get access/id token) but I can't get the refresh token even if I set grantOfflineAccess true. Do you know how to solve that issue?
@hernelio1
@hernelio1 2 жыл бұрын
Thank You
@galaxies_dev
@galaxies_dev 2 жыл бұрын
Welcome!
@wilsonhernandezortiz2472
@wilsonhernandezortiz2472 4 ай бұрын
Great!
@kartiksolanki9655
@kartiksolanki9655 2 жыл бұрын
Hey Simon, Any plans on releasing video tutorial to utilize "enterKeyHint" in angular forms with event binding for 'next' to move to next form field and 'go' to submit the form?
@galaxies_dev
@galaxies_dev 2 жыл бұрын
Yeah I might look into that!
@marekdrabik295
@marekdrabik295 8 ай бұрын
Thank you.
@galaxies_dev
@galaxies_dev 8 ай бұрын
Thank you so much!
@Adidumas1
@Adidumas1 8 ай бұрын
Hello Simion. Thank you for the tutorial, but I am having a problem. I followed all the stepts and my ionic angular google sign in is working perfectly in the browser, but when I test it on my android phone this is what I get: 1). I click on the google sign in button 2). I get redirected to the google window where I choose my account 3). I click on my account and then the screen with the "One moment please...." with the loading appears 4). It is stuck forever in that "loading" state. Any ideea? Because I have been working on this non stop for the last 2 days and I ran completly out of ideeas. Thank you
@pedroshift
@pedroshift 27 күн бұрын
Hi Simon, thanks a lot for this video... it really helped me to understand the process! I am facing a problem only when sending it to PlayStore... I generated the signed APK using production fingerprint, and it runs smoothly on my device, but when generating the App bundle (.aab) using exactly same production fingerprint and sending it to PlayStore, my google login does not work anymore! :( any ideas?
@GeniusCoding
@GeniusCoding Жыл бұрын
When I follow this, it works, but in the dev tools, I get a warning saying that I need to migrate to the new libraries, because the old libraries are soon to be deprecated. Their migration guide is so confusing to me... you don't by chance have an updated one of this that uses the new libraries do you?
@kamalessafi4362
@kamalessafi4362 2 жыл бұрын
I highly appreciate your efforts to make another ionic google auth video (y) . However , the refresh doesn't seem to work on android :/ whereas it does work in the web version , how do you refresh expired tokens on android ? I happen to have an error of this sort "I don't know how to refresh token on Android"
@abdallamaro
@abdallamaro 2 жыл бұрын
Did you get any solution? Same error here
@g-luu
@g-luu 2 жыл бұрын
Hi Simon, im interested in your built with ionic book, do you support parity purchasing power pricing?
@galaxies_dev
@galaxies_dev 2 жыл бұрын
Apparently there is no option available for this on the platform I'm using to sell it :(
@KeerthiRajan-lj2tz
@KeerthiRajan-lj2tz Ай бұрын
I use the Android Google Auth method the pop should opened and fetch all Google account from my device. when i click a particular account for fetch the credentials it throw error
@makjimenez5431
@makjimenez5431 Жыл бұрын
Good vídeo.
@galaxies_dev
@galaxies_dev Жыл бұрын
Thanks!
@emreaka3965
@emreaka3965 10 ай бұрын
Thank you, a lot.
@emreaka3965
@emreaka3965 10 ай бұрын
You're saving my day all the time. HAHAH :)
@galaxies_dev
@galaxies_dev 9 ай бұрын
You are welcome!
@pseudounknow5559
@pseudounknow5559 2 жыл бұрын
I am a complete beginner with Ionic but i was wondering if i can use the firebase stuff with GoogleSign in Ionic or is it not going to work ? (it works on a angular web app and i would like to keep my code)
@galaxies_dev
@galaxies_dev 2 жыл бұрын
Yes you should be fine to use it :)
@user-de5rd1od5n
@user-de5rd1od5n 6 ай бұрын
How do I open this login to access the logged in user's Google Calendar events?
@juergenriemer
@juergenriemer 2 жыл бұрын
Any Chance to avoid the first alert window asking to confirm before the Google signin is opened?
@galaxies_dev
@galaxies_dev 2 жыл бұрын
I don't think so, isn't this the default from google?
@KRXGroup
@KRXGroup Жыл бұрын
Does Capacitor offer google one touch authentication using Identity services for react apps on loading?
@galaxies_dev
@galaxies_dev Жыл бұрын
I haven't checked that one before.
@shrutikayewale7022
@shrutikayewale7022 Жыл бұрын
Hey Simon, do we have any solution for linkedin sign in with capacitor for ionic app?
@galaxies_dev
@galaxies_dev Жыл бұрын
I actually don't know - the previous Cordova plugin is not maintained anymore and I can't see anything about it.. Maybe I should give it a try.. Let me know if you make any progress on this!
@BongBrothersGaming
@BongBrothersGaming 11 ай бұрын
This code is not working with IONIC 7, can you plz check it
@chrislinesam3097
@chrislinesam3097 Жыл бұрын
Any solution for error code 12500?
@kevinpallado9638
@kevinpallado9638 2 жыл бұрын
Hi simon, I did follow all of the instruction from the package repo itself it works well in web but on android you can signIn but the return result data from signin keeps saying as something went wrong, do you have any idea for this?
@msosnowski8
@msosnowski8 2 жыл бұрын
In capacitor.config.ts add "APP" serverClientID, but in index.html and string.xml you must add "WEB" clientID not "APP"
@suebphatt
@suebphatt 2 жыл бұрын
@@msosnowski8 also done your method but no luck, pulling all my hair now 😅
@lalithanunna4099
@lalithanunna4099 Жыл бұрын
@@suebphatt were you able to resolve that issue?
@7full202
@7full202 12 күн бұрын
Hello, I have the same code but I get popup blocked by browser
@raf.nogueira
@raf.nogueira 22 күн бұрын
Works so beautiful in the browser but when running the android native app just doesn't work..
@carlossantana2436
@carlossantana2436 2 жыл бұрын
I am getting message: 'Something went wrong', code: '10' I follow all the tutorial, but i cant access on android, WEB & IOS works HELP!
@carlossantana2436
@carlossantana2436 2 жыл бұрын
SOLVED: The issue was with the SHA-1, when i run from the console the keytool i was getting different sign than the one from android studio>gradle>android>app>Tasks>android>signinReport. So i put the one from android studio and now is working.
@mehedihasansony
@mehedihasansony Жыл бұрын
The plugin does not work on Android anymore with new capacitor. web works fine without any issue. it will work on Web but will fail on Android - google login Access blocked: Authorization Error: 403, .. this app does not comply with googles secure browsers policy.
@JBuchmann
@JBuchmann Жыл бұрын
Did you figure out a fix for this yet? This is so frustrating. I guess until they fix it I'll be forced to use a regular "web" login for email/password. That works across both mobile and web. I'll be using the one that comes with Firebase UI
@chrissteiner1720
@chrissteiner1720 Жыл бұрын
Hi Simon, i know i am a little bit late, but can you help me with some problem. i am creating an PWA, so it 'should' work on web and also when it is saved to ios Springboard or Android. In my case i want to build it like an app, therefore it is possible, that the user closes the app and reopens three days later. Of cours i do not want to let him re-login. So i created an redirect url to my server with grant_type: 'authorization_code' and made the authorization and stored the refresh token encrypted in my redis db.. ( i did this direct to the google APIs without a google-login library) BUT when it came to testing on ios - saved to springboard - i got a huge problem with this popup for logging in and getting the id_token which was send from my server. so get a bit more concrete: do you know a way to login and get the refresh token (in best case direct to the server) or on client which sends it in a separate call to the server, without this popup, which does not really popup on an installed PWA? i want something like a modal or something that do not crash my application. have you seen something like this?
@galaxies_dev
@galaxies_dev Жыл бұрын
No I don't think I've seen a flow like that, I always use the traditional login and yours sounds a bit more complex I guess. Sorry that I don't have a tip for it :/
@chrissteiner1720
@chrissteiner1720 Жыл бұрын
@@galaxies_dev ok thanks.. then another question. Can you make a google login video with the new Google Identity Services Platform? I can not solve it to get an refresh token.
@msosnowski8
@msosnowski8 2 жыл бұрын
How to integrate this with firebase authentication?
@msosnowski8
@msosnowski8 2 жыл бұрын
Ok i have it.. signInWithCredential()
@HackHeyner
@HackHeyner 2 жыл бұрын
Keep getting an error on Android: "Something went wrong" Incredibly useful [insert meme 'you don't say'] Google?!
@galaxies_dev
@galaxies_dev 2 жыл бұрын
Is there some specific error code? Because yeah that message won't help :D
@HackHeyner
@HackHeyner 2 жыл бұрын
@@galaxies_dev The Master himself answering my comment! 🤩 hauhau But no. Not a single line. 😓 I manage to signin on browser though. Trying to access the app specific folder on Google Drive. Would you have any material on this matter? I'm on this for weeks. Still not managed to work... 😭 Thank you for the amazingly awesome material you make. REAL life saver!! o/
@msosnowski8
@msosnowski8 2 жыл бұрын
Same problem "Something went wrong"
@msosnowski8
@msosnowski8 2 жыл бұрын
SOLVED! in capacitor.config.ts add "APP" serverClientID, but in index.html and string.xml you must add "WEB" clientID not "APP"
@TheSaceone
@TheSaceone 2 жыл бұрын
Man, I got stressed by watching the whole process even though you showed the working version. I can't imagine how much you struggled while figuring everything out...
@galaxies_dev
@galaxies_dev 2 жыл бұрын
Haha yeah these things are really PITA, especially if they don't work in the end and you need to find the issue in one of the 10 steps..
@rustervod7453
@rustervod7453 5 ай бұрын
Am I the only one who's gets a runtime error on the 'R' class ?
@cryptogiorgi
@cryptogiorgi 2 жыл бұрын
Hey SImon thanks for all of your videos and help ! i would like to ask you a question maybe you can help me... i am getting this error on the terminal when i run it... Error: node_modules/@capacitor/core/types/definitions-internal.d.ts:16:18 - error TS2430: Interface 'CapacitorInstance' incorrectly extends interface 'CapacitorGlobal'. [ng] Types of property 'Plugins' are incompatible. [ng] Property 'GoogleAuth' is missing in type '{ [pluginName: string]: { [prop: string]: any; }; }' but required in type 'PluginRegistry'. [ng] [ng] 16 export interface CapacitorInstance extends CapacitorGlobal { [ng] ~~~~~~~~~~~~~~~~~ [ng] [ng] node_modules/@codetrix-studio/capacitor-google-auth/dist/esm/definitions.d.ts:4:9 [ng] 4 GoogleAuth: GoogleAuthPlugin; [ng] ~~~~~~~~~~ [ng] 'GoogleAuth' is declared here. [ng] i dont understand as it seems how the capacitor.config.json or ts work towards this mission... and i am trying to troubleshoot but i cant figure it out... my config.json file is this { "appId": "com.example.app", "appName": "GuestApp", "webDir": "www", "bundledWebRuntime": false, "plugins": { "GoogleAuthWeb": { "scopes": ["profile","email"], "serverClientId": "610384633692-um9036456eubk8kplvgkrrdgv27tu28h.apps.googleusercontent.com", "forceCodeForRefreshToken": true } } }
@cryptogiorgi
@cryptogiorgi 2 жыл бұрын
i tried everything at the GoogleAuth attribute of the plugins... i tried GoogleAuth , googleAuth, even the GoogleAuthWeb that says in the definition... i also dont understand why they change these things over a span of 2-3 months its not logical...
@galaxies_dev
@galaxies_dev 2 жыл бұрын
I assume it's just a problems of TS typings, so you can put the /// reference line above it like in their examples here: github.com/CodetrixStudio/CapacitorGoogleAuth#configure
@marcsoler7115
@marcsoler7115 Жыл бұрын
Have you tried using @capacitor-firebase/authentication with Angular?
@galaxies_dev
@galaxies_dev Жыл бұрын
No Marc don't think so, but guess that might work even better!
@luigiiaconi9996
@luigiiaconi9996 2 жыл бұрын
I have this problem ERROR Error: Uncaught (in promise): Error: "GoogleAuth.init()" is not implemented on web Error: "GoogleAuth.init()" is not implemented on web
@marioinostroza581
@marioinostroza581 2 жыл бұрын
You must use this command: GoogleAuth.initialize()
@azarudeen6054
@azarudeen6054 2 жыл бұрын
Hi Simon, I am getting error like this {error: 'idp_initialization_failed', details: 'You have created a new client application that use…i/web/guides/gis-migration) for more information.'} When Click Sign In Object: {"error":"popup_closed_by_user"} When Refresh: {"error":"You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated.
@scottkirker9841
@scottkirker9841 2 жыл бұрын
I'm getting the same issue even after clearing cache :(
@adriScud
@adriScud 2 жыл бұрын
Me too, it seems like this way to do it is being deprecated :/
@galaxies_dev
@galaxies_dev 2 жыл бұрын
Gonna take a look at it!
@scottkirker9841
@scottkirker9841 2 жыл бұрын
FYI also getting when trying from incognito window in chrome. firefox does not have the 'idp...' error but does result in same "{"error": "popup_closed_by_user"} message
@deshannawarathna6283
@deshannawarathna6283 2 жыл бұрын
me also same issue. Please help Me!!
@viveksalokiya4416
@viveksalokiya4416 2 жыл бұрын
zone.js:218 Uncaught {error: 'idp_initialization_failed', details: 'You have created a new client application that use…i/web/guides/gis-migration) for more information.'} core.mjs:6485 ERROR Error: Uncaught (in promise): Object: {"error":"popup_closed_by_user"} ************Not Working******************
@marcoaureliosouza2838
@marcoaureliosouza2838 6 ай бұрын
Same error =(
@marioinostroza581
@marioinostroza581 2 жыл бұрын
If someone looking for command, that show you the SHA-1 fingerprint: keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore
@galaxies_dev
@galaxies_dev 2 жыл бұрын
Thanks Mario!
How to Setup Deep Links With Capacitor (iOS & Android)
25:42
Simon Grimm
Рет қаралды 30 М.
How to use the Capacitor Google Maps Plugin with Ionic
21:59
Simon Grimm
Рет қаралды 24 М.
НЫСАНА КОНЦЕРТ 2024
2:26:34
Нысана театры
Рет қаралды 1,6 МЛН
World’s Largest Jello Pool
01:00
Mark Rober
Рет қаралды 111 МЛН
1,000 Diamonds! (Funny Minecraft Animation) #shorts #cartoon
00:31
toonz CRAFT
Рет қаралды 41 МЛН
Sign in with Google on Expo React Native
29:49
Supabase
Рет қаралды 32 М.
Sign in with Apple from Angular Apps using Capacitor & Firebase
33:04
The Push Notifications Guide for Ionic & Capacitor
25:52
Simon Grimm
Рет қаралды 96 М.
Capacitor - Five Apps in Five Minutes
6:50
Fireship
Рет қаралды 169 М.
React Native Server Defined Rendering
12:45
Simon Grimm
Рет қаралды 3,3 М.
Login via Google authentication in Ionic APP via Firebase
14:57
Rakriative
Рет қаралды 3,9 М.
How Capacitor Migrates Cordova Plugins
26:19
Joshua Morony
Рет қаралды 7 М.
Generative AI in a Nutshell - how to survive and thrive in the age of AI
17:57
Это - iPhone 16!
16:29
Rozetked
Рет қаралды 440 М.
تجربة أغرب توصيلة شحن ضد القطع تماما
0:56
صدام العزي
Рет қаралды 64 МЛН
Klavye İle Trafik Işığını Yönetmek #shorts
0:18
Osman Kabadayı
Рет қаралды 9 МЛН
Мой новый мега монитор!🤯
1:00
Корнеич
Рет қаралды 1,7 МЛН