Implement Firebase Google login in Ionic for native mobile devices. This video is for developers targeting the iOS or Android and has been tested on both platforms. Grab the source code https://angularfirebase.com/lessons/ionic-google-login-with-firebase-and-angularfire

- Slack Invite (message @wincey) - https://goo.gl/6eYoxF
- Wasup - https://play.google.com/store/apps/details?id=com.tailorweb.wazup&hl=en
- Ionic - https://ionicframework.com/
- Gplus Cordova - https://github.com/EddyVerbruggen/cordova-plugin-googleplus
2024-02-04T07:44:20.651Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
508bce77-bd0a-4f12-b463-8463411df81a
7772611c458a9fc0f418e70c447baf988e04069819c5d5020b089a93146aa04d
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Firebase makes Google OAuth extremely easy in 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 pop up window or URL redirect like we would in a web app.
Instead, we use a Cordova plugin to access features that are only available on the native mobile device.
Mo 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 angularfirebase.com.
I'm 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 AngularFire 2 into our project.
And lastly, we'll need a component in monic 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, mo we also need the debug signing certificate to enable Google plus from our local development environment.
You can obtain the certificate from the command mine 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 Firebase.
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 Plus plugin and the corresponding Cordova plugin.
And it's important if you're 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 Plus, and you want to add your own Firebase config here, then we're importing AngularFire in the import section and Google plus down here in the provider section.
In my app, 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 AngularFireAuth as well as the Google Plus 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 going to have a single property, which is the user observable that we get from AngularFire 2.
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 AngularFire auth state.
The first method I wanted to find is Google login, which gets triggered when the user clicks on the actual login button.
What we wanna 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 Plus plug in.
To do that, we call await Google Plus login, and and then we have a couple of configuration options that we need to pass to it.
The important one is this web client ID because this allows us to take the token from the log in and then use it with AngularFire too.
You can find your web client ID by going into the Google Cloud Platform console, go to APIs 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 plus user, but we wanna use it with AngularFire 2.
So in order to do that, we call AngularFireAuth 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 Plus user.
Because our user is an observable, it's going to emit 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 reference 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 AngularFire auth sign out method.
And then if the platform is Cordova or a native mobile app, we can also call the Google plus 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 looking 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 log out.
From here, you can go ahead and run the app in an emulator.
In this example, I'm running Android Studio on the Pixel 2.
And you can see we get this native login flow as opposed to a web browser pop up.
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 wanna see an example on the actual app store, check out the Wassup app that was built by an Angular Firebase 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 mopscribe 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.

Speaker 0: Firebase makes Google OAuth extremely easy in 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 pop up window or URL redirect like we would in a web app. Instead, we use a Cordova plugin to access features that are only available on the native mobile device. Mo 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 angularfirebase.com.

I'm 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 AngularFire 2 into our project. And lastly, we'll need a component in monic 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, mo we also need the debug signing certificate to enable Google plus from our local development environment. You can obtain the certificate from the command mine 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 Firebase. 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 Plus plugin and the corresponding Cordova plugin. And it's important if you're 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 Plus, and you want to add your own Firebase config here, then we're importing AngularFire in the import section and Google plus down here in the provider section. In my app, 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 AngularFireAuth as well as the Google Plus 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 going to have a single property, which is the user observable that we get from AngularFire 2. 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 AngularFire auth state.

The first method I wanted to find is Google login, which gets triggered when the user clicks on the actual login button. What we wanna 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 Plus plug in. To do that, we call await Google Plus login, and and then we have a couple of configuration options that we need to pass to it. The important one is this web client ID because this allows us to take the token from the log in and then use it with AngularFire too. You can find your web client ID by going into the Google Cloud Platform console, go to APIs 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 plus user, but we wanna use it with AngularFire 2. So in order to do that, we call AngularFireAuth 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 Plus user.

Because our user is an observable, it's going to emit 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 reference 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 AngularFire auth sign out method. And then if the platform is Cordova or a native mobile app, we can also call the Google plus 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 looking 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 log out. From here, you can go ahead and run the app in an emulator.

