Learn how to mint custom auth tokens in Firebase and interact with the Coinbase crypto currency API. Give your Angular app a foundation making bitcoin transactions. https://angularfirebase.com/lessons/coinbase-bitcoin-oauth-firebase-cloud-function/

- Coinbase API - https://developers.coinbase.com/
- Firebase Custom Tokens - https://firebase.google.com/docs/auth/admin/create-custom-tokens
- Angular 5 - https://angular.io/
2024-02-04T07:51:14.061Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
cf1b7c3c-4313-4f98-8be5-5749e15436d1
adf8d10c6a1f5e6ba3ec592c94ea67beea7de43b22a35c93f3e8a792ca8c17fb
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
It might be a little late to get in on the Bitcoin bubble, but it's not too late to start building apps for people that use cryptocurrencies.
In this episode, I'm going to show you how to use Coinbase as a custom authentication provider for Firebase.
That means your users will be able to log in to Firebase via Coinbase, and then you can use the Coinbase API to handle Bitcoin transactions.
Auth.
If you're new here, make sure to subscribe, and you can follow along with the source code at angularfirebase.com.
Let's first take a look at how this is going to work.
The user is going to click the log in with Coinbase button in our Angular app that redirects them to Coinbase where they authenticate into their account, then Coinbase redirects them back to Angular with an encrypted auth code.
The code then goes to a Cloud function, which exchanges it for an actual access token and refresh token from Coinbase.
We can then mint our own custom Firebase authentication token, then send it back to Angular and log the user in as a Firebase user.
Learning this process will also allow you to authenticate with other providers such as Instagram, Twitch, Spotify, and many others.
To get started, you'll need a Coinbase account, and you'll wanna create a new OAuth 2 application.
Make note of your API keys, and then make sure you set a redirect URI that points to local host 4200 slash redirect.
O.
After that, you can create a brand new Angular 5 app and make sure it has the routing module.
From there, you'll need to install AngularFire 2 and Firebase, so make sure to follow the official instructions at the AngularFire repo.
Now inside of our Angular project, we're going to initialize Cloud Functions.
We're also going to use the new TypeScript option, so make sure your Firebase CLI tools are updated to the latest version.
I also have a few dependencies in the Cloud Function environment.
The main one is Axios, which replaces the node HTTP module.
The reason we do that is because promises are a lot easier to work with than callbacks when dealing with asynchronous activity in a Cloud function.
Then I also have cores and crypto, which we'll see in use here in just a second.
Because we're going to be minting custom auth tokens, we need to use our actual service account from Firebase.
It's just a JSON file, and I'll quickly show you in Firebase where you can find it.
Go to project settings, then service account, and then download a new private key for Node.
Js.
Then you can go ahead and save it inside the functions directory.
Auth.
This file contains sensitive API keys, so make sure not to expose them in your front end code or any kind of public Git repository.
After that, we'll go ahead and import our dependencies and then initialize CORS with origin true.
I'm only testing these functions locally.
So for right now, I'm setting the redirect URI to local host 4200 slash redirect.
I'm also setting variables for the Coinbase API keys, and make sure you follow these variable names because they're going to be reformatted as query parameters later on.
Because they're going to be reused frequently, I'm setting them as a default params object here.
Now we're ready to write the first actual Cloud function which is called redirect.
The only thing it needs to do is properly format a URL and then redirect the user to that point so so they can authenticate into their Coinbase account.
A useful trick is to put all of these parameters in an object and then use query string stringify to add them to the URL.
It'll make your code a lot more readable and maintainable.
The scope parameter is the interesting one.
That'll tell us the permission level that we have on the user's account, which in this case will be able to read that user's wallet.
And you can get additional details on each of these parameters from the Coinbase docs.
So So now we're gonna switch gears into Angular and we'll see how we can trigger this redirect URL.
First, I'm going to generate a component for the user details, then I'll generate another to handle the auth redirect, and I'll generate a service so we can share some functionality between components.
Let's go ahead and start in the auth service where we import AngularFireAuth.
Then in the constructor, we will observe the auth state from Firebase.
So the user observable is the current user from Firebase.
What I do next here is considered a bad practice in Angular, but I'm doing it to keep this demo simple.
I'm opening a pop up window that points to our redirect cloud function.
The proper way to do this is to wrap the window in its own service so you can use it in non browser environment such as on the server or in a mobile app.
There's still a lot of code to get through, so I'm just going to cheat a little bit on this one.
Auth.
So that's going to open the pop up, and then once we actually have the minted token from Firebase, we're going to call sign in with custom token from AngularFireAuth.
Auth.
This method just allows you to sign in with your own custom minted token.
And once signed in, we'll just go ahead and cheat again and call window close to close the pop up.
Before we jump into the components, I'm going to go into the app routing module, and you can see we have the user details component on the root path and then we have auth redirect component at the redirect path.
That path should match the redirect URI you set up in Coinbase.
Auth, then we'll jump over to the user details component.
And right now, all this needs to do is inject the auth service and then we'll unwrap that user observable in the HTML.
Model.
Later on, we'll get the user's Bitcoin wallet, but for now, we're not going to worry about that.
In the HTML, we can unwrap the user observable.
And if it's not defined, we'll give the user a button to log in with Coinbase.
Now let's go ahead and run our Cloud Functions by running npm run serve from the functions directory.
That should tell you that Cloud Functions are being emulated on port 5000.
Then if we go into Angular and click log in with Coinbase, op it brings up this pop up and redirects us to our Coinbase account.
It requires the user to sign in with 2 factor authentication, so it'll send them a text message they're gonna have to verify inside this form.
After they log in to the Firebase account, then they can click authorize and that redirects us back to our Angular app inside this pop up.
At this point, nothing happens because we still need to mint our authentication token and create the user in Firebase.
We're going to do that by going back to index auth TS inside of our Cloud Functions directory.
We're going to wrap the request response inside of CORS, and then we're going to return a Promise from the function called mint auth token, and that's just going to return our custom token in JSON format.
So that looks nice and simple, but there's actually a lot more to it.
Instead of writing a big long Promise chain, I'm going to use an asynchronous helper function.
So we do that by using the async keyword followed by the function mint auth token, and it's going to take the request as an argument.
If you're not familiar with AsyncAwait, it's nothing more than syntactic sugar for Promises.
Our async function returns a Promise itself, and it does that by awaiting a bunch of other Promises inside of itself.
It results in way better code readability when you need to share values at different points in the Promise chain.
The first thing we need to do is hit the Coinbase API for the access token and refresh token.
We We can do that by defining our query parameters just like we did in the previous function, then set that as the endpoint variable.
Then this login variable, notice it, awaits a post request to this endpoint.
The value of the login variable is going to be the response from this endpoint, which should be the Coinbase access token and refresh token.
Token.
What's really cool is we can just treat them like normal variables even though it's an asynchronous operation that would normally require us to call then.
Once we have an access token from Coinbase, we can make API calls on the user's behalf.
So the first thing we're going to do is get their user profile by calling this Get Coinbase user method that we're going to define next.
Then that's also gonna be a response of some data including the user's Coinbase user ID.
Now that we have that, we can actually mint our own custom Firebase auth token.
So we call admin auth create custom token with the Coinbase user ID.
Then one last thing we're going to do is save the Coinbase access token and refresh token in Firebase.
And I wanna point out that it's really important that you have good security rules on these.
They should really only be accessed by the admin on a back end server.
Then we can just have this function return the auth token.
So in other words, it's going to return a Promise of the auth token string.
Now that we have this access token from Coinbase, we can start making calls to the API.
I went ahead and extracted this into its own function because it's probably something that you'll wanna reuse.
It makes a get request to Coinbase.
And the important part here is in this request, we need to have an authorization header that's formatted in a very specific way.
It should say authorization with bearer and then the actual access token after it.
So that's all there is to it for the Cloud function part.
Now we need to go back to Angular and fill out our auth redirect component.
Again, this is the component that lives in that pop up window that Coinbase redirects to after the user signs in on their Coinbase account.
Auth.
Coinbase sends back the auth code in the query parameters, so we're going to use activated route to retrieve it.
And we'll also bring in our auth service and the HTTP client from Angular.
During n g on init, we'll get the actual query parameter code from the URL sent back to us from Coinbase.
Then we can use it to make a request to our Cloud Function endpoint and mint the actual auth token.
If the code is defined, then we'll point to local host 5000, auth, and we'll make a post request to that endpoint.
And with the response we get back, which is going to be the custom auth token, we can then use it to call custom sign in from our auth service, which will authenticate the user.
Then make sure to subscribe to send the request.
Let's go back to Angular and try out our login button again.
This time we go to Coinbase as expected and then authorize.
Auth.
And now it's calling the Cloud function and minting that token.
After a second or 2, it closes, and we're logged into Firebase with our custom user ID.
Auth.
You can verify the user is created by going into your authentication tab in Firebase, and you should see your custom user in there.
Then you'll also want to go into the Real Time Database and make sure the access token and refresh token are saved under that user ID.
And again make sure you have these locked down in your back end database rules.
I'm going to go ahead and wrap up the video here, but in the next video I'm going to show you how to use these access and refresh tokens to make requests to the Coinbase API.
You'll be able to send and receive Bitcoin payments as well as see the balance in the user's wallet, and it opens the door for all kinds different creative cryptocurrency features.
That's it for Coinbase OAuth with Firebase.
If this video helped you, please like and subscribe.
And if you're serious about building apps with the stack, consider becoming a pro subscriber at angularfirebase.com.
You'll get a free copy of my book as well as 1 on 1 project support and a whole bunch of other exclusive content.
Thanks for watching, and I'll see you soon.

