Learn how to combine Google APIs with Firebase Auth by building an app that can manage a user's calendar https://angularfirebase.com/lessons/google-calendar-api-with-firebase/

Google APIs JS - https://developers.google.com/api-client-library/javascript/start/start-js
Firebase Auth - https://firebase.google.com/docs/auth/
NYC Broadway Tours https://www.broadway.life/
2024-02-04T07:14:59.927Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
d8a20cad-ac21-4873-b3be-7c72664434d4
9a83d882616505d611379d4f87e6b4fbd711305f40aebfa4bcbc12197c7e0cb7
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
There are literally hundreds of different APIs available under the Google umbrella.
Things like Drive, Calendar, Google Cloud Platform, Maps, and YouTube, just to name a few.
But when you log in a user Firebase.
You only get access to a limited set of read only data like their Google plus profile.
In today's video, you'll learn how to work with the Google Calendar API on the behalf Hubba user but more importantly you'll learn how to expand the scope of Firebase Auth to work with virtually any other Google API.
If you're new here like and subscribe Cribe and there will be a one of a kind shirt giveaway with this video.
All you have to do is leave a comment below letting me know which Google API you want to see covered next.
And I'll randomly pick a winner via live cream tomorrow.
Let's start things off by taking a look at what we're actually building today.
It's currently Saturday night and I don't have anything additional on my calendar for today.
But if we skip ahead to Monday, you'll see that I have a handful of appointments.
The goal of this lesson is for you to be able to log in a user with Firebase and then programmatically update or read items in the calendar.
The inspiration for this video comes from a real life tour operator based in New York City.
After they sign up, they need to build out a complex itinerary for their trip.
Now there's actually a couple different ways you can go about this, but I'm gonna show you the approach that I think is most developer friendly and flexible.
As you can see here, when we log in, it looks exactly like we're logging in with Firebase and the Google auth provider.
But that's actually not what happened.
Instead, we use the Google services JavaScript library 2 sign in.
That gave us a JSON Web Token that we could then pass off to Firebase to log in as a Firebase user.
The reason we do this is because we're going to use the Google Services Library to make API requests to the Calendar API, and it will automatically manage our access tokens so we can do everything from the front end.
Then once we're logged in, we can retrieve this user's Google Calendar by simply making a call to that API.
So the data we're looking at here in the UI are actually Events from my Google Calendar.
In addition to reading the data, we can also create, update, and delete data.
For example, if I click this Add Event button, it's sending an insert request to the API and adds a new item to my calendar.
So now I know to stop working and have some fun about an hour from now.
But first, we need to write some code.
I'm working from an Angular app and assuming that you have AngularFire installed.
But even if you're working with a different framework that processes still very similar.
The only thing we need is Firebase Auth.
We don't need to save anything in our back end database or do anything with Cloud Functions.
The next thing we'll need to do is set up a script to initialize the Google API client.
Instead of using the Angular HTTP client, we'll use the Google APIs client, which will automatically handle all of the access token stuff for us.
And the script is pretty lightweight if you're worried about performance.
The next thing we'll do is set up an authentication service that will log in the user and make request to the API.
Inside the service, we'll import AngularFire auth and also auth from the main Firebase SDK.
H then we'll need to declare a global variable for gappy or Google API.
It is possible to strong type this and I'll show you how in the main article, but they're community maintained types and I think they're screwed up for Google Calendar.
So I'm going to just leave them out altogether for this video.
So you wanna use the Google Calendar API reference as the main source of truth for your documentation.
The next thing we'll do in our service is set up a user property which is an observable of the Firebase user.
And we'll also declare the calendar items that we wanna use in the UI here which is an array of objects.
Checks.
From there, we can inject AngularFire auth in the constructor.
This is where we will initialize gappy, and then we'll define our user as the AngularFire auth state.
I'm going to write a net client as its own method.
And the first thing that you do is you initialize or load the main client library.
Then you'll initialize the client libraries that you want to use, which, in our case, it will be authentication version 2 and Google Calendar version 3.
This is the point where we'll set up our credentials and our scopes for the APIs that we wanna use.
The first value is the API key, which we can find directly in the Firebase console if you go to project settings.
Then the second value is your OAuth client ID, which you can find in a variety of places, but you'll wanna go to the Google Cloud Platform Console for this one.
You can go to the Console and then find it under the APIs and Services tab.
It's going to be your web OAuth 2 client ID.
When you see that, you wanna go ahead and click on it, which will take you to this page.
And you'll want to update the authorized JavaScript origins to local host 4200 or whatever local port you're working on.
The 3rd argument is an array of discovery docs.
There are so many different APIs at Google that they can't all be in a single package.
So you pass in the discovery docs for the APIs that you wanna use.
In our case, we're using version 3 of Google Calendar.
And lastly, you pass in the scopes that you want the user to grant permission to.
Every API has different levels of permission that the user can grant access to.
In our case here, we want to fully manage the calendar.
So we're gonna ask for the full calendar scope.
But you should only request permission for the things that you only needs.
So if you only needed to read the items, you should just request read only access.
So that will initialize gappy in our project and manage the access tokens for us so we can easily make requests to this API when the user is authenticated.
The last thing we'll need to do with the initialization is load in calendar version 3, and then we can console log when it's ready.
If you've worked with Google OAuth and Firebase, you're probably used to writing your OAuth code with just 1 or 2 lines of code.
Unfortunately, we're going to need to increase that code to about 5 lines.
Instead of using Firebase to log in initially, we'll call gappy auth2 GetAuthInstance, and then we'll say await Google auth sign in.
This is pretty much identical to doing sign in with pop up with the Firebase SDK.
It creates a JSON Web Token that logs the user into client app which we can then access by saying get auth response dot ID token.
At this point, the user is logged into Google, but they're not logged into Firebase.
Firebase has a way to sign in manually when you already have a JSON Web Token, which we can do by calling Google auth provider dot credential and pass in that token.
Then we can use that to sign the user into Firebase by calling AngularFire auth, sign in and retrieve data with credential and pass in the credential.
In the main article, I'll show you an alternate approach where you log the user into Firebase first and then set up the scopes from there.
But then you have to manage your own tokens manually, which tends to be a lot more work overall.
From here, we'll go ahead and add a logout method really quick.
And now we're ready to start making API calls to Google Calendar.
Gappy is promise based, so we can set this up as an async function.
And we'll call gappy client calendar events dot list.
And and, again, because we don't have the strong type, we'll have to look at the API docs manually.
But we're really just looking at a handful of arguments here to get the items from the calendar that we want.
So here, we're requesting the primary calendar, all events that start in the future, and we'll order them by start time.
I'd recommend console logging the response so you can see what the actual data payload looks like.
In this case, the actual calendar items we want to show in the UI are found on events dot result items.
So once the user is logged in, all they have to do is trigger this Get Calendar method and that will return the events from their calendar.
Because we requested the full calendar scope we have full CRUD access to their calendar.
Before I write this method, I'm first going to set up a helper function called hoursFromNow that takes a number as its argument and then returns the number of hours in the future as an ISO string.
You probably don't need it, but I'm just using it to make our code a little bit more readable.
To add a new event, we'll call gappy client calendar events insert.
And then we have a whole bunch of different options that we can use here to format the actual calendar event.
It will go on the primary calendar, and then we'll have a start object that has a date time and then also a time zone, and then of course an end time.
And lastly, we'll add a summary and a description to give it some interesting content.
Then as a final touch, whenever we insert an event, we'll then retrieve our calendar events again which resets on the service, so it'll look like the event updates in real time on our UI.
So that takes care of all the hard work.
Now let's go into our App component and put this service to use.
The first thing you wanna do is inject the auth service in the component constructor.
And you'll actually wanna make it a public property even though it says private here in the source code.
From here, it's just a matter of adding a little bit of markup to show our user and the calendar items.
We can unwrap the user observable by doing n g if followed by auth.userasync.
And then we'll set it as a template variable called user.
That provides their cool plus information like the photo URL and their display name.
All the other methods can be treated as event handlers.
So we'll just let the user click buttons to log in and make calls to their Google Calendar API.
And lastly, our calendar items are an array on the Service, so we can loop over those with NG 4 and they're already unwrapped so we don't need to use the async pipe here.
And that will give you a whole bunch of data for each item which you can inspect in the console.
If you followed along with the code, you should see a response object in the console.
It's all the data that's returned from the Google API including the items on that user's calendar.
So now you know how to get a hold of a Google Calendar that's owned by a Firebase user, but more importantly you know how to use the Google API client library to access all of the hundreds of different APIs offered by Google.
I'm gonna go ahead and wrap things up there.
If this video helped you please like and Khryib, and if you're serious about building a product, consider becoming a pro member at angularfirebase.com.
You'll get unlimited access to all premium content, which includes multiple full courses and a full length book as well as 1 on 1 project support to help you get your app built and shipped faster.
Thanks for watching, and I'll talk to you soon.