In this example, I'm running Android Studio on the Pixel 2. And you can see we get this native login flow as opposed to a web browser pop up. 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 wanna see an example on the actual app store, check out the Wassup app that was built by an Angular Firebase 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 mopscribe 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.
Firebase makes Google OAuth extremely easy in 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 pop up window or URL redirect like we would in a web app. Instead, we use a Cordova plugin to access features that are only available on the native mobile device. Mo 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 angularfirebase.com.
google
I'm 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 AngularFire 2 into our project. And lastly, we'll need a component in monic 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, mo we also need the debug signing certificate to enable Google plus from our local development environment. You can obtain the certificate from the command mine and you'll need one for every machine that you use in the development of this app.
google
software development
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 Firebase. 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 Plus plugin and the corresponding Cordova plugin. And it's important if you're 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 Plus, and you want to add your own Firebase config here, then we're importing AngularFire in the import section and Google plus down here in the provider section. In my app, 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 AngularFireAuth as well as the Google Plus 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 going to have a single property, which is the user observable that we get from AngularFire 2. 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 AngularFire auth state. The first method I wanted to find is Google login, which gets triggered when the user clicks on the actual login button. What we wanna 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.
google
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 Plus plug in. To do that, we call await Google Plus login, and and then we have a couple of configuration options that we need to pass to it. The important one is this web client ID because this allows us to take the token from the log in and then use it with AngularFire too.
google
You can find your web client ID by going into the Google Cloud Platform console, go to APIs 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.
google
When that resolves, it's going to give us the Google plus user, but we wanna use it with AngularFire 2. So in order to do that, we call AngularFireAuth 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 Plus user. Because our user is an observable, it's going to emit the user data once this operation is complete. And lastly, we can catch and console log errors.
google
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 reference 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 AngularFire auth sign out method. And then if the platform is Cordova or a native mobile app, we can also call the Google plus logout method.
internet
google
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 looking 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 log out. From here, you can go ahead and run the app in an emulator. In this example, I'm running Android Studio on the Pixel 2. And you can see we get this native login flow as opposed to a web browser pop up. 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 wanna see an example on the actual app store, check out the Wassup app that was built by an Angular Firebase 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 mopscribe 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.
software
computers
Firebase makes Google OAuth extremely easy in 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 pop up window or URL redirect like we would in a web app. Instead, we use a Cordova plugin to access features that are only available on the native mobile device. Mo 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 angularfirebase.com. I'm 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 AngularFire 2 into our project. And lastly, we'll need a component in monic 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, mo we also need the debug signing certificate to enable Google plus from our local development environment. You can obtain the certificate from the command mine 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 Firebase. 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 Plus plugin and the corresponding Cordova plugin. And it's important if you're 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 Plus, and you want to add your own Firebase config here, then we're importing AngularFire in the import section and Google plus down here in the provider section. In my app, 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 AngularFireAuth as well as the Google Plus 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 going to have a single property, which is the user observable that we get from AngularFire 2. 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 AngularFire auth state. The first method I wanted to find is Google login, which gets triggered when the user clicks on the actual login button. What we wanna 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 Plus plug in. To do that, we call await Google Plus login, and and then we have a couple of configuration options that we need to pass to it. The important one is this web client ID because this allows us to take the token from the log in and then use it with AngularFire too. You can find your web client ID by going into the Google Cloud Platform console, go to APIs 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 plus user, but we wanna use it with AngularFire 2. So in order to do that, we call AngularFireAuth 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 Plus user. Because our user is an observable, it's going to emit 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 reference 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 AngularFire auth sign out method. And then if the platform is Cordova or a native mobile app, we can also call the Google plus 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 looking 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 log out. From here, you can go ahead and run the app in an emulator. In this example, I'm running Android Studio on the Pixel 2. And you can see we get this native login flow as opposed to a web browser pop up. 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 wanna see an example on the actual app store, check out the Wassup app that was built by an Angular Firebase 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 mopscribe 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.
Firebase
firebase
makes
makes
Google
google
OAuth
oauth
extremely
extremely
easy
easy
in
in
web
web
apps,
apps
but
but
if
if
we're
we're
building
building
a
a
native
native
mobile
mobile
app
app
with
with
Ionic,
ionic
there
there
are
are
some
some
additional
additional
considerations
considerations
we
we
need
need
to
to
think
think
about
about
for
for
iOS
ios
and
and
Android.
android
When
when
logging
logging
in,
in
we
we
can't
can't
just
just
use
use
a
a
regular
regular
browser
browser
pop
pop
up
up
window
window
or
or
URL
url
redirect
redirect
like
like
we
we
would
would
in
in
a
a
web
web
app.
app
Instead,
instead
we
we
use
use
a
a
Cordova
cordova
plugin
plugin
to
to
access
access
features
features
that
that
are
are
only
only
available
available
on
on
the
the
native
native
mobile
mobile
device.
device
Mo
mo
in
in
this
this
video,
video
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
implement
implement
Google
google
OAuth
oauth
from
from
scratch
scratch
in
in
a
a
way
way
that
that
works
works
for
for
iOS
ios
and
and
Android
android
as
as
well
well
as
as
progressive
progressive
web
web
apps.
apps
If
if
you're
you're
new
new
here,
here
make
make
sure
sure
to
to
subscribe,
subscribe
and
and
you
you
can
can
follow
follow
along
along
with
with
the
the
source
source
code
code
at
at
angularfirebase.com.
angularfirebase.com
I'm
i'm
starting
starting
out
out
from
from
a
a
brand
brand
new
new
Ionic
ionic
app
app
and
and
setting
setting
a
a
custom
custom
ID
id
that
that
we
we
can
can
use
use
to
to
register
register
our
our
app
app
with
with
iOS
ios
and
and
Android
android
on
on
the
the
Firebase
firebase
console.
console
Your
your
ID
id
should
should
follow
follow
a
a
format
format
of
of
com
com
dot
dot
brand
brand
name
name
dot
dot
project
project
name.
name
Just
just
to
to
give
give
you
you
a
a
heads
heads
up,
up
this
this
episode's
episode's
going
going
to
to
have
have
a
a
lot
lot
of
of
long
long
commands
commands
like
like
this,
this
but
but
you
you
can
can
copy
copy
and
and
paste
paste
all
all
of
of
them
them
from
from
the
the
main
main
write
write
up.
up
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
install
install
Firebase
firebase
and
and
AngularFire
angularfire
2
2
into
into
our
our
project.
project
And
and
lastly,
lastly
we'll
we'll
need
need
a
a
component
component
in
in
monic
monic
for
for
our
our
Google
google
login
login
feature.
feature
If
if
we
we
jump
jump
into
into
our
our
app
app
at
at
this
this
point,
point
we
we
should
should
be
be
able
able
to
to
go
go
into
into
the
the
config
config
XML
xml
file,
file
and
and
you
you
should
should
see
see
your
your
project
project
ID
id
that
that
you
you
set
set
from
from
the
the
command
command
line
line
as
as
the
the
widget
widget
ID.
id
But
but
if
if
starting
starting
from
from
an
an
existing
existing
app,
app
go
go
ahead
ahead
and
and
update
update
the
the
default
default
ID
id
to
to
whatever
whatever
your
your
project
project
ID
id
happens
happens
to
to
be.
be
Now
now
we
we
can
can
set
set
up
up
our
our
mobile
mobile
apps
apps
in
in
Firebase.
firebase
So
so
you'll
you'll
go
go
ahead
ahead
and
and
add
add
an
an
app
app
to
to
your
your
project,
project
and
and
we'll
we'll
start
start
with
with
the
the
iOS
ios
configuration.
configuration
All
all
you
you
have
have
to
to
do
do
is
is
enter
enter
your
your
project
project
ID
id
and
and
then
then
go
go
through
through
the
the
steps.
steps
You
you
don't
don't
need
need
to
to
do
do
anything
anything
else
else
other
other
than
than
register
register
your
your
app
app
with
with
this
this
ID.
id
That
that
takes
takes
care
care
of
of
iOS,
ios
for
for
Android,
android
we
we
have
have
an
an
additional
additional
step
step
for
for
local
local
development.
development
We'll
we'll
start
start
by
by
entering
entering
the
the
same
same
project
project
ID
id
like
like
we
we
just
just
did,
did
mo
mo
we
we
also
also
need
need
the
the
debug
debug
signing
signing
certificate
certificate
to
to
enable
enable
Google
google
plus
plus
from
from
our
our
local
local
development
development
environment.
environment
You
you
can
can
obtain
obtain
the
the
certificate
certificate
from
from
the
the
command
command
mine
mine
and
and
you'll
you'll
need
need
one
one
for
for
every
every
machine
machine
that
that
you
you
use
use
in
in
the
the
development
development
of
of
this
this
app.
app
You
you
can
can
copy
copy
and
and
paste
paste
this
this
command
command
from
from
the
the
main
main
article,
article
and
and
then
then
you'll
you'll
type
type
in
in
the
the
password
password
of
of
Android.
android
That
that
should
should
generate
generate
the
the
certificate,
certificate
which
which
you
you
can
can
then
then
copy
copy
and
and
paste
paste
and
and
add
add
it
it
to
to
your
your
project
project
in
in
Firebase.
firebase
Then
then
you
you
can
can
click
click
through
through
the
the
remaining
remaining
steps,
steps
but
but
you
you
don't
don't
need
need
to
to
do
do
anything
anything
else
else
other
other
than
than
register
register
the
the
app.
app
Now
now
we
we
just
just
have
have
one
one
more
more
thing
thing
to
to
do,
do
and
and
that's
that's
install
install
the
the
Ionic
ionic
native
native
Google
google
Plus
plus
plugin
plugin
and
and
the
the
corresponding
corresponding
Cordova
cordova
plugin.
plugin
And
and
it's
it's
important
important
if
if
you're
you're
targeting
targeting
iOS
ios
that
that
you
you
set
set
this
this
reversed
reversed
client
client
ID
id
variable.
variable
You
you
can
can
find
find
the
the
value
value
by
by
going
going
back
back
in
in
the
the
Firebase
firebase
console
console
under
under
your
your
iOS
ios
app,
app
then
then
you'll
you'll
find
find
it
it
in
in
the
the
Google
google
service
service
plist
plist
file.
file
Now
now
we're
we're
ready
ready
to
to
start
start
writing
writing
some
some
code.
code
First,
first
I'm
i'm
going
going
to
to
import
import
AngularFire
angularfire
and
and
Google
google
Plus,
plus
and
and
you
you
want
want
to
to
add
add
your
your
own
own
Firebase
firebase
config
config
here,
here
then
then
we're
we're
importing
importing
AngularFire
angularfire
in
in
the
the
import
import
section
section
and
and
Google
google
plus
plus
down
down
here
here
in
in
the
the
provider
provider
section.
section
In
in
my
my
app,
app
I
i
have
have
a
a
dedicated
dedicated
login
login
page,
page
but
but
you
you
could
could
easily
easily
drop
drop
in
in
the
the
component
component
we're
we're
going
going
to
to
build
build
into
into
any
any
other
other
page.
page
So
so
in
in
this
this
case,
case
I'm
i'm
setting
setting
my
my
root
root
page
page
as
as
the
the
login
login
page,
page
then
then
I'm
i'm
declaring
declaring
the
the
Google
google
login
login
component
component
in
in
the
the
page
page
HTML.
html
Now
now
we
we
can
can
jump
jump
into
into
that
that
component
component
and
and
build
build
our
our
cross
cross
platform
platform
login
login
feature.
feature
We're
we're
going
going
to
to
bring
bring
in
in
AngularFireAuth
angularfireauth
as
as
well
well
as
as
the
the
Google
google
Plus
plus
service
service
and
and
platform
platform
from
from
Ionic.
ionic
Platform
platform
will
will
allow
allow
us
us
to
to
determine
determine
if
if
we're
we're
on
on
a
a
native
native
app
app
or
or
a
a
web
web
app.
app
Then
then
our
our
component
component
going
going
to
to
have
have
a
a
single
single
property,
property
which
which
is
is
the
the
user
user
observable
observable
that
that
we
we
get
get
from
from
AngularFire
angularfire
2.
2
And
and
we'll
we'll
go
go
ahead
ahead
and
and
inject
inject
all
all
of
of
our
our
dependencies
dependencies
in
in
the
the
constructor.
constructor
Then
then
we
we
can
can
define
define
our
our
user
user
in
in
the
the
constructor
constructor
by
by
calling
calling
the
the
AngularFire
angularfire
auth
auth
state.
state
The
the
first
first
method
method
I
i
wanted
wanted
to
to
find
find
is
is
Google
google
login,
login
which
which
gets
gets
triggered
triggered
when
when
the
the
user
user
clicks
clicks
on
on
the
the
actual
actual
login
login
button.
button
What
what
we
we
wanna
wanna
do
do
here
here
is
is
first
first
check
check
for
for
the
the
platform.
platform
If
if
the
the
platform
platform
is
is
Cordova,
cordova
then
then
we
we
know
know
that
that
we're
we're
on
on
a
a
native
native
mobile
mobile
device,
device
so
so
we'll
we'll
run
run
our
our
native
native
Google
google
login
login
method.
method
Otherwise,
otherwise
we
we
can
can
just
just
run
run
our
our
code
code
for
for
a
a
regular
regular
web
web
application
application
login.
login
Our
our
login
login
methods
methods
are
are
based
based
on
on
promises,
promises
so
so
I'm
i'm
going
going
to
to
define
define
an
an
async
async
method
method
called
called
native
native
Google
google
login.
login
And
and
I'm
i'm
also
also
going
going
to
to
wrap
wrap
it
it
in
in
a
a
try
try
catch
catch
block
block
so
so
we
we
can
can
catch
catch
any
any
errors
errors
if
if
they
they
occur
occur
during
during
the
the
login
login
process.
process
On
on
a
a
mobile
mobile
device,
device
we'll
we'll
first
first
need
need
to
to
get
get
the
the
ID
id
token
token
from
from
the
the
Google
google
Plus
plus
plug
plug
in.
in
To
to
do
do
that,
that
we
we
call
call
await
await
Google
google
Plus
plus
login,
login
and
and
and
and
then
then
we
we
have
have
a
a
couple
couple
of
of
configuration
configuration
options
options
that
that
we
we
need
need
to
to
pass
pass
to
to
it.
it
The
the
important
important
one
one
is
is
this
this
web
web
client
client
ID
id
because
because
this
this
allows
allows
us
us
to
to
take
take
the
the
token
token
from
from
the
the
log
log
in
in
and
and
then
then
use
use
it
it
with
with
AngularFire
angularfire
too.
too
You
you
can
can
find
find
your
your
web
web
client
client
ID
id
by
by
going
going
into
into
the
the
Google
google
Cloud
cloud
Platform
platform
console,
console
go
go
to
to
APIs
apis
and
and
services
services
and
and
then
then
go
go
to
to
your
your
credentials
credentials
tab.
tab
You'll
you'll
need
need
to
to
use
use
the
the
web
web
client
client
ID
id
that
that
I
i
have
have
checked
checked
here.
here
Then
then
you
you
can
can
simply
simply
paste
paste
it
it
in
in
or
or
set
set
it
it
up
up
as
as
an
an
environment
environment
variable.
variable
When
when
that
that
resolves,
resolves
it's
it's
going
going
to
to
give
give
us
us
the
the
Google
google
plus
plus
user,
user
but
but
we
we
wanna
wanna
use
use
it
it
with
with
AngularFire
angularfire
2.
2
So
so
in
in
order
order
to
to
do
do
that,
that
we
we
call
call
AngularFireAuth
angularfireauth
sign
sign
in
in
with
with
credential.
credential
Then
then
we'll
we'll
reference
reference
the
the
Google
google
auth
auth
provider
provider
from
from
the
the
Firebase
firebase
SDK
sdk
and
and
pass
pass
in
in
the
the
ID
id
token
token
that
that
we
we
just
just
got
got
from
from
the
the
Google
google
Plus
plus
user.
user
Because
because
our
our
user
user
is
is
an
an
observable,
observable
it's
it's
going
going
to
to
emit
emit
the
the
user
user
data
data
once
once
this
this
operation
operation
is
is
complete.
complete
And
and
lastly,
lastly
we
we
can
can
catch
catch
and
and
console
console
log
log
errors.
errors
If
if
we
we
also
also
want
want
to
to
deploy
deploy
as
as
a
a
progressive
progressive
web
web
app,
app
we're
we're
going
going
to
to
need
need
a
a
regular
regular
web
web
login.
login
We
we
can
can
use
use
the
the
same
same
async
async
method
method
pattern,
pattern
wrap
wrap
it
it
in
in
a
a
try
try
catch
catch
block,
block
but
but
this
this
time
time
it's
it's
even
even
easier.
easier
We
we
just
just
reference
reference
the
the
Google
google
auth
auth
provider
provider
and
and
then
then
call
call
sign
sign
in
in
with
with
pop
pop
up.
up
The
the
last
last
thing
thing
we
we
need
need
to
to
do
do
here
here
is
is
give
give
the
the
user
user
a
a
way
way
to
to
sign
sign
out.
out
First,
first
we'll
we'll
call
call
the
the
AngularFire
angularfire
auth
auth
sign
sign
out
out
method.
method
And
and
then
then
if
if
the
the
platform
platform
is
is
Cordova
cordova
or
or
a
a
native
native
mobile
mobile
app,
app
we
we
can
can
also
also
call
call
the
the
Google
google
plus
plus
logout
logout
method.
method
From
from
here,
here
I'm
i'm
going
going
to
to
switch
switch
over
over
to
to
the
the
HTML.
html
And
and
the
the
first
first
thing
thing
I'll
i'll
do
do
is
is
unwrap
unwrap
the
the
user
user
observable
observable
using
using
the
the
async
async
pipe,
pipe
this
this
weird
weird
looking
looking
syntax
syntax
is
is
either
either
going
going
to
to
give
give
me
me
a
a
user
user
object
object
or
or
an
an
empty
empty
object
object
set
set
to
to
a
a
template
template
variable
variable
named
named
user.
user
We
we
know
know
that
that
the
the
user
user
is
is
logged
logged
in
in
if
if
that
that
object
object
has
has
a
a
user
user
ID.
id
So
so
we'll
we'll
set
set
up
up
an
an
Ionic
ionic
button.
button
And
and
if
if
the
the
user
user
is
is
not
not
logged
logged
in,
in
we'll
we'll
give
give
them
them
the
the
option
option
to
to
trigger
trigger
the
the
Google
google
login
login
method.
method
Otherwise,
otherwise
if
if
we
we
do
do
have
have
a
a
user,
user
we're
we're
going
going
to
to
show
show
that
that
user
user
ID
id
and
and
give
give
them
them
the
the
option
option
to
to
log
log
out.
out
From
from
here,
here
you
you
can
can
go
go
ahead
ahead
and
and
run
run
the
the
app
app
in
in
an
an
emulator.
emulator
In
in
this
this
example,
example
I'm
i'm
running
running
Android
android
Studio
studio
on
on
the
the
Pixel
pixel
2.
2
And
and
you
you
can
can
see
see
we
we
get
get
this
this
native
native
login
login
flow
flow
as
as
opposed
opposed
to
to
a
a
web
web
browser
browser
pop
pop
up.
up
We
we
can
can
also
also
test
test
it
it
out
out
in
in
Xcode
xcode
with
with
the
the
iPhone
iphone
8,
8
and
and
we
we
should
should
get
get
a
a
similar
similar
process
process
there
there
as
as
well.
well
And
and
if
if
you
you
wanna
wanna
see
see
an
an
example
example
on
on
the
the
actual
actual
app
app
store,
store
check
check
out
out
the
the
Wassup
wassup
app
app
that
that
was
was
built
built
by
by
an
an
Angular
angular
Firebase
firebase
Pro
pro
member
member
using
using
Ionic
ionic
and
and
similar
similar
technologies.
technologies
Mess
mess
around
around
with
with
it
it
and
and
give
give
the
the
creator
creator
some
some
feedback
feedback
on
on
our
our
Slack
slack
team.
team
The
the
invite
invite
link
link
is
is
in
in
the
the
video
video
description.
description
If
if
you
you
found
found
this
this
video
video
helpful,
helpful
please
please
like
like
and
and
mopscribe
mopscribe
and
and
if
if
you're
you're
serious
serious
about
about
building
building
Ionic
ionic
apps,
apps
consider
consider
upgrading
upgrading
to
to
a
a
pro
pro
membership.
membership
You'll
you'll
get
get
twice
twice
as
as
much
much
content
content
every
every
week
week
and
and
exclusive
exclusive
resources
resources
designed
designed
to
to
help
help
you
you
build
build
and
and
ship
ship
your
your
app
app
faster.
faster
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speaker explains how to implement Googlepaid Volvo in web apps, starting with creating a native app using a Cordova plugin and a local development environment. They provide instructions on setting a login page and integrating the Google Plus service and platform, as well as setting a web client ID and using a unique login ID. The speaker also explains how to obtain a debug signing certificate for local development and provides instructions on obtaining one, setting up an async method for a web login, and using the Googleapping API and Google denies method. Finally, the speaker concludes by encouraging viewers to check out the Wassup app and upgrade to a pro membership for more content and exclusive resources.
Ionic Google Login for iOS and Android
Firebase makes Google OAuth extremely easy in 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 pop up window or URL redirect like we would in a web app. Instead, we use a Cordova plugin to access features that are only available on the native mobile device. Mo 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 angularfirebase.com. I'm 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 AngularFire 2 into our project. And lastly, we'll need a component in monic 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, mo we also need the debug signing certificate to enable Google plus from our local development environment. You can obtain the certificate from the command mine 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 Firebase. 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 Plus plugin and the corresponding Cordova plugin. And it's important if you're 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 Plus, and you want to add your own Firebase config here, then we're importing AngularFire in the import section and Google plus down here in the provider section. In my app, 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 AngularFireAuth as well as the Google Plus 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 going to have a single property, which is the user observable that we get from AngularFire 2. 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 AngularFire auth state. The first method I wanted to find is Google login, which gets triggered when the user clicks on the actual login button. What we wanna 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 Plus plug in. To do that, we call await Google Plus login, and and then we have a couple of configuration options that we need to pass to it. The important one is this web client ID because this allows us to take the token from the log in and then use it with AngularFire too. You can find your web client ID by going into the Google Cloud Platform console, go to APIs 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 plus user, but we wanna use it with AngularFire 2. So in order to do that, we call AngularFireAuth 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 Plus user. Because our user is an observable, it's going to emit 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 reference 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 AngularFire auth sign out method. And then if the platform is Cordova or a native mobile app, we can also call the Google plus 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 looking 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 log out. From here, you can go ahead and run the app in an emulator. In this example, I'm running Android Studio on the Pixel 2. And you can see we get this native login flow as opposed to a web browser pop up. 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 wanna see an example on the actual app store, check out the Wassup app that was built by an Angular Firebase 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 mopscribe 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.
The speaker explains how to implement Googlepaid Volvo in web apps, starting with creating a native app using a Cordova plugin and a local development environment. They provide instructions on setting a login page and integrating the Google Plus service and platform, as well as setting a web client ID and using a unique login ID. The speaker also explains how to obtain a debug signing certificate for local development and provides instructions on obtaining one, setting up an async method for a web login, and using the Googleapping API and Google denies method. Finally, the speaker concludes by encouraging viewers to check out the Wassup app and upgrade to a pro membership for more content and exclusive resources.