Speaker 0: It might be a little late to get in on the Bitcoin bubble, but it's not too late to start building apps for people that use cryptocurrencies. In this episode, I'm going to show you how to use Coinbase as a custom authentication provider for Firebase. That means your users will be able to log in to Firebase via Coinbase, and then you can use the Coinbase API to handle Bitcoin transactions. Auth. If you're new here, make sure to subscribe, and you can follow along with the source code at angularfirebase.com.

Let's first take a look at how this is going to work. The user is going to click the log in with Coinbase button in our Angular app that redirects them to Coinbase where they authenticate into their account, then Coinbase redirects them back to Angular with an encrypted auth code. The code then goes to a Cloud function, which exchanges it for an actual access token and refresh token from Coinbase. We can then mint our own custom Firebase authentication token, then send it back to Angular and log the user in as a Firebase user. Learning this process will also allow you to authenticate with other providers such as Instagram, Twitch, Spotify, and many others.

To get started, you'll need a Coinbase account, and you'll wanna create a new OAuth 2 application. Make note of your API keys, and then make sure you set a redirect URI that points to local host 4200 slash redirect. O. After that, you can create a brand new Angular 5 app and make sure it has the routing module. From there, you'll need to install AngularFire 2 and Firebase, so make sure to follow the official instructions at the AngularFire repo.

Now inside of our Angular project, we're going to initialize Cloud Functions. We're also going to use the new TypeScript option, so make sure your Firebase CLI tools are updated to the latest version. I also have a few dependencies in the Cloud Function environment. The main one is Axios, which replaces the node HTTP module. The reason we do that is because promises are a lot easier to work with than callbacks when dealing with asynchronous activity in a Cloud function.

Then I also have cores and crypto, which we'll see in use here in just a second. Because we're going to be minting custom auth tokens, we need to use our actual service account from Firebase. It's just a JSON file, and I'll quickly show you in Firebase where you can find it. Go to project settings, then service account, and then download a new private key for Node. Js.

Then you can go ahead and save it inside the functions directory. Auth. This file contains sensitive API keys, so make sure not to expose them in your front end code or any kind of public Git repository. After that, we'll go ahead and import our dependencies and then initialize CORS with origin true. I'm only testing these functions locally.

So for right now, I'm setting the redirect URI to local host 4200 slash redirect. I'm also setting variables for the Coinbase API keys, and make sure you follow these variable names because they're going to be reformatted as query parameters later on. Because they're going to be reused frequently, I'm setting them as a default params object here. Now we're ready to write the first actual Cloud function which is called redirect. The only thing it needs to do is properly format a URL and then redirect the user to that point so so they can authenticate into their Coinbase account.

A useful trick is to put all of these parameters in an object and then use query string stringify to add them to the URL. It'll make your code a lot more readable and maintainable. The scope parameter is the interesting one. That'll tell us the permission level that we have on the user's account, which in this case will be able to read that user's wallet. And you can get additional details on each of these parameters from the Coinbase docs.

So So now we're gonna switch gears into Angular and we'll see how we can trigger this redirect URL. First, I'm going to generate a component for the user details, then I'll generate another to handle the auth redirect, and I'll generate a service so we can share some functionality between components. Let's go ahead and start in the auth service where we import AngularFireAuth. Then in the constructor, we will observe the auth state from Firebase. So the user observable is the current user from Firebase.

What I do next here is considered a bad practice in Angular, but I'm doing it to keep this demo simple. I'm opening a pop up window that points to our redirect cloud function. The proper way to do this is to wrap the window in its own service so you can use it in non browser environment such as on the server or in a mobile app. There's still a lot of code to get through, so I'm just going to cheat a little bit on this one. Auth.

So that's going to open the pop up, and then once we actually have the minted token from Firebase, we're going to call sign in with custom token from AngularFireAuth. Auth. This method just allows you to sign in with your own custom minted token. And once signed in, we'll just go ahead and cheat again and call window close to close the pop up. Before we jump into the components, I'm going to go into the app routing module, and you can see we have the user details component on the root path and then we have auth redirect component at the redirect path.

That path should match the redirect URI you set up in Coinbase. Auth, then we'll jump over to the user details component. And right now, all this needs to do is inject the auth service and then we'll unwrap that user observable in the HTML. Model. Later on, we'll get the user's Bitcoin wallet, but for now, we're not going to worry about that.

In the HTML, we can unwrap the user observable. And if it's not defined, we'll give the user a button to log in with Coinbase. Now let's go ahead and run our Cloud Functions by running npm run serve from the functions directory. That should tell you that Cloud Functions are being emulated on port 5000. Then if we go into Angular and click log in with Coinbase, op it brings up this pop up and redirects us to our Coinbase account.

It requires the user to sign in with 2 factor authentication, so it'll send them a text message they're gonna have to verify inside this form. After they log in to the Firebase account, then they can click authorize and that redirects us back to our Angular app inside this pop up. At this point, nothing happens because we still need to mint our authentication token and create the user in Firebase. We're going to do that by going back to index auth TS inside of our Cloud Functions directory. We're going to wrap the request response inside of CORS, and then we're going to return a Promise from the function called mint auth token, and that's just going to return our custom token in JSON format.

So that looks nice and simple, but there's actually a lot more to it. Instead of writing a big long Promise chain, I'm going to use an asynchronous helper function. So we do that by using the async keyword followed by the function mint auth token, and it's going to take the request as an argument. If you're not familiar with AsyncAwait, it's nothing more than syntactic sugar for Promises. Our async function returns a Promise itself, and it does that by awaiting a bunch of other Promises inside of itself.

It results in way better code readability when you need to share values at different points in the Promise chain. The first thing we need to do is hit the Coinbase API for the access token and refresh token. We We can do that by defining our query parameters just like we did in the previous function, then set that as the endpoint variable. Then this login variable, notice it, awaits a post request to this endpoint. The value of the login variable is going to be the response from this endpoint, which should be the Coinbase access token and refresh token.

Token. What's really cool is we can just treat them like normal variables even though it's an asynchronous operation that would normally require us to call then. Once we have an access token from Coinbase, we can make API calls on the user's behalf. So the first thing we're going to do is get their user profile by calling this Get Coinbase user method that we're going to define next. Then that's also gonna be a response of some data including the user's Coinbase user ID.

Now that we have that, we can actually mint our own custom Firebase auth token. So we call admin auth create custom token with the Coinbase user ID. Then one last thing we're going to do is save the Coinbase access token and refresh token in Firebase. And I wanna point out that it's really important that you have good security rules on these. They should really only be accessed by the admin on a back end server.

Then we can just have this function return the auth token. So in other words, it's going to return a Promise of the auth token string. Now that we have this access token from Coinbase, we can start making calls to the API. I went ahead and extracted this into its own function because it's probably something that you'll wanna reuse. It makes a get request to Coinbase.

And the important part here is in this request, we need to have an authorization header that's formatted in a very specific way. It should say authorization with bearer and then the actual access token after it. So that's all there is to it for the Cloud function part. Now we need to go back to Angular and fill out our auth redirect component. Again, this is the component that lives in that pop up window that Coinbase redirects to after the user signs in on their Coinbase account.

Auth. Coinbase sends back the auth code in the query parameters, so we're going to use activated route to retrieve it. And we'll also bring in our auth service and the HTTP client from Angular. During n g on init, we'll get the actual query parameter code from the URL sent back to us from Coinbase. Then we can use it to make a request to our Cloud Function endpoint and mint the actual auth token.

If the code is defined, then we'll point to local host 5000, auth, and we'll make a post request to that endpoint. And with the response we get back, which is going to be the custom auth token, we can then use it to call custom sign in from our auth service, which will authenticate the user. Then make sure to subscribe to send the request. Let's go back to Angular and try out our login button again. This time we go to Coinbase as expected and then authorize.

Auth. And now it's calling the Cloud function and minting that token. After a second or 2, it closes, and we're logged into Firebase with our custom user ID. Auth. You can verify the user is created by going into your authentication tab in Firebase, and you should see your custom user in there.