Speaker 0: There are literally hundreds of different APIs available under the Google umbrella. Things like Drive, Calendar, Google Cloud Platform, Maps, and YouTube, just to name a few. But when you log in a user Firebase. You only get access to a limited set of read only data like their Google plus profile. In today's video, you'll learn how to work with the Google Calendar API on the behalf Hubba user but more importantly you'll learn how to expand the scope of Firebase Auth to work with virtually any other Google API.

If you're new here like and subscribe Cribe and there will be a one of a kind shirt giveaway with this video. All you have to do is leave a comment below letting me know which Google API you want to see covered next. And I'll randomly pick a winner via live cream tomorrow. Let's start things off by taking a look at what we're actually building today. It's currently Saturday night and I don't have anything additional on my calendar for today.

But if we skip ahead to Monday, you'll see that I have a handful of appointments. The goal of this lesson is for you to be able to log in a user with Firebase and then programmatically update or read items in the calendar. The inspiration for this video comes from a real life tour operator based in New York City. After they sign up, they need to build out a complex itinerary for their trip. Now there's actually a couple different ways you can go about this, but I'm gonna show you the approach that I think is most developer friendly and flexible.

As you can see here, when we log in, it looks exactly like we're logging in with Firebase and the Google auth provider. But that's actually not what happened. Instead, we use the Google services JavaScript library 2 sign in. That gave us a JSON Web Token that we could then pass off to Firebase to log in as a Firebase user. The reason we do this is because we're going to use the Google Services Library to make API requests to the Calendar API, and it will automatically manage our access tokens so we can do everything from the front end.

Then once we're logged in, we can retrieve this user's Google Calendar by simply making a call to that API. So the data we're looking at here in the UI are actually Events from my Google Calendar. In addition to reading the data, we can also create, update, and delete data. For example, if I click this Add Event button, it's sending an insert request to the API and adds a new item to my calendar. So now I know to stop working and have some fun about an hour from now.

But first, we need to write some code. I'm working from an Angular app and assuming that you have AngularFire installed. But even if you're working with a different framework that processes still very similar. The only thing we need is Firebase Auth. We don't need to save anything in our back end database or do anything with Cloud Functions.

The next thing we'll need to do is set up a script to initialize the Google API client. Instead of using the Angular HTTP client, we'll use the Google APIs client, which will automatically handle all of the access token stuff for us. And the script is pretty lightweight if you're worried about performance. The next thing we'll do is set up an authentication service that will log in the user and make request to the API. Inside the service, we'll import AngularFire auth and also auth from the main Firebase SDK.

H then we'll need to declare a global variable for gappy or Google API. It is possible to strong type this and I'll show you how in the main article, but they're community maintained types and I think they're screwed up for Google Calendar. So I'm going to just leave them out altogether for this video. So you wanna use the Google Calendar API reference as the main source of truth for your documentation. The next thing we'll do in our service is set up a user property which is an observable of the Firebase user.

And we'll also declare the calendar items that we wanna use in the UI here which is an array of objects. Checks. From there, we can inject AngularFire auth in the constructor. This is where we will initialize gappy, and then we'll define our user as the AngularFire auth state. I'm going to write a net client as its own method.

And the first thing that you do is you initialize or load the main client library. Then you'll initialize the client libraries that you want to use, which, in our case, it will be authentication version 2 and Google Calendar version 3. This is the point where we'll set up our credentials and our scopes for the APIs that we wanna use. The first value is the API key, which we can find directly in the Firebase console if you go to project settings. Then the second value is your OAuth client ID, which you can find in a variety of places, but you'll wanna go to the Google Cloud Platform Console for this one.

You can go to the Console and then find it under the APIs and Services tab. It's going to be your web OAuth 2 client ID. When you see that, you wanna go ahead and click on it, which will take you to this page. And you'll want to update the authorized JavaScript origins to local host 4200 or whatever local port you're working on. The 3rd argument is an array of discovery docs.

There are so many different APIs at Google that they can't all be in a single package. So you pass in the discovery docs for the APIs that you wanna use. In our case, we're using version 3 of Google Calendar. And lastly, you pass in the scopes that you want the user to grant permission to. Every API has different levels of permission that the user can grant access to.

In our case here, we want to fully manage the calendar. So we're gonna ask for the full calendar scope. But you should only request permission for the things that you only needs. So if you only needed to read the items, you should just request read only access. So that will initialize gappy in our project and manage the access tokens for us so we can easily make requests to this API when the user is authenticated.

The last thing we'll need to do with the initialization is load in calendar version 3, and then we can console log when it's ready. If you've worked with Google OAuth and Firebase, you're probably used to writing your OAuth code with just 1 or 2 lines of code. Unfortunately, we're going to need to increase that code to about 5 lines. Instead of using Firebase to log in initially, we'll call gappy auth2 GetAuthInstance, and then we'll say await Google auth sign in. This is pretty much identical to doing sign in with pop up with the Firebase SDK.

It creates a JSON Web Token that logs the user into client app which we can then access by saying get auth response dot ID token. At this point, the user is logged into Google, but they're not logged into Firebase. Firebase has a way to sign in manually when you already have a JSON Web Token, which we can do by calling Google auth provider dot credential and pass in that token. Then we can use that to sign the user into Firebase by calling AngularFire auth, sign in and retrieve data with credential and pass in the credential. In the main article, I'll show you an alternate approach where you log the user into Firebase first and then set up the scopes from there.

But then you have to manage your own tokens manually, which tends to be a lot more work overall. From here, we'll go ahead and add a logout method really quick. And now we're ready to start making API calls to Google Calendar. Gappy is promise based, so we can set this up as an async function. And we'll call gappy client calendar events dot list.

And and, again, because we don't have the strong type, we'll have to look at the API docs manually. But we're really just looking at a handful of arguments here to get the items from the calendar that we want. So here, we're requesting the primary calendar, all events that start in the future, and we'll order them by start time. I'd recommend console logging the response so you can see what the actual data payload looks like. In this case, the actual calendar items we want to show in the UI are found on events dot result items.

So once the user is logged in, all they have to do is trigger this Get Calendar method and that will return the events from their calendar. Because we requested the full calendar scope we have full CRUD access to their calendar. Before I write this method, I'm first going to set up a helper function called hoursFromNow that takes a number as its argument and then returns the number of hours in the future as an ISO string. You probably don't need it, but I'm just using it to make our code a little bit more readable. To add a new event, we'll call gappy client calendar events insert.

And then we have a whole bunch of different options that we can use here to format the actual calendar event. It will go on the primary calendar, and then we'll have a start object that has a date time and then also a time zone, and then of course an end time. And lastly, we'll add a summary and a description to give it some interesting content. Then as a final touch, whenever we insert an event, we'll then retrieve our calendar events again which resets on the service, so it'll look like the event updates in real time on our UI. So that takes care of all the hard work.

Now let's go into our App component and put this service to use. The first thing you wanna do is inject the auth service in the component constructor. And you'll actually wanna make it a public property even though it says private here in the source code. From here, it's just a matter of adding a little bit of markup to show our user and the calendar items. We can unwrap the user observable by doing n g if followed by auth.userasync.

And then we'll set it as a template variable called user. That provides their cool plus information like the photo URL and their display name. All the other methods can be treated as event handlers. So we'll just let the user click buttons to log in and make calls to their Google Calendar API. And lastly, our calendar items are an array on the Service, so we can loop over those with NG 4 and they're already unwrapped so we don't need to use the async pipe here.

And that will give you a whole bunch of data for each item which you can inspect in the console. If you followed along with the code, you should see a response object in the console. It's all the data that's returned from the Google API including the items on that user's calendar. So now you know how to get a hold of a Google Calendar that's owned by a Firebase user, but more importantly you know how to use the Google API client library to access all of the hundreds of different APIs offered by Google. I'm gonna go ahead and wrap things up there.

