Ionic Google Login for iOS and Android

Key Takeaways

[Music] fire base makes Google OAuth extremely easy and web apps but if we're building a native mobile app with ionic there are some additional considerations we need to think about for iOS and Android when logging in we can't just use a regular browser popup window or URL redirect like we would in a web app instead we use a Cordova plug-in to access features that are only available on the native mobile device in this video I'm going to show you how to implement Google OAuth from scratch in a way that works for iOS and Android as well as progressive web apps if you're new here make sure to subscribe and you can follow along with the source code at angular firebase com I am starting out from a brand new ionic app and setting a custom ID that we can use to register our app with iOS and Android on the firebase console your ID should follow a format of com dot brand name dot project name just to give you a heads up this episode's going to have a lot of long commands like this but you can copy and paste all of them from the main write up the next thing we'll do is install firebase and angular fire 2 into our project and lastly we'll need a component in ionic for our Google login feature if we jump into our app at this point we should be able to go into the config.xml file and you should see your project ID that you set from the command line as the widget ID but if starting from an existing app go ahead and update the default ID to whatever your project ID happens to be now we can set up our mobile apps in firebase so you'll go ahead and add an app to your project and we'll start with the iOS configuration all you have to do is enter your project ID and then go through the steps you don't need to do anything else other than register your app with this ID that takes care of iOS for Android we have an additional step for local development we'll start by entering the same project ID like we just did but we also need the debug signing certificate to enable Google+ from our local development environment you can obtain the certificate from the command-line and you'll need one for every machine that you use in the development of this app you can copy and paste this command from the main article and then you'll type in the password of Android that should generate the certificate which you can then copy and paste and add it to your project in fire then you can click through the remaining steps but you don't need to do anything else other than register the app now we just have one more thing to do and that's install the ionic native Google+ plug-in and the corresponding Cordova plug-in and it's important if you are targeting iOS that you set this reversed client ID variable you can find the value by going back in the firebase console under your iOS app then you'll find it in the Google service plist file now we're ready to start writing some code first I'm going to import angularfire and Google+ and you'll want to add your own firebase config here then we're importing angularfire in the import section and Google+ down here in that providers section in my up I have a dedicated login page but you could easily drop in the component we're going to build into any other page so in this case I'm setting my root page as the login page then I'm declaring the Google login component in the page HTML now we can jump into that component and build our cross-platform login feature we're going to bring in angularfire auth as well as the Google+ service and platform from ionic platform will allow us to determine if we're on a native app or a web app then our component is going to have a single property which is the user observable that we get from angular fire - and we'll go ahead and inject all of our dependencies in the constructor then we can define our user in the constructor by calling the angular fire off state the first method I want to define is Google login which gets triggered when the user clicks on the actual login button what we want to do here is first check for the platform if the platform is Cordova then we know that we're on a native mobile device so we'll run our native Google login method otherwise we can just run our code for a regular web application login our login methods are based on promises so I'm going to define an async method called native Google login and I'm also going to wrap it in a try-catch block so we can catch any errors if they occur during the login process on a mobile device we'll first need to get the ID token from the Google+ plug-in to do that we call a weight Google+ login and then we have a couple of configuration options that we need to pass to the important one is this web client ID because this allows us to take the token from the login and then use it with angularfire too you can find your web client ID by going into the Google cloud platform console go to api's and services and then go to your credentials tab you'll need to use the web client ID that I have checked here then you can simply paste it in or set it up as an environment variable when that resolves it's going to give us the Google+ user but we want to use it with angularfire too so in order to do that we call angularfire off sign in with credential then we'll reference the Google auth provider from the firebase SDK and pass in the ID token that we just got from the Google+ user because our users an observable it's going to omit the user data once this operation is complete and lastly we can catch and console.log errors if we also want to deploy as a progressive web app we're going to need a regular web login we can use the same async method pattern wrap it in a try-catch block but this time it's even easier we just referenced the Google auth provider and then call sign in with pop up the last thing we need to do here is give the user a way to sign out first we'll call the angular fire off sign out method and then if the platform is cordova or a native mobile app we can also call the google+ logout method from here I'm going to switch over to the HTML and the first thing I'll do is unwrap the user observable using the async pipe this weird-lookin syntax is either going to give me a user object or an empty object set to a template variable named user we know that the user is logged in if that object has a user ID so we'll set up an ionic button and if the user is not logged in we'll give them the option to trigger the Google login method otherwise if we do have a user we're going to show that user ID and give them the option to logout from here you can go ahead and run the app in an emulator in this example I'm running an Android studio on the pixel too and you can see we get this native login flow as opposed to a web browser papa we can also test it out in Xcode with the iPhone 8 and we should get a similar process there as well and if you want to see an example on the actual App Store check out the what's up app that was built by an angular fire base Pro member using ionic and similar technologies mess around with it and give the Creator some feedback on our slack team the invite link is in the video description if you found this video helpful please like and subscribe and if you're serious about building ionic apps consider upgrading to a pro membership you'll get twice as much content every week and exclusive resources designed to help you build and ship your app faster thanks for watching and I'll see you soon [Music]