Then you'll also want to go into the Real Time Database and make sure the access token and refresh token are saved under that user ID. And again make sure you have these locked down in your back end database rules. I'm going to go ahead and wrap up the video here, but in the next video I'm going to show you how to use these access and refresh tokens to make requests to the Coinbase API. You'll be able to send and receive Bitcoin payments as well as see the balance in the user's wallet, and it opens the door for all kinds different creative cryptocurrency features. That's it for Coinbase OAuth with Firebase.

If this video helped you, please like and subscribe. And if you're serious about building apps with the stack, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project support and a whole bunch of other exclusive content. Thanks for watching, and I'll see you soon.
It might be a little late to get in on the Bitcoin bubble, but it's not too late to start building apps for people that use cryptocurrencies. In this episode, I'm going to show you how to use Coinbase as a custom authentication provider for Firebase. That means your users will be able to log in to Firebase via Coinbase, and then you can use the Coinbase API to handle Bitcoin transactions. Auth. If you're new here, make sure to subscribe, and you can follow along with the source code at angularfirebase.com.
cryptocurrency
Let's first take a look at how this is going to work.
The user is going to click the log in with Coinbase button in our Angular app that redirects them to Coinbase where they authenticate into their account, then Coinbase redirects them back to Angular with an encrypted auth code. The code then goes to a Cloud function, which exchanges it for an actual access token and refresh token from Coinbase. We can then mint our own custom Firebase authentication token, then send it back to Angular and log the user in as a Firebase user. Learning this process will also allow you to authenticate with other providers such as Instagram, Twitch, Spotify, and many others. To get started, you'll need a Coinbase account, and you'll wanna create a new OAuth 2 application. Make note of your API keys, and then make sure you set a redirect URI that points to local host 4200 slash redirect.
cryptocurrency
O. After that, you can create a brand new Angular 5 app and make sure it has the routing module. From there, you'll need to install AngularFire 2 and Firebase, so make sure to follow the official instructions at the AngularFire repo. Now inside of our Angular project, we're going to initialize Cloud Functions. We're also going to use the new TypeScript option, so make sure your Firebase CLI tools are updated to the latest version. I also have a few dependencies in the Cloud Function environment.
The main one is Axios, which replaces the node HTTP module. The reason we do that is because promises are a lot easier to work with than callbacks when dealing with asynchronous activity in a Cloud function. Then I also have cores and crypto, which we'll see in use here in just a second. Because we're going to be minting custom auth tokens, we need to use our actual service account from Firebase. It's just a JSON file, and I'll quickly show you in Firebase where you can find it.
cryptocurrency
networking
Go to project settings, then service account, and then download a new private key for Node. Js. Then you can go ahead and save it inside the functions directory. Auth. This file contains sensitive API keys, so make sure not to expose them in your front end code or any kind of public Git repository. After that, we'll go ahead and import our dependencies and then initialize CORS with origin true. I'm only testing these functions locally. So for right now, I'm setting the redirect URI to local host 4200 slash redirect. I'm also setting variables for the Coinbase API keys, and make sure you follow these variable names because they're going to be reformatted as query parameters later on. Because they're going to be reused frequently, I'm setting them as a default params object here. Now we're ready to write the first actual Cloud function which is called redirect. The only thing it needs to do is properly format a URL and then redirect the user to that point so so they can authenticate into their Coinbase account. A useful trick is to put all of these parameters in an object and then use query string stringify to add them to the URL. It'll make your code a lot more readable and maintainable. The scope parameter is the interesting one. That'll tell us the permission level that we have on the user's account, which in this case will be able to read that user's wallet. And you can get additional details on each of these parameters from the Coinbase docs. So So now we're gonna switch gears into Angular and we'll see how we can trigger this redirect URL. First, I'm going to generate a component for the user details, then I'll generate another to handle the auth redirect, and I'll generate a service so we can share some functionality between components. Let's go ahead and start in the auth service where we import AngularFireAuth. Then in the constructor, we will observe the auth state from Firebase. So the user observable is the current user from Firebase. What I do next here is considered a bad practice in Angular, but I'm doing it to keep this demo simple. I'm opening a pop up window that points to our redirect cloud function. The proper way to do this is to wrap the window in its own service so you can use it in non browser environment such as on the server or in a mobile app.
There's still a lot of code to get through, so I'm just going to cheat a little bit on this one. Auth. So that's going to open the pop up, and then once we actually have the minted token from Firebase, we're going to call sign in with custom token from AngularFireAuth.
cryptocurrency
Auth. This method just allows you to sign in with your own custom minted token. And once signed in, we'll just go ahead and cheat again and call window close to close the pop up. Before we jump into the components, I'm going to go into the app routing module, and you can see we have the user details component on the root path and then we have auth redirect component at the redirect path.
That path should match the redirect URI you set up in Coinbase. Auth, then we'll jump over to the user details component. And right now, all this needs to do is inject the auth service and then we'll unwrap that user observable in the HTML. Model. Later on, we'll get the user's Bitcoin wallet, but for now, we're not going to worry about that. In the HTML, we can unwrap the user observable. And if it's not defined, we'll give the user a button to log in with Coinbase. Now let's go ahead and run our Cloud Functions by running npm run serve from the functions directory.
cryptocurrency
That should tell you that Cloud Functions are being emulated on port 5000. Then if we go into Angular and click log in with Coinbase, op it brings up this pop up and redirects us to our Coinbase account. It requires the user to sign in with 2 factor authentication, so it'll send them a text message they're gonna have to verify inside this form. After they log in to the Firebase account, then they can click authorize and that redirects us back to our Angular app inside this pop up. At this point, nothing happens because we still need to mint our authentication token and create the user in Firebase. We're going to do that by going back to index auth TS inside of our Cloud Functions directory. We're going to wrap the request response inside of CORS, and then we're going to return a Promise from the function called mint auth token, and that's just going to return our custom token in JSON format. So that looks nice and simple, but there's actually a lot more to it. Instead of writing a big long Promise chain, I'm going to use an asynchronous helper function. So we do that by using the async keyword followed by the function mint auth token, and it's going to take the request as an argument. If you're not familiar with AsyncAwait, it's nothing more than syntactic sugar for Promises. Our async function returns a Promise itself, and it does that by awaiting a bunch of other Promises inside of itself. It results in way better code readability when you need to share values at different points in the Promise chain. The first thing we need to do is hit the Coinbase API for the access token and refresh token. We We can do that by defining our query parameters just like we did in the previous function, then set that as the endpoint variable. Then this login variable, notice it, awaits a post request to this endpoint. The value of the login variable is going to be the response from this endpoint, which should be the Coinbase access token and refresh token.
Token. What's really cool is we can just treat them like normal variables even though it's an asynchronous operation that would normally require us to call then. Once we have an access token from Coinbase, we can make API calls on the user's behalf. So the first thing we're going to do is get their user profile by calling this Get Coinbase user method that we're going to define next.
cryptocurrency
Then that's also gonna be a response of some data including the user's Coinbase user ID. Now that we have that, we can actually mint our own custom Firebase auth token.
So we call admin auth create custom token with the Coinbase user ID. Then one last thing we're going to do is save the Coinbase access token and refresh token in Firebase. And I wanna point out that it's really important that you have good security rules on these. They should really only be accessed by the admin on a back end server. Then we can just have this function return the auth token. So in other words, it's going to return a Promise of the auth token string. Now that we have this access token from Coinbase, we can start making calls to the API. I went ahead and extracted this into its own function because it's probably something that you'll wanna reuse.
security
cryptocurrency
It makes a get request to Coinbase. And the important part here is in this request, we need to have an authorization header that's formatted in a very specific way.
It should say authorization with bearer and then the actual access token after it. So that's all there is to it for the Cloud function part. Now we need to go back to Angular and fill out our auth redirect component. Again, this is the component that lives in that pop up window that Coinbase redirects to after the user signs in on their Coinbase account.
cryptocurrency
Auth. Coinbase sends back the auth code in the query parameters, so we're going to use activated route to retrieve it. And we'll also bring in our auth service and the HTTP client from Angular. During n g on init, we'll get the actual query parameter code from the URL sent back to us from Coinbase. Then we can use it to make a request to our Cloud Function endpoint and mint the actual auth token. If the code is defined, then we'll point to local host 5000, auth, and we'll make a post request to that endpoint. And with the response we get back, which is going to be the custom auth token, we can then use it to call custom sign in from our auth service, which will authenticate the user. Then make sure to subscribe to send the request. Let's go back to Angular and try out our login button again. This time we go to Coinbase as expected and then authorize. Auth. And now it's calling the Cloud function and minting that token. After a second or 2, it closes, and we're logged into Firebase with our custom user ID. Auth. You can verify the user is created by going into your authentication tab in Firebase, and you should see your custom user in there.
Then you'll also want to go into the Real Time Database and make sure the access token and refresh token are saved under that user ID. And again make sure you have these locked down in your back end database rules. I'm going to go ahead and wrap up the video here, but in the next video I'm going to show you how to use these access and refresh tokens to make requests to the Coinbase API.
databases
You'll be able to send and receive Bitcoin payments as well as see the balance in the user's wallet, and it opens the door for all kinds different creative cryptocurrency features. That's it for Coinbase OAuth with Firebase. If this video helped you, please like and subscribe. And if you're serious about building apps with the stack, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project support and a whole bunch of other exclusive content. Thanks for watching, and I'll see you soon.
cryptocurrency
books
publishing
youtube
literature
It might be a little late to get in on the Bitcoin bubble, but it's not too late to start building apps for people that use cryptocurrencies. In this episode, I'm going to show you how to use Coinbase as a custom authentication provider for Firebase. That means your users will be able to log in to Firebase via Coinbase, and then you can use the Coinbase API to handle Bitcoin transactions. Auth. If you're new here, make sure to subscribe, and you can follow along with the source code at angularfirebase.com. Let's first take a look at how this is going to work. The user is going to click the log in with Coinbase button in our Angular app that redirects them to Coinbase where they authenticate into their account, then Coinbase redirects them back to Angular with an encrypted auth code. The code then goes to a Cloud function, which exchanges it for an actual access token and refresh token from Coinbase. We can then mint our own custom Firebase authentication token, then send it back to Angular and log the user in as a Firebase user. Learning this process will also allow you to authenticate with other providers such as Instagram, Twitch, Spotify, and many others. To get started, you'll need a Coinbase account, and you'll wanna create a new OAuth 2 application. Make note of your API keys, and then make sure you set a redirect URI that points to local host 4200 slash redirect. O. After that, you can create a brand new Angular 5 app and make sure it has the routing module. From there, you'll need to install AngularFire 2 and Firebase, so make sure to follow the official instructions at the AngularFire repo. Now inside of our Angular project, we're going to initialize Cloud Functions. We're also going to use the new TypeScript option, so make sure your Firebase CLI tools are updated to the latest version. I also have a few dependencies in the Cloud Function environment. The main one is Axios, which replaces the node HTTP module. The reason we do that is because promises are a lot easier to work with than callbacks when dealing with asynchronous activity in a Cloud function. Then I also have cores and crypto, which we'll see in use here in just a second. Because we're going to be minting custom auth tokens, we need to use our actual service account from Firebase. It's just a JSON file, and I'll quickly show you in Firebase where you can find it. Go to project settings, then service account, and then download a new private key for Node. Js. Then you can go ahead and save it inside the functions directory. Auth. This file contains sensitive API keys, so make sure not to expose them in your front end code or any kind of public Git repository. After that, we'll go ahead and import our dependencies and then initialize CORS with origin true. I'm only testing these functions locally. So for right now, I'm setting the redirect URI to local host 4200 slash redirect. I'm also setting variables for the Coinbase API keys, and make sure you follow these variable names because they're going to be reformatted as query parameters later on. Because they're going to be reused frequently, I'm setting them as a default params object here. Now we're ready to write the first actual Cloud function which is called redirect. The only thing it needs to do is properly format a URL and then redirect the user to that point so so they can authenticate into their Coinbase account. A useful trick is to put all of these parameters in an object and then use query string stringify to add them to the URL. It'll make your code a lot more readable and maintainable. The scope parameter is the interesting one. That'll tell us the permission level that we have on the user's account, which in this case will be able to read that user's wallet. And you can get additional details on each of these parameters from the Coinbase docs. So So now we're gonna switch gears into Angular and we'll see how we can trigger this redirect URL. First, I'm going to generate a component for the user details, then I'll generate another to handle the auth redirect, and I'll generate a service so we can share some functionality between components. Let's go ahead and start in the auth service where we import AngularFireAuth. Then in the constructor, we will observe the auth state from Firebase. So the user observable is the current user from Firebase. What I do next here is considered a bad practice in Angular, but I'm doing it to keep this demo simple. I'm opening a pop up window that points to our redirect cloud function. The proper way to do this is to wrap the window in its own service so you can use it in non browser environment such as on the server or in a mobile app. There's still a lot of code to get through, so I'm just going to cheat a little bit on this one. Auth. So that's going to open the pop up, and then once we actually have the minted token from Firebase, we're going to call sign in with custom token from AngularFireAuth. Auth. This method just allows you to sign in with your own custom minted token. And once signed in, we'll just go ahead and cheat again and call window close to close the pop up. Before we jump into the components, I'm going to go into the app routing module, and you can see we have the user details component on the root path and then we have auth redirect component at the redirect path. That path should match the redirect URI you set up in Coinbase. Auth, then we'll jump over to the user details component. And right now, all this needs to do is inject the auth service and then we'll unwrap that user observable in the HTML. Model. Later on, we'll get the user's Bitcoin wallet, but for now, we're not going to worry about that. In the HTML, we can unwrap the user observable. And if it's not defined, we'll give the user a button to log in with Coinbase. Now let's go ahead and run our Cloud Functions by running npm run serve from the functions directory. That should tell you that Cloud Functions are being emulated on port 5000. Then if we go into Angular and click log in with Coinbase, op it brings up this pop up and redirects us to our Coinbase account. It requires the user to sign in with 2 factor authentication, so it'll send them a text message they're gonna have to verify inside this form. After they log in to the Firebase account, then they can click authorize and that redirects us back to our Angular app inside this pop up. At this point, nothing happens because we still need to mint our authentication token and create the user in Firebase. We're going to do that by going back to index auth TS inside of our Cloud Functions directory. We're going to wrap the request response inside of CORS, and then we're going to return a Promise from the function called mint auth token, and that's just going to return our custom token in JSON format. So that looks nice and simple, but there's actually a lot more to it. Instead of writing a big long Promise chain, I'm going to use an asynchronous helper function. So we do that by using the async keyword followed by the function mint auth token, and it's going to take the request as an argument. If you're not familiar with AsyncAwait, it's nothing more than syntactic sugar for Promises. Our async function returns a Promise itself, and it does that by awaiting a bunch of other Promises inside of itself. It results in way better code readability when you need to share values at different points in the Promise chain. The first thing we need to do is hit the Coinbase API for the access token and refresh token. We We can do that by defining our query parameters just like we did in the previous function, then set that as the endpoint variable. Then this login variable, notice it, awaits a post request to this endpoint. The value of the login variable is going to be the response from this endpoint, which should be the Coinbase access token and refresh token. Token. What's really cool is we can just treat them like normal variables even though it's an asynchronous operation that would normally require us to call then. Once we have an access token from Coinbase, we can make API calls on the user's behalf. So the first thing we're going to do is get their user profile by calling this Get Coinbase user method that we're going to define next. Then that's also gonna be a response of some data including the user's Coinbase user ID. Now that we have that, we can actually mint our own custom Firebase auth token. So we call admin auth create custom token with the Coinbase user ID. Then one last thing we're going to do is save the Coinbase access token and refresh token in Firebase. And I wanna point out that it's really important that you have good security rules on these. They should really only be accessed by the admin on a back end server. Then we can just have this function return the auth token. So in other words, it's going to return a Promise of the auth token string. Now that we have this access token from Coinbase, we can start making calls to the API. I went ahead and extracted this into its own function because it's probably something that you'll wanna reuse. It makes a get request to Coinbase. And the important part here is in this request, we need to have an authorization header that's formatted in a very specific way. It should say authorization with bearer and then the actual access token after it. So that's all there is to it for the Cloud function part. Now we need to go back to Angular and fill out our auth redirect component. Again, this is the component that lives in that pop up window that Coinbase redirects to after the user signs in on their Coinbase account. Auth. Coinbase sends back the auth code in the query parameters, so we're going to use activated route to retrieve it. And we'll also bring in our auth service and the HTTP client from Angular. During n g on init, we'll get the actual query parameter code from the URL sent back to us from Coinbase. Then we can use it to make a request to our Cloud Function endpoint and mint the actual auth token. If the code is defined, then we'll point to local host 5000, auth, and we'll make a post request to that endpoint. And with the response we get back, which is going to be the custom auth token, we can then use it to call custom sign in from our auth service, which will authenticate the user. Then make sure to subscribe to send the request. Let's go back to Angular and try out our login button again. This time we go to Coinbase as expected and then authorize. Auth. And now it's calling the Cloud function and minting that token. After a second or 2, it closes, and we're logged into Firebase with our custom user ID. Auth. You can verify the user is created by going into your authentication tab in Firebase, and you should see your custom user in there. Then you'll also want to go into the Real Time Database and make sure the access token and refresh token are saved under that user ID. And again make sure you have these locked down in your back end database rules. I'm going to go ahead and wrap up the video here, but in the next video I'm going to show you how to use these access and refresh tokens to make requests to the Coinbase API. You'll be able to send and receive Bitcoin payments as well as see the balance in the user's wallet, and it opens the door for all kinds different creative cryptocurrency features. That's it for Coinbase OAuth with Firebase. If this video helped you, please like and subscribe. And if you're serious about building apps with the stack, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project support and a whole bunch of other exclusive content. Thanks for watching, and I'll see you soon.
It
it
might
might
be
be
a
a
little
little
late
late
to
to
get
get
in
in
on
on
the
the
Bitcoin
bitcoin
bubble,
bubble
but
but
it's
it's
not
not
too
too
late
late
to
to
start
start
building
building
apps
apps
for
for
people
people
that
that
use
use
cryptocurrencies.
cryptocurrencies
In
in
this
this
episode,
episode
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
use
use
Coinbase
coinbase
as
as
a
a
custom
custom
authentication
authentication
provider
provider
for
for
Firebase.
firebase
That
that
means
means
your
your
users
users
will
will
be
be
able
able
to
to
log
log
in
in
to
to
Firebase
firebase
via
via
Coinbase,
coinbase
and
and
then
then
you
you
can
can
use
use
the
the
Coinbase
coinbase
API
api
to
to
handle
handle
Bitcoin
bitcoin
transactions.
transactions
Auth.
auth
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
Let's
let's
first
first
take
take
a
a
look
look
at
at
how
how
this
this
is
is
going
going
to
to
work.
work
The
the
user
user
is
is
going
going
to
to
click
click
the
the
log
log
in
in
with
with
Coinbase
coinbase
button
button
in
in
our
our
Angular
angular
app
app
that
that
redirects
redirects
them
them
to
to
Coinbase
coinbase
where
where
they
they
authenticate
authenticate
into
into
their
their
account,
account
then
then
Coinbase
coinbase
redirects
redirects
them
them
back
back
to
to
Angular
angular
with
with
an
an
encrypted
encrypted
auth
auth
code.
code
The
the
code
code
then
then
goes
goes
to
to
a
a
Cloud
cloud
function,
function
which
which
exchanges
exchanges
it
it
for
for
an
an
actual
actual
access
access
token
token
and
and
refresh
refresh
token
token
from
from
Coinbase.
coinbase
We
we
can
can
then
then
mint
mint
our
our
own
own
custom
custom
Firebase
firebase
authentication
authentication
token,
token
then
then
send
send
it
it
back
back
to
to
Angular
angular
and
and
log
log
the
the
user
user
in
in
as
as
a
a
Firebase
firebase
user.
user
Learning
learning
this
this
process
process
will
will
also
also
allow
allow
you
you
to
to
authenticate
authenticate
with
with
other
other
providers
providers
such
such
as
as
Instagram,
instagram
Twitch,
twitch
Spotify,
spotify
and
and
many
many
others.
others
To
to
get
get
started,
started
you'll
you'll
need
need
a
a
Coinbase
coinbase
account,
account
and
and
you'll
you'll
wanna
wanna
create
create
a
a
new
new
OAuth
oauth
2
2
application.
application
Make
make
note
note
of
of
your
your
API
api
keys,
keys
and
and
then
then
make
make
sure
sure
you
you
set
set
a
a
redirect
redirect
URI
uri
that
that
points
points
to
to
local
local
host
host
4200
4200
slash
slash
redirect.
redirect
O.
o
After
after
that,
that
you
you
can
can
create
create
a
a
brand
brand
new
new
Angular
angular
5
5
app
app
and
and
make
make
sure
sure
it
it
has
has
the
the
routing
routing
module.
module
From
from
there,
there
you'll
you'll
need
need
to
to
install
install
AngularFire
angularfire
2
2
and
and
Firebase,
firebase
so
so
make
make
sure
sure
to
to
follow
follow
the
the
official
official
instructions
instructions
at
at
the
the
AngularFire
angularfire
repo.
repo
Now
now
inside
inside
of
of
our
our
Angular
angular
project,
project
we're
we're
going
going
to
to
initialize
initialize
Cloud
cloud
Functions.
functions
We're
we're
also
also
going
going
to
to
use
use
the
the
new
new
TypeScript
typescript
option,
option
so
so
make
make
sure
sure
your
your
Firebase
firebase
CLI
cli
tools
tools
are
are
updated
updated
to
to
the
the
latest
latest
version.
version
I
i
also
also
have
have
a
a
few
few
dependencies
dependencies
in
in
the
the
Cloud
cloud
Function
function
environment.
environment
The
the
main
main
one
one
is
is
Axios,
axios
which
which
replaces
replaces
the
the
node
node
HTTP
http
module.
module
The
the
reason
reason
we
we
do
do
that
that
is
is
because
because
promises
promises
are
are
a
a
lot
lot
easier
easier
to
to
work
work
with
with
than
than
callbacks
callbacks
when
when
dealing
dealing
with
with
asynchronous
asynchronous
activity
activity
in
in
a
a
Cloud
cloud
function.
function
Then
then
I
i
also
also
have
have
cores
cores
and
and
crypto,
crypto
which
which
we'll
we'll
see
see
in
in
use
use
here
here
in
in
just
just
a
a
second.
second
Because
because
we're
we're
going
going
to
to
be
be
minting
minting
custom
custom
auth
auth
tokens,
tokens
we
we
need
need
to
to
use
use
our
our
actual
actual
service
service
account
account
from
from
Firebase.
firebase
It's
it's
just
just
a
a
JSON
json
file,
file
and
and
I'll
i'll
quickly
quickly
show
show
you
you
in
in
Firebase
firebase
where
where
you
you
can
can
find
find
it.
it
Go
go
to
to
project
project
settings,
settings
then
then
service
service
account,
account
and
and
then
then
download
download
a
a
new
new
private
private
key
key
for
for
Node.
node
Js.
js
Then
then
you
you
can
can
go
go
ahead
ahead
and
and
save
save
it
it
inside
inside
the
the
functions
functions
directory.
directory
Auth.
auth
This
this
file
file
contains
contains
sensitive
sensitive
API
api
keys,
keys
so
so
make
make
sure
sure
not
not
to
to
expose
expose
them
them
in
in
your
your
front
front
end
end
code
code
or
or
any
any
kind
kind
of
of
public
public
Git
git
repository.
repository
After
after
that,
that
we'll
we'll
go
go
ahead
ahead
and
and
import
import
our
our
dependencies
dependencies
and
and
then
then
initialize
initialize
CORS
cors
with
with
origin
origin
true.
true
I'm
i'm
only
only
testing
testing
these
these
functions
functions
locally.
locally
So
so
for
for
right
right
now,
now
I'm
i'm
setting
setting
the
the
redirect
redirect
URI
uri
to
to
local
local
host
host
4200
4200
slash
slash
redirect.
redirect
I'm
i'm
also
also
setting
setting
variables
variables
for
for
the
the
Coinbase
coinbase
API
api
keys,
keys
and
and
make
make
sure
sure
you
you
follow
follow
these
these
variable
variable
names
names
because
because
they're
they're
going
going
to
to
be
be
reformatted
reformatted
as
as
query
query
parameters
parameters
later
later
on.
on
Because
because
they're
they're
going
going
to
to
be
be
reused
reused
frequently,
frequently
I'm
i'm
setting
setting
them
them
as
as
a
a
default
default
params
params
object
object
here.
here
Now
now
we're
we're
ready
ready
to
to
write
write
the
the
first
first
actual
actual
Cloud
cloud
function
function
which
which
is
is
called
called
redirect.
redirect
The
the
only
only
thing
thing
it
it
needs
needs
to
to
do
do
is
is
properly
properly
format
format
a
a
URL
url
and
and
then
then
redirect
redirect
the
the
user
user
to
to
that
that
point
point
so
so
so
so
they
they
can
can
authenticate
authenticate
into
into
their
their
Coinbase
coinbase
account.
account
A
a
useful
useful
trick
trick
is
is
to
to
put
put
all
all
of
of
these
these
parameters
parameters
in
in
an
an
object
object
and
and
then
then
use
use
query
query
string
string
stringify
stringify
to
to
add
add
them
them
to
to
the
the
URL.
url
It'll
it'll
make
make
your
your
code
code
a
a
lot
lot
more
more
readable
readable
and
and
maintainable.
maintainable
The
the
scope
scope
parameter
parameter
is
is
the
the
interesting
interesting
one.
one
That'll
that'll
tell
tell
us
us
the
the
permission
permission
level
level
that
that
we
we
have
have
on
on
the
the
user's
user's
account,
account
which
which
in
in
this
this
case
case
will
will
be
be
able
able
to
to
read
read
that
that
user's
user's
wallet.
wallet
And
and
you
you
can
can
get
get
additional
additional
details
details
on
on
each
each
of
of
these
these
parameters
parameters
from
from
the
the
Coinbase
coinbase
docs.
docs
So
so
So
so
now
now
we're
we're
gonna
gonna
switch
switch
gears
gears
into
into
Angular
angular
and
and
we'll
we'll
see
see
how
how
we
we
can
can
trigger
trigger
this
this
redirect
redirect
URL.
url
First,
first
I'm
i'm
going
going
to
to
generate
generate
a
a
component
component
for
for
the
the
user
user
details,
details
then
then
I'll
i'll
generate
generate
another
another
to
to
handle
handle
the
the
auth
auth
redirect,
redirect
and
and
I'll
i'll
generate
generate
a
a
service
service
so
so
we
we
can
can
share
share
some
some
functionality
functionality
between
between
components.
components
Let's
let's
go
go
ahead
ahead
and
and
start
start
in
in
the
the
auth
auth
service
service
where
where
we
we
import
import
AngularFireAuth.
angularfireauth
Then
then
in
in
the
the
constructor,
constructor
we
we
will
will
observe
observe
the
the
auth
auth
state
state
from
from
Firebase.
firebase
So
so
the
the
user
user
observable
observable
is
is
the
the
current
current
user
user
from
from
Firebase.
firebase
What
what
I
i
do
do
next
next
here
here
is
is
considered
considered
a
a
bad
bad
practice
practice
in
in
Angular,
angular
but
but
I'm
i'm
doing
doing
it
it
to
to
keep
keep
this
this
demo
demo
simple.
simple
I'm
i'm
opening
opening
a
a
pop
pop
up
up
window
window
that
that
points
points
to
to
our
our
redirect
redirect
cloud
cloud
function.
function
The
the
proper
proper
way
way
to
to
do
do
this
this
is
is
to
to
wrap
wrap
the
the
window
window
in
in
its
its
own
own
service
service
so
so
you
you
can
can
use
use
it
it
in
in
non
non
browser
browser
environment
environment
such
such
as
as
on
on
the
the
server
server
or
or
in
in
a
a
mobile
mobile
app.
app
There's
there's
still
still
a
a
lot
lot
of
of
code
code
to
to
get
get
through,
through
so
so
I'm
i'm
just
just
going
going
to
to
cheat
cheat
a
a
little
little
bit
bit
on
on
this
this
one.
one
Auth.
auth
So
so
that's
that's
going
going
to
to
open
open
the
the
pop
pop
up,
up
and
and
then
then
once
once
we
we
actually
actually
have
have
the
the
minted
minted
token
token
from
from
Firebase,
firebase
we're
we're
going
going
to
to
call
call
sign
sign
in
in
with
with
custom
custom
token
token
from
from
AngularFireAuth.
angularfireauth
Auth.
auth
This
this
method
method
just
just
allows
allows
you
you
to
to
sign
sign
in
in
with
with
your
your
own
own
custom
custom
minted
minted
token.
token
And
and
once
once
signed
signed
in,
in
we'll
we'll
just
just
go
go
ahead
ahead
and
and
cheat
cheat
again
again
and
and
call
call
window
window
close
close
to
to
close
close
the
the
pop
pop
up.
up
Before
before
we
we
jump
jump
into
into
the
the
components,
components
I'm
i'm
going
going
to
to
go
go
into
into
the
the
app
app
routing
routing
module,
module
and
and
you
you
can
can
see
see
we
we
have
have
the
the
user
user
details
details
component
component
on
on
the
the
root
root
path
path
and
and
then
then
we
we
have
have
auth
auth
redirect
redirect
component
component
at
at
the
the
redirect
redirect
path.
path
That
that
path
path
should
should
match
match
the
the
redirect
redirect
URI
uri
you
you
set
set
up
up
in
in
Coinbase.
coinbase
Auth,
auth
then
then
we'll
we'll
jump
jump
over
over
to
to
the
the
user
user
details
details
component.
component
And
and
right
right
now,
now
all
all
this
this
needs
needs
to
to
do
do
is
is
inject
inject
the
the
auth
auth
service
service
and
and
then
then
we'll
we'll
unwrap
unwrap
that
that
user
user
observable
observable
in
in
the
the
HTML.
html
Model.
model
Later
later
on,
on
we'll
we'll
get
get
the
the
user's
user's
Bitcoin
bitcoin
wallet,
wallet
but
but
for
for
now,
now
we're
we're
not
not
going
going
to
to
worry
worry
about
about
that.
that
In
in
the
the
HTML,
html
we
we
can
can
unwrap
unwrap
the
the
user
user
observable.
observable
And
and
if
if
it's
it's
not
not
defined,
defined
we'll
we'll
give
give
the
the
user
user
a
a
button
button
to
to
log
log
in
in
with
with
Coinbase.
coinbase
Now
now
let's
let's
go
go
ahead
ahead
and
and
run
run
our
our
Cloud
cloud
Functions
functions
by
by
running
running
npm
npm
run
run
serve
serve
from
from
the
the
functions
functions
directory.
directory
That
that
should
should
tell
tell
you
you
that
that
Cloud
cloud
Functions
functions
are
are
being
being
emulated
emulated
on
on
port
port
5000.
5000
Then
then
if
if
we
we
go
go
into
into
Angular
angular
and
and
click
click
log
log
in
in
with
with
Coinbase,
coinbase
op
op
it
it
brings
brings
up
up
this
this
pop
pop
up
up
and
and
redirects
redirects
us
us
to
to
our
our
Coinbase
coinbase
account.
account
It
it
requires
requires
the
the
user
user
to
to
sign
sign
in
in
with
with
2
2
factor
factor
authentication,
authentication
so
so
it'll
it'll
send
send
them
them
a
a
text
text
message
message
they're
they're
gonna
gonna
have
have
to
to
verify
verify
inside
inside
this
this
form.
form
After
after
they
they
log
log
in
in
to
to
the
the
Firebase
firebase
account,
account
then
then
they
they
can
can
click
click
authorize
authorize
and
and
that
that
redirects
redirects
us
us
back
back
to
to
our
our
Angular
angular
app
app
inside
inside
this
this
pop
pop
up.
up
At
at
this
this
point,
point
nothing
nothing
happens
happens
because
because
we
we
still
still
need
need
to
to
mint
mint
our
our
authentication
authentication
token
token
and
and
create
create
the
the
user
user
in
in
Firebase.
firebase
We're
we're
going
going
to
to
do
do
that
that
by
by
going
going
back
back
to
to
index
index
auth
auth
TS
ts
inside
inside
of
of
our
our
Cloud
cloud
Functions
functions
directory.
directory
We're
we're
going
going
to
to
wrap
wrap
the
the
request
request
response
response
inside
inside
of
of
CORS,
cors
and
and
then
then
we're
we're
going
going
to
to
return
return
a
a
Promise
promise
from
from
the
the
function
function
called
called
mint
mint
auth
auth
token,
token
and
and
that's
that's
just
just
going
going
to
to
return
return
our
our
custom
custom
token
token
in
in
JSON
json
format.
format
So
so
that
that
looks
looks
nice
nice
and
and
simple,
simple
but
but
there's
there's
actually
actually
a
a
lot
lot
more
more
to
to
it.
it
Instead
instead
of
of
writing
writing
a
a
big
big
long
long
Promise
promise
chain,
chain
I'm
i'm
going
going
to
to
use
use
an
an
asynchronous
asynchronous
helper
helper
function.
function
So
so
we
we
do
do
that
that
by
by
using
using
the
the
async
async
keyword
keyword
followed
followed
by
by
the
the
function
function
mint
mint
auth
auth
token,
token
and
and
it's
it's
going
going
to
to
take
take
the
the
request
request
as
as
an
an
argument.
argument
If
if
you're
you're
not
not
familiar
familiar
with
with
AsyncAwait,
asyncawait
it's
it's
nothing
nothing
more
more
than
than
syntactic
syntactic
sugar
sugar
for
for
Promises.
promises
Our
our
async
async
function
function
returns
returns
a
a
Promise
promise
itself,
itself
and
and
it
it
does
does
that
that
by
by
awaiting
awaiting
a
a
bunch
bunch
of
of
other
other
Promises
promises
inside
inside
of
of
itself.
itself
It
it
results
results
in
in
way
way
better
better
code
code
readability
readability
when
when
you
you
need
need
to
to
share
share
values
values
at
at
different
different
points
points
in
in
the
the
Promise
promise
chain.
chain
The
the
first
first
thing
thing
we
we
need
need
to
to
do
do
is
is
hit
hit
the
the
Coinbase
coinbase
API
api
for
for
the
the
access
access
token
token
and
and
refresh
refresh
token.
token
We
we
We
we
can
can
do
do
that
that
by
by
defining
defining
our
our
query
query
parameters
parameters
just
just
like
like
we
we
did
did
in
in
the
the
previous
previous
function,
function
then
then
set
set
that
that
as
as
the
the
endpoint
endpoint
variable.
variable
Then
then
this
this
login
login
variable,
variable
notice
notice
it,
it
awaits
awaits
a
a
post
post
request
request
to
to
this
this
endpoint.
endpoint
The
the
value
value
of
of
the
the
login
login
variable
variable
is
is
going
going
to
to
be
be
the
the
response
response
from
from
this
this
endpoint,
endpoint
which
which
should
should
be
be
the
the
Coinbase
coinbase
access
access
token
token
and
and
refresh
refresh
token.
token
Token.
token
What's
what's
really
really
cool
cool
is
is
we
we
can
can
just
just
treat
treat
them
them
like
like
normal
normal
variables
variables
even
even
though
though
it's
it's
an
an
asynchronous
asynchronous
operation
operation
that
that
would
would
normally
normally
require
require
us
us
to
to
call
call
then.
then
Once
once
we
we
have
have
an
an
access
access
token
token
from
from
Coinbase,
coinbase
we
we
can
can
make
make
API
api
calls
calls
on
on
the
the
user's
user's
behalf.
behalf
So
so
the
the
first
first
thing
thing
we're
we're
going
going
to
to
do
do
is
is
get
get
their
their
user
user
profile
profile
by
by
calling
calling
this
this
Get
get
Coinbase
coinbase
user
user
method
method
that
that
we're
we're
going
going
to
to
define
define
next.
next
Then
then
that's
that's
also
also
gonna
gonna
be
be
a
a
response
response
of
of
some
some
data
data
including
including
the
the
user's
user's
Coinbase
coinbase
user
user
ID.
id
Now
now
that
that
we
we
have
have
that,
that
we
we
can
can
actually
actually
mint
mint
our
our
own
own
custom
custom
Firebase
firebase
auth
auth
token.
token
So
so
we
we
call
call
admin
admin
auth
auth
create
create
custom
custom
token
token
with
with
the
the
Coinbase
coinbase
user
user
ID.
id
Then
then
one
one
last
last
thing
thing
we're
we're
going
going
to
to
do
do
is
is
save
save
the
the
Coinbase
coinbase
access
access
token
token
and
and
refresh
refresh
token
token
in
in
Firebase.
firebase
And
and
I
i
wanna
wanna
point
point
out
out
that
that
it's
it's
really
really
important
important
that
that
you
you
have
have
good
good
security
security
rules
rules
on
on
these.
these
They
they
should
should
really
really
only
only
be
be
accessed
accessed
by
by
the
the
admin
admin
on
on
a
a
back
back
end
end
server.
server
Then
then
we
we
can
can
just
just
have
have
this
this
function
function
return
return
the
the
auth
auth
token.
token
So
so
in
in
other
other
words,
words
it's
it's
going
going
to
to
return
return
a
a
Promise
promise
of
of
the
the
auth
auth
token
token
string.
string
Now
now
that
that
we
we
have
have
this
this
access
access
token
token
from
from
Coinbase,
coinbase
we
we
can
can
start
start
making
making
calls
calls
to
to
the
the
API.
api
I
i
went
went
ahead
ahead
and
and
extracted
extracted
this
this
into
into
its
its
own
own
function
function
because
because
it's
it's
probably
probably
something
something
that
that
you'll
you'll
wanna
wanna
reuse.
reuse
It
it
makes
makes
a
a
get
get
request
request
to
to
Coinbase.
coinbase
And
and
the
the
important
important
part
part
here
here
is
is
in
in
this
this
request,
request
we
we
need
need
to
to
have
have
an
an
authorization
authorization
header
header
that's
that's
formatted
formatted
in
in
a
a
very
very
specific
specific
way.
way
It
it
should
should
say
say
authorization
authorization
with
with
bearer
bearer
and
and
then
then
the
the
actual
actual
access
access
token
token
after
after
it.
it
So
so
that's
that's
all
all
there
there
is
is
to
to
it
it
for
for
the
the
Cloud
cloud
function
function
part.
part
Now
now
we
we
need
need
to
to
go
go
back
back
to
to
Angular
angular
and
and
fill
fill
out
out
our
our
auth
auth
redirect
redirect
component.
component
Again,
again
this
this
is
is
the
the
component
component
that
that
lives
lives
in
in
that
that
pop
pop
up
up
window
window
that
that
Coinbase
coinbase
redirects
redirects
to
to
after
after
the
the
user
user
signs
signs
in
in
on
on
their
their
Coinbase
coinbase
account.
account
Auth.
auth
Coinbase
coinbase
sends
sends
back
back
the
the
auth
auth
code
code
in
in
the
the
query
query
parameters,
parameters
so
so
we're
we're
going
going
to
to
use
use
activated
activated
route
route
to
to
retrieve
retrieve
it.
it
And
and
we'll
we'll
also
also
bring
bring
in
in
our
our
auth
auth
service
service
and
and
the
the
HTTP
http
client
client
from
from
Angular.
angular
During
during
n
n
g
g
on
on
init,
init
we'll
we'll
get
get
the
the
actual
actual
query
query
parameter
parameter
code
code
from
from
the
the
URL
url
sent
sent
back
back
to
to
us
us
from
from
Coinbase.
coinbase
Then
then
we
we
can
can
use
use
it
it
to
to
make
make
a
a
request
request
to
to
our
our
Cloud
cloud
Function
function
endpoint
endpoint
and
and
mint
mint
the
the
actual
actual
auth
auth
token.
token
If
if
the
the
code
code
is
is
defined,
defined
then
then
we'll
we'll
point
point
to
to
local
local
host
host
5000,
5000
auth,
auth
and
and
we'll
we'll
make
make
a
a
post
post
request
request
to
to
that
that
endpoint.
endpoint
And
and
with
with
the
the
response
response
we
we
get
get
back,
back
which
which
is
is
going
going
to
to
be
be
the
the
custom
custom
auth
auth
token,
token
we
we
can
can
then
then
use
use
it
it
to
to
call
call
custom
custom
sign
sign
in
in
from
from
our
our
auth
auth
service,
service
which
which
will
will
authenticate
authenticate
the
the
user.
user
Then
then
make
make
sure
sure
to
to
subscribe
subscribe
to
to
send
send
the
the
request.
request
Let's
let's
go
go
back
back
to
to
Angular
angular
and
and
try
try
out
out
our
our
login
login
button
button
again.
again
This
this
time
time
we
we
go
go
to
to
Coinbase
coinbase
as
as
expected
expected
and
and
then
then
authorize.
authorize
Auth.
auth
And
and
now
now
it's
it's
calling
calling
the
the
Cloud
cloud
function
function
and
and
minting
minting
that
that
token.
token
After
after
a
a
second
second
or
or
2,
2
it
it
closes,
closes
and
and
we're
we're
logged
logged
into
into
Firebase
firebase
with
with
our
our
custom
custom
user
user
ID.
id
Auth.
auth
You
you
can
can
verify
verify
the
the
user
user
is
is
created
created
by
by
going
going
into
into
your
your
authentication
authentication
tab
tab
in
in
Firebase,
firebase
and
and
you
you
should
should
see
see
your
your
custom
custom
user
user
in
in
there.
there
Then
then
you'll
you'll
also
also
want
want
to
to
go
go
into
into
the
the
Real
real
Time
time
Database
database
and
and
make
make
sure
sure
the
the
access
access
token
token
and
and
refresh
refresh
token
token
are
are
saved
saved
under
under
that
that
user
user
ID.
id
And
and
again
again
make
make
sure
sure
you
you
have
have
these
these
locked
locked
down
down
in
in
your
your
back
back
end
end
database
database
rules.
rules
I'm
i'm
going
going
to
to
go
go
ahead
ahead
and
and
wrap
wrap
up
up
the
the
video
video
here,
here
but
but
in
in
the
the
next
next
video
video
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
use
use
these
these
access
access
and
and
refresh
refresh
tokens
tokens
to
to
make
make
requests
requests
to
to
the
the
Coinbase
coinbase
API.
api
You'll
you'll
be
be
able
able
to
to
send
send
and
and
receive
receive
Bitcoin
bitcoin
payments
payments
as
as
well
well
as
as
see
see
the
the
balance
balance
in
in
the
the
user's
user's
wallet,
wallet
and
and
it
it
opens
opens
the
the
door
door
for
for
all
all
kinds
kinds
different
different
creative
creative
cryptocurrency
cryptocurrency
features.
features
That's
that's
it
it
for
for
Coinbase
coinbase
OAuth
oauth
with
with
Firebase.
firebase
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
building
building
apps
apps
with
with
the
the
stack,
stack
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
support
support
and
and
a
a
whole
whole
bunch
bunch
of
of
other
other
exclusive
exclusive
content.
content
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speakers discuss building cryptocurrencies and their use of Cloud function and redirect URL. They also discuss the importance of good security rules and setting up default token fields. The process is explained, including injecting the denies service and setting up a default token. The speakers emphasize the importance of good security rules and recommend using Cloud functions to reset tokens and refresh them for the Cloud function. They also mention a free book and a project support link.
Coinbase + Firebase - Build a Bitcoin App
It might be a little late to get in on the Bitcoin bubble, but it's not too late to start building apps for people that use cryptocurrencies. In this episode, I'm going to show you how to use Coinbase as a custom authentication provider for Firebase. That means your users will be able to log in to Firebase via Coinbase, and then you can use the Coinbase API to handle Bitcoin transactions. Auth. If you're new here, make sure to subscribe, and you can follow along with the source code at angularfirebase.com. Let's first take a look at how this is going to work. The user is going to click the log in with Coinbase button in our Angular app that redirects them to Coinbase where they authenticate into their account, then Coinbase redirects them back to Angular with an encrypted auth code. The code then goes to a Cloud function, which exchanges it for an actual access token and refresh token from Coinbase. We can then mint our own custom Firebase authentication token, then send it back to Angular and log the user in as a Firebase user. Learning this process will also allow you to authenticate with other providers such as Instagram, Twitch, Spotify, and many others. To get started, you'll need a Coinbase account, and you'll wanna create a new OAuth 2 application. Make note of your API keys, and then make sure you set a redirect URI that points to local host 4200 slash redirect. O. After that, you can create a brand new Angular 5 app and make sure it has the routing module. From there, you'll need to install AngularFire 2 and Firebase, so make sure to follow the official instructions at the AngularFire repo. Now inside of our Angular project, we're going to initialize Cloud Functions. We're also going to use the new TypeScript option, so make sure your Firebase CLI tools are updated to the latest version. I also have a few dependencies in the Cloud Function environment. The main one is Axios, which replaces the node HTTP module. The reason we do that is because promises are a lot easier to work with than callbacks when dealing with asynchronous activity in a Cloud function. Then I also have cores and crypto, which we'll see in use here in just a second. Because we're going to be minting custom auth tokens, we need to use our actual service account from Firebase. It's just a JSON file, and I'll quickly show you in Firebase where you can find it. Go to project settings, then service account, and then download a new private key for Node. Js. Then you can go ahead and save it inside the functions directory. Auth. This file contains sensitive API keys, so make sure not to expose them in your front end code or any kind of public Git repository. After that, we'll go ahead and import our dependencies and then initialize CORS with origin true. I'm only testing these functions locally. So for right now, I'm setting the redirect URI to local host 4200 slash redirect. I'm also setting variables for the Coinbase API keys, and make sure you follow these variable names because they're going to be reformatted as query parameters later on. Because they're going to be reused frequently, I'm setting them as a default params object here. Now we're ready to write the first actual Cloud function which is called redirect. The only thing it needs to do is properly format a URL and then redirect the user to that point so so they can authenticate into their Coinbase account. A useful trick is to put all of these parameters in an object and then use query string stringify to add them to the URL. It'll make your code a lot more readable and maintainable. The scope parameter is the interesting one. That'll tell us the permission level that we have on the user's account, which in this case will be able to read that user's wallet. And you can get additional details on each of these parameters from the Coinbase docs. So So now we're gonna switch gears into Angular and we'll see how we can trigger this redirect URL. First, I'm going to generate a component for the user details, then I'll generate another to handle the auth redirect, and I'll generate a service so we can share some functionality between components. Let's go ahead and start in the auth service where we import AngularFireAuth. Then in the constructor, we will observe the auth state from Firebase. So the user observable is the current user from Firebase. What I do next here is considered a bad practice in Angular, but I'm doing it to keep this demo simple. I'm opening a pop up window that points to our redirect cloud function. The proper way to do this is to wrap the window in its own service so you can use it in non browser environment such as on the server or in a mobile app. There's still a lot of code to get through, so I'm just going to cheat a little bit on this one. Auth. So that's going to open the pop up, and then once we actually have the minted token from Firebase, we're going to call sign in with custom token from AngularFireAuth. Auth. This method just allows you to sign in with your own custom minted token. And once signed in, we'll just go ahead and cheat again and call window close to close the pop up. Before we jump into the components, I'm going to go into the app routing module, and you can see we have the user details component on the root path and then we have auth redirect component at the redirect path. That path should match the redirect URI you set up in Coinbase. Auth, then we'll jump over to the user details component. And right now, all this needs to do is inject the auth service and then we'll unwrap that user observable in the HTML. Model. Later on, we'll get the user's Bitcoin wallet, but for now, we're not going to worry about that. In the HTML, we can unwrap the user observable. And if it's not defined, we'll give the user a button to log in with Coinbase. Now let's go ahead and run our Cloud Functions by running npm run serve from the functions directory. That should tell you that Cloud Functions are being emulated on port 5000. Then if we go into Angular and click log in with Coinbase, op it brings up this pop up and redirects us to our Coinbase account. It requires the user to sign in with 2 factor authentication, so it'll send them a text message they're gonna have to verify inside this form. After they log in to the Firebase account, then they can click authorize and that redirects us back to our Angular app inside this pop up. At this point, nothing happens because we still need to mint our authentication token and create the user in Firebase. We're going to do that by going back to index auth TS inside of our Cloud Functions directory. We're going to wrap the request response inside of CORS, and then we're going to return a Promise from the function called mint auth token, and that's just going to return our custom token in JSON format. So that looks nice and simple, but there's actually a lot more to it. Instead of writing a big long Promise chain, I'm going to use an asynchronous helper function. So we do that by using the async keyword followed by the function mint auth token, and it's going to take the request as an argument. If you're not familiar with AsyncAwait, it's nothing more than syntactic sugar for Promises. Our async function returns a Promise itself, and it does that by awaiting a bunch of other Promises inside of itself. It results in way better code readability when you need to share values at different points in the Promise chain. The first thing we need to do is hit the Coinbase API for the access token and refresh token. We We can do that by defining our query parameters just like we did in the previous function, then set that as the endpoint variable. Then this login variable, notice it, awaits a post request to this endpoint. The value of the login variable is going to be the response from this endpoint, which should be the Coinbase access token and refresh token. Token. What's really cool is we can just treat them like normal variables even though it's an asynchronous operation that would normally require us to call then. Once we have an access token from Coinbase, we can make API calls on the user's behalf. So the first thing we're going to do is get their user profile by calling this Get Coinbase user method that we're going to define next. Then that's also gonna be a response of some data including the user's Coinbase user ID. Now that we have that, we can actually mint our own custom Firebase auth token. So we call admin auth create custom token with the Coinbase user ID. Then one last thing we're going to do is save the Coinbase access token and refresh token in Firebase. And I wanna point out that it's really important that you have good security rules on these. They should really only be accessed by the admin on a back end server. Then we can just have this function return the auth token. So in other words, it's going to return a Promise of the auth token string. Now that we have this access token from Coinbase, we can start making calls to the API. I went ahead and extracted this into its own function because it's probably something that you'll wanna reuse. It makes a get request to Coinbase. And the important part here is in this request, we need to have an authorization header that's formatted in a very specific way. It should say authorization with bearer and then the actual access token after it. So that's all there is to it for the Cloud function part. Now we need to go back to Angular and fill out our auth redirect component. Again, this is the component that lives in that pop up window that Coinbase redirects to after the user signs in on their Coinbase account. Auth. Coinbase sends back the auth code in the query parameters, so we're going to use activated route to retrieve it. And we'll also bring in our auth service and the HTTP client from Angular. During n g on init, we'll get the actual query parameter code from the URL sent back to us from Coinbase. Then we can use it to make a request to our Cloud Function endpoint and mint the actual auth token. If the code is defined, then we'll point to local host 5000, auth, and we'll make a post request to that endpoint. And with the response we get back, which is going to be the custom auth token, we can then use it to call custom sign in from our auth service, which will authenticate the user. Then make sure to subscribe to send the request. Let's go back to Angular and try out our login button again. This time we go to Coinbase as expected and then authorize. Auth. And now it's calling the Cloud function and minting that token. After a second or 2, it closes, and we're logged into Firebase with our custom user ID. Auth. You can verify the user is created by going into your authentication tab in Firebase, and you should see your custom user in there. Then you'll also want to go into the Real Time Database and make sure the access token and refresh token are saved under that user ID. And again make sure you have these locked down in your back end database rules. I'm going to go ahead and wrap up the video here, but in the next video I'm going to show you how to use these access and refresh tokens to make requests to the Coinbase API. You'll be able to send and receive Bitcoin payments as well as see the balance in the user's wallet, and it opens the door for all kinds different creative cryptocurrency features. That's it for Coinbase OAuth with Firebase. If this video helped you, please like and subscribe. And if you're serious about building apps with the stack, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project support and a whole bunch of other exclusive content. Thanks for watching, and I'll see you soon.
The speakers discuss building cryptocurrencies and their use of Cloud function and redirect URL. They also discuss the importance of good security rules and setting up default token fields. The process is explained, including injecting the denies service and setting up a default token. The speakers emphasize the importance of good security rules and recommend using Cloud functions to reset tokens and refresh them for the Cloud function. They also mention a free book and a project support link.