If this video helped you please like and Khryib, and if you're serious about building a product, consider becoming a pro member at angularfirebase.com. You'll get unlimited access to all premium content, which includes multiple full courses and a full length book as well as 1 on 1 project support to help you get your app built and shipped faster. Thanks for watching, and I'll talk to you soon.
There are literally hundreds of different APIs available under the Google umbrella. Things like Drive, Calendar, Google Cloud Platform, Maps, and YouTube, just to name a few. But when you log in a user Firebase. You only get access to a limited set of read only data like their Google plus profile. In today's video, you'll learn how to work with the Google Calendar API on the behalf Hubba user but more importantly you'll learn how to expand the scope of Firebase Auth to work with virtually any other Google API. If you're new here like and subscribe Cribe and there will be a one of a kind shirt giveaway with this video. All you have to do is leave a comment below letting me know which Google API you want to see covered next. And I'll randomly pick a winner via live cream tomorrow.
google
youtube
Let's start things off by taking a look at what we're actually building today. It's currently Saturday night and I don't have anything additional on my calendar for today. But if we skip ahead to Monday, you'll see that I have a handful of appointments. The goal of this lesson is for you to be able to log in a user with Firebase and then programmatically update or read items in the calendar.
The inspiration for this video comes from a real life tour operator based in New York City. After they sign up, they need to build out a complex itinerary for their trip. Now there's actually a couple different ways you can go about this, but I'm gonna show you the approach that I think is most developer friendly and flexible. As you can see here, when we log in, it looks exactly like we're logging in with Firebase and the Google auth provider. But that's actually not what happened. Instead, we use the Google services JavaScript library 2 sign in. That gave us a JSON Web Token that we could then pass off to Firebase to log in as a Firebase user. The reason we do this is because we're going to use the Google Services Library to make API requests to the Calendar API, and it will automatically manage our access tokens so we can do everything from the front end. Then once we're logged in, we can retrieve this user's Google Calendar by simply making a call to that API.
tourism
travel
graphic design
air travel
google
software development
software
So the data we're looking at here in the UI are actually Events from my Google Calendar. In addition to reading the data, we can also create, update, and delete data. For example, if I click this Add Event button, it's sending an insert request to the API and adds a new item to my calendar. So now I know to stop working and have some fun about an hour from now. But first, we need to write some code. I'm working from an Angular app and assuming that you have AngularFire installed. But even if you're working with a different framework that processes still very similar. The only thing we need is Firebase Auth. We don't need to save anything in our back end database or do anything with Cloud Functions.
The next thing we'll need to do is set up a script to initialize the Google API client. Instead of using the Angular HTTP client, we'll use the Google APIs client, which will automatically handle all of the access token stuff for us. And the script is pretty lightweight if you're worried about performance.
google
The next thing we'll do is set up an authentication service that will log in the user and make request to the API. Inside the service, we'll import AngularFire auth and also auth from the main Firebase SDK. H then we'll need to declare a global variable for gappy or Google API.
It is possible to strong type this and I'll show you how in the main article, but they're community maintained types and I think they're screwed up for Google Calendar. So I'm going to just leave them out altogether for this video. So you wanna use the Google Calendar API reference as the main source of truth for your documentation. The next thing we'll do in our service is set up a user property which is an observable of the Firebase user.
google
And we'll also declare the calendar items that we wanna use in the UI here which is an array of objects. Checks. From there, we can inject AngularFire auth in the constructor. This is where we will initialize gappy, and then we'll define our user as the AngularFire auth state.
I'm going to write a net client as its own method. And the first thing that you do is you initialize or load the main client library. Then you'll initialize the client libraries that you want to use, which, in our case, it will be authentication version 2 and Google Calendar version 3.
software development
This is the point where we'll set up our credentials and our scopes for the APIs that we wanna use. The first value is the API key, which we can find directly in the Firebase console if you go to project settings.
Then the second value is your OAuth client ID, which you can find in a variety of places, but you'll wanna go to the Google Cloud Platform Console for this one. You can go to the Console and then find it under the APIs and Services tab. It's going to be your web OAuth 2 client ID.
google
When you see that, you wanna go ahead and click on it, which will take you to this page. And you'll want to update the authorized JavaScript origins to local host 4200 or whatever local port you're working on.
The 3rd argument is an array of discovery docs. There are so many different APIs at Google that they can't all be in a single package. So you pass in the discovery docs for the APIs that you wanna use. In our case, we're using version 3 of Google Calendar. And lastly, you pass in the scopes that you want the user to grant permission to. Every API has different levels of permission that the user can grant access to.
google
In our case here, we want to fully manage the calendar. So we're gonna ask for the full calendar scope. But you should only request permission for the things that you only needs. So if you only needed to read the items, you should just request read only access. So that will initialize gappy in our project and manage the access tokens for us so we can easily make requests to this API when the user is authenticated. The last thing we'll need to do with the initialization is load in calendar version 3, and then we can console log when it's ready. If you've worked with Google OAuth and Firebase, you're probably used to writing your OAuth code with just 1 or 2 lines of code. Unfortunately, we're going to need to increase that code to about 5 lines. Instead of using Firebase to log in initially, we'll call gappy auth2 GetAuthInstance, and then we'll say await Google auth sign in. This is pretty much identical to doing sign in with pop up with the Firebase SDK. It creates a JSON Web Token that logs the user into client app which we can then access by saying get auth response dot ID token. At this point, the user is logged into Google, but they're not logged into Firebase. Firebase has a way to sign in manually when you already have a JSON Web Token, which we can do by calling Google auth provider dot credential and pass in that token. Then we can use that to sign the user into Firebase by calling AngularFire auth, sign in and retrieve data with credential and pass in the credential. In the main article, I'll show you an alternate approach where you log the user into Firebase first and then set up the scopes from there. But then you have to manage your own tokens manually, which tends to be a lot more work overall. From here, we'll go ahead and add a logout method really quick. And now we're ready to start making API calls to Google Calendar. Gappy is promise based, so we can set this up as an async function. And we'll call gappy client calendar events dot list. And and, again, because we don't have the strong type, we'll have to look at the API docs manually. But we're really just looking at a handful of arguments here to get the items from the calendar that we want. So here, we're requesting the primary calendar, all events that start in the future, and we'll order them by start time. I'd recommend console logging the response so you can see what the actual data payload looks like. In this case, the actual calendar items we want to show in the UI are found on events dot result items. So once the user is logged in, all they have to do is trigger this Get Calendar method and that will return the events from their calendar. Because we requested the full calendar scope we have full CRUD access to their calendar. Before I write this method, I'm first going to set up a helper function called hoursFromNow that takes a number as its argument and then returns the number of hours in the future as an ISO string. You probably don't need it, but I'm just using it to make our code a little bit more readable. To add a new event, we'll call gappy client calendar events insert.
And then we have a whole bunch of different options that we can use here to format the actual calendar event. It will go on the primary calendar, and then we'll have a start object that has a date time and then also a time zone, and then of course an end time.
holidays
And lastly, we'll add a summary and a description to give it some interesting content. Then as a final touch, whenever we insert an event, we'll then retrieve our calendar events again which resets on the service, so it'll look like the event updates in real time on our UI.
So that takes care of all the hard work. Now let's go into our App component and put this service to use. The first thing you wanna do is inject the auth service in the component constructor. And you'll actually wanna make it a public property even though it says private here in the source code.
infrastructure
From here, it's just a matter of adding a little bit of markup to show our user and the calendar items. We can unwrap the user observable by doing n g if followed by auth.userasync. And then we'll set it as a template variable called user. That provides their cool plus information like the photo URL and their display name. All the other methods can be treated as event handlers. So we'll just let the user click buttons to log in and make calls to their Google Calendar API. And lastly, our calendar items are an array on the Service, so we can loop over those with NG 4 and they're already unwrapped so we don't need to use the async pipe here.
And that will give you a whole bunch of data for each item which you can inspect in the console. If you followed along with the code, you should see a response object in the console. It's all the data that's returned from the Google API including the items on that user's calendar. So now you know how to get a hold of a Google Calendar that's owned by a Firebase user, but more importantly you know how to use the Google API client library to access all of the hundreds of different APIs offered by Google. I'm gonna go ahead and wrap things up there. If this video helped you please like and Khryib, and if you're serious about building a product, consider becoming a pro member at angularfirebase.com. You'll get unlimited access to all premium content, which includes multiple full courses and a full length book as well as 1 on 1 project support to help you get your app built and shipped faster.
google
youtube
data
Thanks for watching, and I'll talk to you soon.
There are literally hundreds of different APIs available under the Google umbrella. Things like Drive, Calendar, Google Cloud Platform, Maps, and YouTube, just to name a few. But when you log in a user Firebase. You only get access to a limited set of read only data like their Google plus profile. In today's video, you'll learn how to work with the Google Calendar API on the behalf Hubba user but more importantly you'll learn how to expand the scope of Firebase Auth to work with virtually any other Google API. If you're new here like and subscribe Cribe and there will be a one of a kind shirt giveaway with this video. All you have to do is leave a comment below letting me know which Google API you want to see covered next. And I'll randomly pick a winner via live cream tomorrow. Let's start things off by taking a look at what we're actually building today. It's currently Saturday night and I don't have anything additional on my calendar for today. But if we skip ahead to Monday, you'll see that I have a handful of appointments. The goal of this lesson is for you to be able to log in a user with Firebase and then programmatically update or read items in the calendar. The inspiration for this video comes from a real life tour operator based in New York City. After they sign up, they need to build out a complex itinerary for their trip. Now there's actually a couple different ways you can go about this, but I'm gonna show you the approach that I think is most developer friendly and flexible. As you can see here, when we log in, it looks exactly like we're logging in with Firebase and the Google auth provider. But that's actually not what happened. Instead, we use the Google services JavaScript library 2 sign in. That gave us a JSON Web Token that we could then pass off to Firebase to log in as a Firebase user. The reason we do this is because we're going to use the Google Services Library to make API requests to the Calendar API, and it will automatically manage our access tokens so we can do everything from the front end. Then once we're logged in, we can retrieve this user's Google Calendar by simply making a call to that API. So the data we're looking at here in the UI are actually Events from my Google Calendar. In addition to reading the data, we can also create, update, and delete data. For example, if I click this Add Event button, it's sending an insert request to the API and adds a new item to my calendar. So now I know to stop working and have some fun about an hour from now. But first, we need to write some code. I'm working from an Angular app and assuming that you have AngularFire installed. But even if you're working with a different framework that processes still very similar. The only thing we need is Firebase Auth. We don't need to save anything in our back end database or do anything with Cloud Functions. The next thing we'll need to do is set up a script to initialize the Google API client. Instead of using the Angular HTTP client, we'll use the Google APIs client, which will automatically handle all of the access token stuff for us. And the script is pretty lightweight if you're worried about performance. The next thing we'll do is set up an authentication service that will log in the user and make request to the API. Inside the service, we'll import AngularFire auth and also auth from the main Firebase SDK. H then we'll need to declare a global variable for gappy or Google API. It is possible to strong type this and I'll show you how in the main article, but they're community maintained types and I think they're screwed up for Google Calendar. So I'm going to just leave them out altogether for this video. So you wanna use the Google Calendar API reference as the main source of truth for your documentation. The next thing we'll do in our service is set up a user property which is an observable of the Firebase user. And we'll also declare the calendar items that we wanna use in the UI here which is an array of objects. Checks. From there, we can inject AngularFire auth in the constructor. This is where we will initialize gappy, and then we'll define our user as the AngularFire auth state. I'm going to write a net client as its own method. And the first thing that you do is you initialize or load the main client library. Then you'll initialize the client libraries that you want to use, which, in our case, it will be authentication version 2 and Google Calendar version 3. This is the point where we'll set up our credentials and our scopes for the APIs that we wanna use. The first value is the API key, which we can find directly in the Firebase console if you go to project settings. Then the second value is your OAuth client ID, which you can find in a variety of places, but you'll wanna go to the Google Cloud Platform Console for this one. You can go to the Console and then find it under the APIs and Services tab. It's going to be your web OAuth 2 client ID. When you see that, you wanna go ahead and click on it, which will take you to this page. And you'll want to update the authorized JavaScript origins to local host 4200 or whatever local port you're working on. The 3rd argument is an array of discovery docs. There are so many different APIs at Google that they can't all be in a single package. So you pass in the discovery docs for the APIs that you wanna use. In our case, we're using version 3 of Google Calendar. And lastly, you pass in the scopes that you want the user to grant permission to. Every API has different levels of permission that the user can grant access to. In our case here, we want to fully manage the calendar. So we're gonna ask for the full calendar scope. But you should only request permission for the things that you only needs. So if you only needed to read the items, you should just request read only access. So that will initialize gappy in our project and manage the access tokens for us so we can easily make requests to this API when the user is authenticated. The last thing we'll need to do with the initialization is load in calendar version 3, and then we can console log when it's ready. If you've worked with Google OAuth and Firebase, you're probably used to writing your OAuth code with just 1 or 2 lines of code. Unfortunately, we're going to need to increase that code to about 5 lines. Instead of using Firebase to log in initially, we'll call gappy auth2 GetAuthInstance, and then we'll say await Google auth sign in. This is pretty much identical to doing sign in with pop up with the Firebase SDK. It creates a JSON Web Token that logs the user into client app which we can then access by saying get auth response dot ID token. At this point, the user is logged into Google, but they're not logged into Firebase. Firebase has a way to sign in manually when you already have a JSON Web Token, which we can do by calling Google auth provider dot credential and pass in that token. Then we can use that to sign the user into Firebase by calling AngularFire auth, sign in and retrieve data with credential and pass in the credential. In the main article, I'll show you an alternate approach where you log the user into Firebase first and then set up the scopes from there. But then you have to manage your own tokens manually, which tends to be a lot more work overall. From here, we'll go ahead and add a logout method really quick. And now we're ready to start making API calls to Google Calendar. Gappy is promise based, so we can set this up as an async function. And we'll call gappy client calendar events dot list. And and, again, because we don't have the strong type, we'll have to look at the API docs manually. But we're really just looking at a handful of arguments here to get the items from the calendar that we want. So here, we're requesting the primary calendar, all events that start in the future, and we'll order them by start time. I'd recommend console logging the response so you can see what the actual data payload looks like. In this case, the actual calendar items we want to show in the UI are found on events dot result items. So once the user is logged in, all they have to do is trigger this Get Calendar method and that will return the events from their calendar. Because we requested the full calendar scope we have full CRUD access to their calendar. Before I write this method, I'm first going to set up a helper function called hoursFromNow that takes a number as its argument and then returns the number of hours in the future as an ISO string. You probably don't need it, but I'm just using it to make our code a little bit more readable. To add a new event, we'll call gappy client calendar events insert. And then we have a whole bunch of different options that we can use here to format the actual calendar event. It will go on the primary calendar, and then we'll have a start object that has a date time and then also a time zone, and then of course an end time. And lastly, we'll add a summary and a description to give it some interesting content. Then as a final touch, whenever we insert an event, we'll then retrieve our calendar events again which resets on the service, so it'll look like the event updates in real time on our UI. So that takes care of all the hard work. Now let's go into our App component and put this service to use. The first thing you wanna do is inject the auth service in the component constructor. And you'll actually wanna make it a public property even though it says private here in the source code. From here, it's just a matter of adding a little bit of markup to show our user and the calendar items. We can unwrap the user observable by doing n g if followed by auth.userasync. And then we'll set it as a template variable called user. That provides their cool plus information like the photo URL and their display name. All the other methods can be treated as event handlers. So we'll just let the user click buttons to log in and make calls to their Google Calendar API. And lastly, our calendar items are an array on the Service, so we can loop over those with NG 4 and they're already unwrapped so we don't need to use the async pipe here. And that will give you a whole bunch of data for each item which you can inspect in the console. If you followed along with the code, you should see a response object in the console. It's all the data that's returned from the Google API including the items on that user's calendar. So now you know how to get a hold of a Google Calendar that's owned by a Firebase user, but more importantly you know how to use the Google API client library to access all of the hundreds of different APIs offered by Google. I'm gonna go ahead and wrap things up there. If this video helped you please like and Khryib, and if you're serious about building a product, consider becoming a pro member at angularfirebase.com. You'll get unlimited access to all premium content, which includes multiple full courses and a full length book as well as 1 on 1 project support to help you get your app built and shipped faster. Thanks for watching, and I'll talk to you soon.
There
there
are
are
literally
literally
hundreds
hundreds
of
of
different
different
APIs
apis
available
available
under
under
the
the
Google
google
umbrella.
umbrella
Things
things
like
like
Drive,
drive
Calendar,
calendar
Google
google
Cloud
cloud
Platform,
platform
Maps,
maps
and
and
YouTube,
youtube
just
just
to
to
name
name
a
a
few.
few
But
but
when
when
you
you
log
log
in
in
a
a
user
user
Firebase.
firebase
You
you
only
only
get
get
access
access
to
to
a
a
limited
limited
set
set
of
of
read
read
only
only
data
data
like
like
their
their
Google
google
plus
plus
profile.
profile
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
how
how
to
to
work
work
with
with
the
the
Google
google
Calendar
calendar
API
api
on
on
the
the
behalf
behalf
Hubba
hubba
user
user
but
but
more
more
importantly
importantly
you'll
you'll
learn
learn
how
how
to
to
expand
expand
the
the
scope
scope
of
of
Firebase
firebase
Auth
auth
to
to
work
work
with
with
virtually
virtually
any
any
other
other
Google
google
API.
api
If
if
you're
you're
new
new
here
here
like
like
and
and
subscribe
subscribe
Cribe
cribe
and
and
there
there
will
will
be
be
a
a
one
one
of
of
a
a
kind
kind
shirt
shirt
giveaway
giveaway
with
with
this
this
video.
video
All
all
you
you
have
have
to
to
do
do
is
is
leave
leave
a
a
comment
comment
below
below
letting
letting
me
me
know
know
which
which
Google
google
API
api
you
you
want
want
to
to
see
see
covered
covered
next.
next
And
and
I'll
i'll
randomly
randomly
pick
pick
a
a
winner
winner
via
via
live
live
cream
cream
tomorrow.
tomorrow
Let's
let's
start
start
things
things
off
off
by
by
taking
taking
a
a
look
look
at
at
what
what
we're
we're
actually
actually
building
building
today.
today
It's
it's
currently
currently
Saturday
saturday
night
night
and
and
I
i
don't
don't
have
have
anything
anything
additional
additional
on
on
my
my
calendar
calendar
for
for
today.
today
But
but
if
if
we
we
skip
skip
ahead
ahead
to
to
Monday,
monday
you'll
you'll
see
see
that
that
I
i
have
have
a
a
handful
handful
of
of
appointments.
appointments
The
the
goal
goal
of
of
this
this
lesson
lesson
is
is
for
for
you
you
to
to
be
be
able
able
to
to
log
log
in
in
a
a
user
user
with
with
Firebase
firebase
and
and
then
then
programmatically
programmatically
update
update
or
or
read
read
items
items
in
in
the
the
calendar.
calendar
The
the
inspiration
inspiration
for
for
this
this
video
video
comes
comes
from
from
a
a
real
real
life
life
tour
tour
operator
operator
based
based
in
in
New
new
York
york
City.
city
After
after
they
they
sign
sign
up,
up
they
they
need
need
to
to
build
build
out
out
a
a
complex
complex
itinerary
itinerary
for
for
their
their
trip.
trip
Now
now
there's
there's
actually
actually
a
a
couple
couple
different
different
ways
ways
you
you
can
can
go
go
about
about
this,
this
but
but
I'm
i'm
gonna
gonna
show
show
you
you
the
the
approach
approach
that
that
I
i
think
think
is
is
most
most
developer
developer
friendly
friendly
and
and
flexible.
flexible
As
as
you
you
can
can
see
see
here,
here
when
when
we
we
log
log
in,
in
it
it
looks
looks
exactly
exactly
like
like
we're
we're
logging
logging
in
in
with
with
Firebase
firebase
and
and
the
the
Google
google
auth
auth
provider.
provider
But
but
that's
that's
actually
actually
not
not
what
what
happened.
happened
Instead,
instead
we
we
use
use
the
the
Google
google
services
services
JavaScript
javascript
library
library
2
2
sign
sign
in.
in
That
that
gave
gave
us
us
a
a
JSON
json
Web
web
Token
token
that
that
we
we
could
could
then
then
pass
pass
off
off
to
to
Firebase
firebase
to
to
log
log
in
in
as
as
a
a
Firebase
firebase
user.
user
The
the
reason
reason
we
we
do
do
this
this
is
is
because
because
we're
we're
going
going
to
to
use
use
the
the
Google
google
Services
services
Library
library
to
to
make
make
API
api
requests
requests
to
to
the
the
Calendar
calendar
API,
api
and
and
it
it
will
will
automatically
automatically
manage
manage
our
our
access
access
tokens
tokens
so
so
we
we
can
can
do
do
everything
everything
from
from
the
the
front
front
end.
end
Then
then
once
once
we're
we're
logged
logged
in,
in
we
we
can
can
retrieve
retrieve
this
this
user's
user's
Google
google
Calendar
calendar
by
by
simply
simply
making
making
a
a
call
call
to
to
that
that
API.
api
So
so
the
the
data
data
we're
we're
looking
looking
at
at
here
here
in
in
the
the
UI
ui
are
are
actually
actually
Events
events
from
from
my
my
Google
google
Calendar.
calendar
In
in
addition
addition
to
to
reading
reading
the
the
data,
data
we
we
can
can
also
also
create,
create
update,
update
and
and
delete
delete
data.
data
For
for
example,
example
if
if
I
i
click
click
this
this
Add
add
Event
event
button,
button
it's
it's
sending
sending
an
an
insert
insert
request
request
to
to
the
the
API
api
and
and
adds
adds
a
a
new
new
item
item
to
to
my
my
calendar.
calendar
So
so
now
now
I
i
know
know
to
to
stop
stop
working
working
and
and
have
have
some
some
fun
fun
about
about
an
an
hour
hour
from
from
now.
now
But
but
first,
first
we
we
need
need
to
to
write
write
some
some
code.
code
I'm
i'm
working
working
from
from
an
an
Angular
angular
app
app
and
and
assuming
assuming
that
that
you
you
have
have
AngularFire
angularfire
installed.
installed
But
but
even
even
if
if
you're
you're
working
working
with
with
a
a
different
different
framework
framework
that
that
processes
processes
still
still
very
very
similar.
similar
The
the
only
only
thing
thing
we
we
need
need
is
is
Firebase
firebase
Auth.
auth
We
we
don't
don't
need
need
to
to
save
save
anything
anything
in
in
our
our
back
back
end
end
database
database
or
or
do
do
anything
anything
with
with
Cloud
cloud
Functions.
functions
The
the
next
next
thing
thing
we'll
we'll
need
need
to
to
do
do
is
is
set
set
up
up
a
a
script
script
to
to
initialize
initialize
the
the
Google
google
API
api
client.
client
Instead
instead
of
of
using
using
the
the
Angular
angular
HTTP
http
client,
client
we'll
we'll
use
use
the
the
Google
google
APIs
apis
client,
client
which
which
will
will
automatically
automatically
handle
handle
all
all
of
of
the
the
access
access
token
token
stuff
stuff
for
for
us.
us
And
and
the
the
script
script
is
is
pretty
pretty
lightweight
lightweight
if
if
you're
you're
worried
worried
about
about
performance.
performance
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
set
set
up
up
an
an
authentication
authentication
service
service
that
that
will
will
log
log
in
in
the
the
user
user
and
and
make
make
request
request
to
to
the
the
API.
api
Inside
inside
the
the
service,
service
we'll
we'll
import
import
AngularFire
angularfire
auth
auth
and
and
also
also
auth
auth
from
from
the
the
main
main
Firebase
firebase
SDK.
sdk
H
h
then
then
we'll
we'll
need
need
to
to
declare
declare
a
a
global
global
variable
variable
for
for
gappy
gappy
or
or
Google
google
API.
api
It
it
is
is
possible
possible
to
to
strong
strong
type
type
this
this
and
and
I'll
i'll
show
show
you
you
how
how
in
in
the
the
main
main
article,
article
but
but
they're
they're
community
community
maintained
maintained
types
types
and
and
I
i
think
think
they're
they're
screwed
screwed
up
up
for
for
Google
google
Calendar.
calendar
So
so
I'm
i'm
going
going
to
to
just
just
leave
leave
them
them
out
out
altogether
altogether
for
for
this
this
video.
video
So
so
you
you
wanna
wanna
use
use
the
the
Google
google
Calendar
calendar
API
api
reference
reference
as
as
the
the
main
main
source
source
of
of
truth
truth
for
for
your
your
documentation.
documentation
The
the
next
next
thing
thing
we'll
we'll
do
do
in
in
our
our
service
service
is
is
set
set
up
up
a
a
user
user
property
property
which
which
is
is
an
an
observable
observable
of
of
the
the
Firebase
firebase
user.
user
And
and
we'll
we'll
also
also
declare
declare
the
the
calendar
calendar
items
items
that
that
we
we
wanna
wanna
use
use
in
in
the
the
UI
ui
here
here
which
which
is
is
an
an
array
array
of
of
objects.
objects
Checks.
checks
From
from
there,
there
we
we
can
can
inject
inject
AngularFire
angularfire
auth
auth
in
in
the
the
constructor.
constructor
This
this
is
is
where
where
we
we
will
will
initialize
initialize
gappy,
gappy
and
and
then
then
we'll
we'll
define
define
our
our
user
user
as
as
the
the
AngularFire
angularfire
auth
auth
state.
state
I'm
i'm
going
going
to
to
write
write
a
a
net
net
client
client
as
as
its
its
own
own
method.
method
And
and
the
the
first
first
thing
thing
that
that
you
you
do
do
is
is
you
you
initialize
initialize
or
or
load
load
the
the
main
main
client
client
library.
library
Then
then
you'll
you'll
initialize
initialize
the
the
client
client
libraries
libraries
that
that
you
you
want
want
to
to
use,
use
which,
which
in
in
our
our
case,
case
it
it
will
will
be
be
authentication
authentication
version
version
2
2
and
and
Google
google
Calendar
calendar
version
version
3.
3
This
this
is
is
the
the
point
point
where
where
we'll
we'll
set
set
up
up
our
our
credentials
credentials
and
and
our
our
scopes
scopes
for
for
the
the
APIs
apis
that
that
we
we
wanna
wanna
use.
use
The
the
first
first
value
value
is
is
the
the
API
api
key,
key
which
which
we
we
can
can
find
find
directly
directly
in
in
the
the
Firebase
firebase
console
console
if
if
you
you
go
go
to
to
project
project
settings.
settings
Then
then
the
the
second
second
value
value
is
is
your
your
OAuth
oauth
client
client
ID,
id
which
which
you
you
can
can
find
find
in
in
a
a
variety
variety
of
of
places,
places
but
but
you'll
you'll
wanna
wanna
go
go
to
to
the
the
Google
google
Cloud
cloud
Platform
platform
Console
console
for
for
this
this
one.
one
You
you
can
can
go
go
to
to
the
the
Console
console
and
and
then
then
find
find
it
it
under
under
the
the
APIs
apis
and
and
Services
services
tab.
tab
It's
it's
going
going
to
to
be
be
your
your
web
web
OAuth
oauth
2
2
client
client
ID.
id
When
when
you
you
see
see
that,
that
you
you
wanna
wanna
go
go
ahead
ahead
and
and
click
click
on
on
it,
it
which
which
will
will
take
take
you
you
to
to
this
this
page.
page
And
and
you'll
you'll
want
want
to
to
update
update
the
the
authorized
authorized
JavaScript
javascript
origins
origins
to
to
local
local
host
host
4200
4200
or
or
whatever
whatever
local
local
port
port
you're
you're
working
working
on.
on
The
the
3rd
3rd
argument
argument
is
is
an
an
array
array
of
of
discovery
discovery
docs.
docs
There
there
are
are
so
so
many
many
different
different
APIs
apis
at
at
Google
google
that
that
they
they
can't
can't
all
all
be
be
in
in
a
a
single
single
package.
package
So
so
you
you
pass
pass
in
in
the
the
discovery
discovery
docs
docs
for
for
the
the
APIs
apis
that
that
you
you
wanna
wanna
use.
use
In
in
our
our
case,
case
we're
we're
using
using
version
version
3
3
of
of
Google
google
Calendar.
calendar
And
and
lastly,
lastly
you
you
pass
pass
in
in
the
the
scopes
scopes
that
that
you
you
want
want
the
the
user
user
to
to
grant
grant
permission
permission
to.
to
Every
every
API
api
has
has
different
different
levels
levels
of
of
permission
permission
that
that
the
the
user
user
can
can
grant
grant
access
access
to.
to
In
in
our
our
case
case
here,
here
we
we
want
want
to
to
fully
fully
manage
manage
the
the
calendar.
calendar
So
so
we're
we're
gonna
gonna
ask
ask
for
for
the
the
full
full
calendar
calendar
scope.
scope
But
but
you
you
should
should
only
only
request
request
permission
permission
for
for
the
the
things
things
that
that
you
you
only
only
needs.
needs
So
so
if
if
you
you
only
only
needed
needed
to
to
read
read
the
the
items,
items
you
you
should
should
just
just
request
request
read
read
only
only
access.
access
So
so
that
that
will
will
initialize
initialize
gappy
gappy
in
in
our
our
project
project
and
and
manage
manage
the
the
access
access
tokens
tokens
for
for
us
us
so
so
we
we
can
can
easily
easily
make
make
requests
requests
to
to
this
this
API
api
when
when
the
the
user
user
is
is
authenticated.
authenticated
The
the
last
last
thing
thing
we'll
we'll
need
need
to
to
do
do
with
with
the
the
initialization
initialization
is
is
load
load
in
in
calendar
calendar
version
version
3,
3
and
and
then
then
we
we
can
can
console
console
log
log
when
when
it's
it's
ready.
ready
If
if
you've
you've
worked
worked
with
with
Google
google
OAuth
oauth
and
and
Firebase,
firebase
you're
you're
probably
probably
used
used
to
to
writing
writing
your
your
OAuth
oauth
code
code
with
with
just
just
1
1
or
or
2
2
lines
lines
of
of
code.
code
Unfortunately,
unfortunately
we're
we're
going
going
to
to
need
need
to
to
increase
increase
that
that
code
code
to
to
about
about
5
5
lines.
lines
Instead
instead
of
of
using
using
Firebase
firebase
to
to
log
log
in
in
initially,
initially
we'll
we'll
call
call
gappy
gappy
auth2
auth2
GetAuthInstance,
getauthinstance
and
and
then
then
we'll
we'll
say
say
await
await
Google
google
auth
auth
sign
sign
in.
in
This
this
is
is
pretty
pretty
much
much
identical
identical
to
to
doing
doing
sign
sign
in
in
with
with
pop
pop
up
up
with
with
the
the
Firebase
firebase
SDK.
sdk
It
it
creates
creates
a
a
JSON
json
Web
web
Token
token
that
that
logs
logs
the
the
user
user
into
into
client
client
app
app
which
which
we
we
can
can
then
then
access
access
by
by
saying
saying
get
get
auth
auth
response
response
dot
dot
ID
id
token.
token
At
at
this
this
point,
point
the
the
user
user
is
is
logged
logged
into
into
Google,
google
but
but
they're
they're
not
not
logged
logged
into
into
Firebase.
firebase
Firebase
firebase
has
has
a
a
way
way
to
to
sign
sign
in
in
manually
manually
when
when
you
you
already
already
have
have
a
a
JSON
json
Web
web
Token,
token
which
which
we
we
can
can
do
do
by
by
calling
calling
Google
google
auth
auth
provider
provider
dot
dot
credential
credential
and
and
pass
pass
in
in
that
that
token.
token
Then
then
we
we
can
can
use
use
that
that
to
to
sign
sign
the
the
user
user
into
into
Firebase
firebase
by
by
calling
calling
AngularFire
angularfire
auth,
auth
sign
sign
in
in
and
and
retrieve
retrieve
data
data
with
with
credential
credential
and
and
pass
pass
in
in
the
the
credential.
credential
In
in
the
the
main
main
article,
article
I'll
i'll
show
show
you
you
an
an
alternate
alternate
approach
approach
where
where
you
you
log
log
the
the
user
user
into
into
Firebase
firebase
first
first
and
and
then
then
set
set
up
up
the
the
scopes
scopes
from
from
there.
there
But
but
then
then
you
you
have
have
to
to
manage
manage
your
your
own
own
tokens
tokens
manually,
manually
which
which
tends
tends
to
to
be
be
a
a
lot
lot
more
more
work
work
overall.
overall
From
from
here,
here
we'll
we'll
go
go
ahead
ahead
and
and
add
add
a
a
logout
logout
method
method
really
really
quick.
quick
And
and
now
now
we're
we're
ready
ready
to
to
start
start
making
making
API
api
calls
calls
to
to
Google
google
Calendar.
calendar
Gappy
gappy
is
is
promise
promise
based,
based
so
so
we
we
can
can
set
set
this
this
up
up
as
as
an
an
async
async
function.
function
And
and
we'll
we'll
call
call
gappy
gappy
client
client
calendar
calendar
events
events
dot
dot
list.
list
And
and
and,
and
again,
again
because
because
we
we
don't
don't
have
have
the
the
strong
strong
type,
type
we'll
we'll
have
have
to
to
look
look
at
at
the
the
API
api
docs
docs
manually.
manually
But
but
we're
we're
really
really
just
just
looking
looking
at
at
a
a
handful
handful
of
of
arguments
arguments
here
here
to
to
get
get
the
the
items
items
from
from
the
the
calendar
calendar
that
that
we
we
want.
want
So
so
here,
here
we're
we're
requesting
requesting
the
the
primary
primary
calendar,
calendar
all
all
events
events
that
that
start
start
in
in
the
the
future,
future
and
and
we'll
we'll
order
order
them
them
by
by
start
start
time.
time
I'd
i'd
recommend
recommend
console
console
logging
logging
the
the
response
response
so
so
you
you
can
can
see
see
what
what
the
the
actual
actual
data
data
payload
payload
looks
looks
like.
like
In
in
this
this
case,
case
the
the
actual
actual
calendar
calendar
items
items
we
we
want
want
to
to
show
show
in
in
the
the
UI
ui
are
are
found
found
on
on
events
events
dot
dot
result
result
items.
items
So
so
once
once
the
the
user
user
is
is
logged
logged
in,
in
all
all
they
they
have
have
to
to
do
do
is
is
trigger
trigger
this
this
Get
get
Calendar
calendar
method
method
and
and
that
that
will
will
return
return
the
the
events
events
from
from
their
their
calendar.
calendar
Because
because
we
we
requested
requested
the
the
full
full
calendar
calendar
scope
scope
we
we
have
have
full
full
CRUD
crud
access
access
to
to
their
their
calendar.
calendar
Before
before
I
i
write
write
this
this
method,
method
I'm
i'm
first
first
going
going
to
to
set
set
up
up
a
a
helper
helper
function
function
called
called
hoursFromNow
hoursfromnow
that
that
takes
takes
a
a
number
number
as
as
its
its
argument
argument
and
and
then
then
returns
returns
the
the
number
number
of
of
hours
hours
in
in
the
the
future
future
as
as
an
an
ISO
iso
string.
string
You
you
probably
probably
don't
don't
need
need
it,
it
but
but
I'm
i'm
just
just
using
using
it
it
to
to
make
make
our
our
code
code
a
a
little
little
bit
bit
more
more
readable.
readable
To
to
add
add
a
a
new
new
event,
event
we'll
we'll
call
call
gappy
gappy
client
client
calendar
calendar
events
events
insert.
insert
And
and
then
then
we
we
have
have
a
a
whole
whole
bunch
bunch
of
of
different
different
options
options
that
that
we
we
can
can
use
use
here
here
to
to
format
format
the
the
actual
actual
calendar
calendar
event.
event
It
it
will
will
go
go
on
on
the
the
primary
primary
calendar,
calendar
and
and
then
then
we'll
we'll
have
have
a
a
start
start
object
object
that
that
has
has
a
a
date
date
time
time
and
and
then
then
also
also
a
a
time
time
zone,
zone
and
and
then
then
of
of
course
course
an
an
end
end
time.
time
And
and
lastly,
lastly
we'll
we'll
add
add
a
a
summary
summary
and
and
a
a
description
description
to
to
give
give
it
it
some
some
interesting
interesting
content.
content
Then
then
as
as
a
a
final
final
touch,
touch
whenever
whenever
we
we
insert
insert
an
an
event,
event
we'll
we'll
then
then
retrieve
retrieve
our
our
calendar
calendar
events
events
again
again
which
which
resets
resets
on
on
the
the
service,
service
so
so
it'll
it'll
look
look
like
like
the
the
event
event
updates
updates
in
in
real
real
time
time
on
on
our
our
UI.
ui
So
so
that
that
takes
takes
care
care
of
of
all
all
the
the
hard
hard
work.
work
Now
now
let's
let's
go
go
into
into
our
our
App
app
component
component
and
and
put
put
this
this
service
service
to
to
use.
use
The
the
first
first
thing
thing
you
you
wanna
wanna
do
do
is
is
inject
inject
the
the
auth
auth
service
service
in
in
the
the
component
component
constructor.
constructor
And
and
you'll
you'll
actually
actually
wanna
wanna
make
make
it
it
a
a
public
public
property
property
even
even
though
though
it
it
says
says
private
private
here
here
in
in
the
the
source
source
code.
code
From
from
here,
here
it's
it's
just
just
a
a
matter
matter
of
of
adding
adding
a
a
little
little
bit
bit
of
of
markup
markup
to
to
show
show
our
our
user
user
and
and
the
the
calendar
calendar
items.
items
We
we
can
can
unwrap
unwrap
the
the
user
user
observable
observable
by
by
doing
doing
n
n
g
g
if
if
followed
followed
by
by
auth.userasync.
auth.userasync
And
and
then
then
we'll
we'll
set
set
it
it
as
as
a
a
template
template
variable
variable
called
called
user.
user
That
that
provides
provides
their
their
cool
cool
plus
plus
information
information
like
like
the
the
photo
photo
URL
url
and
and
their
their
display
display
name.
name
All
all
the
the
other
other
methods
methods
can
can
be
be
treated
treated
as
as
event
event
handlers.
handlers
So
so
we'll
we'll
just
just
let
let
the
the
user
user
click
click
buttons
buttons
to
to
log
log
in
in
and
and
make
make
calls
calls
to
to
their
their
Google
google
Calendar
calendar
API.
api
And
and
lastly,
lastly
our
our
calendar
calendar
items
items
are
are
an
an
array
array
on
on
the
the
Service,
service
so
so
we
we
can
can
loop
loop
over
over
those
those
with
with
NG
ng
4
4
and
and
they're
they're
already
already
unwrapped
unwrapped
so
so
we
we
don't
don't
need
need
to
to
use
use
the
the
async
async
pipe
pipe
here.
here
And
and
that
that
will
will
give
give
you
you
a
a
whole
whole
bunch
bunch
of
of
data
data
for
for
each
each
item
item
which
which
you
you
can
can
inspect
inspect
in
in
the
the
console.
console
If
if
you
you
followed
followed
along
along
with
with
the
the
code,
code
you
you
should
should
see
see
a
a
response
response
object
object
in
in
the
the
console.
console
It's
it's
all
all
the
the
data
data
that's
that's
returned
returned
from
from
the
the
Google
google
API
api
including
including
the
the
items
items
on
on
that
that
user's
user's
calendar.
calendar
So
so
now
now
you
you
know
know
how
how
to
to
get
get
a
a
hold
hold
of
of
a
a
Google
google
Calendar
calendar
that's
that's
owned
owned
by
by
a
a
Firebase
firebase
user,
user
but
but
more
more
importantly
importantly
you
you
know
know
how
how
to
to
use
use
the
the
Google
google
API
api
client
client
library
library
to
to
access
access
all
all
of
of
the
the
hundreds
hundreds
of
of
different
different
APIs
apis
offered
offered
by
by
Google.
google
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you
you
please
please
like
like
and
and
Khryib,
khryib
and
and
if
if
you're
you're
serious
serious
about
about
building
building
a
a
product,
product
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
unlimited
unlimited
access
access
to
to
all
all
premium
premium
content,
content
which
which
includes
includes
multiple
multiple
full
full
courses
courses
and
and
a
a
full
full
length
length
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
support
support
to
to
help
help
you
you
get
get
your
your
app
app
built
built
and
and
shipped
shipped
faster.
faster
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The Google Calendar API on Hubba's calendar app provides a detailed overview of the process, including setting up a script to encode the API and updating the authorized JavaScript origins. The speaker explains how to set up a user property and update the authorized JavaScript origins, while also discussing logging into Google Calendar and setting up scopes for API calls. They also mention managing access to the calendar and using the Google API client library to set up a helper function and retrieve data from Google Calendar. The speaker goes into the App component and explains how to inject the denies service in the component and offer a full course and book for faster development.
Google Calendar + Firebase Auth
There are literally hundreds of different APIs available under the Google umbrella. Things like Drive, Calendar, Google Cloud Platform, Maps, and YouTube, just to name a few. But when you log in a user Firebase. You only get access to a limited set of read only data like their Google plus profile. In today's video, you'll learn how to work with the Google Calendar API on the behalf Hubba user but more importantly you'll learn how to expand the scope of Firebase Auth to work with virtually any other Google API. If you're new here like and subscribe Cribe and there will be a one of a kind shirt giveaway with this video. All you have to do is leave a comment below letting me know which Google API you want to see covered next. And I'll randomly pick a winner via live cream tomorrow. Let's start things off by taking a look at what we're actually building today. It's currently Saturday night and I don't have anything additional on my calendar for today. But if we skip ahead to Monday, you'll see that I have a handful of appointments. The goal of this lesson is for you to be able to log in a user with Firebase and then programmatically update or read items in the calendar. The inspiration for this video comes from a real life tour operator based in New York City. After they sign up, they need to build out a complex itinerary for their trip. Now there's actually a couple different ways you can go about this, but I'm gonna show you the approach that I think is most developer friendly and flexible. As you can see here, when we log in, it looks exactly like we're logging in with Firebase and the Google auth provider. But that's actually not what happened. Instead, we use the Google services JavaScript library 2 sign in. That gave us a JSON Web Token that we could then pass off to Firebase to log in as a Firebase user. The reason we do this is because we're going to use the Google Services Library to make API requests to the Calendar API, and it will automatically manage our access tokens so we can do everything from the front end. Then once we're logged in, we can retrieve this user's Google Calendar by simply making a call to that API. So the data we're looking at here in the UI are actually Events from my Google Calendar. In addition to reading the data, we can also create, update, and delete data. For example, if I click this Add Event button, it's sending an insert request to the API and adds a new item to my calendar. So now I know to stop working and have some fun about an hour from now. But first, we need to write some code. I'm working from an Angular app and assuming that you have AngularFire installed. But even if you're working with a different framework that processes still very similar. The only thing we need is Firebase Auth. We don't need to save anything in our back end database or do anything with Cloud Functions. The next thing we'll need to do is set up a script to initialize the Google API client. Instead of using the Angular HTTP client, we'll use the Google APIs client, which will automatically handle all of the access token stuff for us. And the script is pretty lightweight if you're worried about performance. The next thing we'll do is set up an authentication service that will log in the user and make request to the API. Inside the service, we'll import AngularFire auth and also auth from the main Firebase SDK. H then we'll need to declare a global variable for gappy or Google API. It is possible to strong type this and I'll show you how in the main article, but they're community maintained types and I think they're screwed up for Google Calendar. So I'm going to just leave them out altogether for this video. So you wanna use the Google Calendar API reference as the main source of truth for your documentation. The next thing we'll do in our service is set up a user property which is an observable of the Firebase user. And we'll also declare the calendar items that we wanna use in the UI here which is an array of objects. Checks. From there, we can inject AngularFire auth in the constructor. This is where we will initialize gappy, and then we'll define our user as the AngularFire auth state. I'm going to write a net client as its own method. And the first thing that you do is you initialize or load the main client library. Then you'll initialize the client libraries that you want to use, which, in our case, it will be authentication version 2 and Google Calendar version 3. This is the point where we'll set up our credentials and our scopes for the APIs that we wanna use. The first value is the API key, which we can find directly in the Firebase console if you go to project settings. Then the second value is your OAuth client ID, which you can find in a variety of places, but you'll wanna go to the Google Cloud Platform Console for this one. You can go to the Console and then find it under the APIs and Services tab. It's going to be your web OAuth 2 client ID. When you see that, you wanna go ahead and click on it, which will take you to this page. And you'll want to update the authorized JavaScript origins to local host 4200 or whatever local port you're working on. The 3rd argument is an array of discovery docs. There are so many different APIs at Google that they can't all be in a single package. So you pass in the discovery docs for the APIs that you wanna use. In our case, we're using version 3 of Google Calendar. And lastly, you pass in the scopes that you want the user to grant permission to. Every API has different levels of permission that the user can grant access to. In our case here, we want to fully manage the calendar. So we're gonna ask for the full calendar scope. But you should only request permission for the things that you only needs. So if you only needed to read the items, you should just request read only access. So that will initialize gappy in our project and manage the access tokens for us so we can easily make requests to this API when the user is authenticated. The last thing we'll need to do with the initialization is load in calendar version 3, and then we can console log when it's ready. If you've worked with Google OAuth and Firebase, you're probably used to writing your OAuth code with just 1 or 2 lines of code. Unfortunately, we're going to need to increase that code to about 5 lines. Instead of using Firebase to log in initially, we'll call gappy auth2 GetAuthInstance, and then we'll say await Google auth sign in. This is pretty much identical to doing sign in with pop up with the Firebase SDK. It creates a JSON Web Token that logs the user into client app which we can then access by saying get auth response dot ID token. At this point, the user is logged into Google, but they're not logged into Firebase. Firebase has a way to sign in manually when you already have a JSON Web Token, which we can do by calling Google auth provider dot credential and pass in that token. Then we can use that to sign the user into Firebase by calling AngularFire auth, sign in and retrieve data with credential and pass in the credential. In the main article, I'll show you an alternate approach where you log the user into Firebase first and then set up the scopes from there. But then you have to manage your own tokens manually, which tends to be a lot more work overall. From here, we'll go ahead and add a logout method really quick. And now we're ready to start making API calls to Google Calendar. Gappy is promise based, so we can set this up as an async function. And we'll call gappy client calendar events dot list. And and, again, because we don't have the strong type, we'll have to look at the API docs manually. But we're really just looking at a handful of arguments here to get the items from the calendar that we want. So here, we're requesting the primary calendar, all events that start in the future, and we'll order them by start time. I'd recommend console logging the response so you can see what the actual data payload looks like. In this case, the actual calendar items we want to show in the UI are found on events dot result items. So once the user is logged in, all they have to do is trigger this Get Calendar method and that will return the events from their calendar. Because we requested the full calendar scope we have full CRUD access to their calendar. Before I write this method, I'm first going to set up a helper function called hoursFromNow that takes a number as its argument and then returns the number of hours in the future as an ISO string. You probably don't need it, but I'm just using it to make our code a little bit more readable. To add a new event, we'll call gappy client calendar events insert. And then we have a whole bunch of different options that we can use here to format the actual calendar event. It will go on the primary calendar, and then we'll have a start object that has a date time and then also a time zone, and then of course an end time. And lastly, we'll add a summary and a description to give it some interesting content. Then as a final touch, whenever we insert an event, we'll then retrieve our calendar events again which resets on the service, so it'll look like the event updates in real time on our UI. So that takes care of all the hard work. Now let's go into our App component and put this service to use. The first thing you wanna do is inject the auth service in the component constructor. And you'll actually wanna make it a public property even though it says private here in the source code. From here, it's just a matter of adding a little bit of markup to show our user and the calendar items. We can unwrap the user observable by doing n g if followed by auth.userasync. And then we'll set it as a template variable called user. That provides their cool plus information like the photo URL and their display name. All the other methods can be treated as event handlers. So we'll just let the user click buttons to log in and make calls to their Google Calendar API. And lastly, our calendar items are an array on the Service, so we can loop over those with NG 4 and they're already unwrapped so we don't need to use the async pipe here. And that will give you a whole bunch of data for each item which you can inspect in the console. If you followed along with the code, you should see a response object in the console. It's all the data that's returned from the Google API including the items on that user's calendar. So now you know how to get a hold of a Google Calendar that's owned by a Firebase user, but more importantly you know how to use the Google API client library to access all of the hundreds of different APIs offered by Google. I'm gonna go ahead and wrap things up there. If this video helped you please like and Khryib, and if you're serious about building a product, consider becoming a pro member at angularfirebase.com. You'll get unlimited access to all premium content, which includes multiple full courses and a full length book as well as 1 on 1 project support to help you get your app built and shipped faster. Thanks for watching, and I'll talk to you soon.
The Google Calendar API on Hubba's calendar app provides a detailed overview of the process, including setting up a script to encode the API and updating the authorized JavaScript origins. The speaker explains how to set up a user property and update the authorized JavaScript origins, while also discussing logging into Google Calendar and setting up scopes for API calls. They also mention managing access to the calendar and using the Google API client library to set up a helper function and retrieve data from Google Calendar. The speaker goes into the App component and explains how to inject the denies service in the component and offer a full course and book for faster development.