From the course: React: Cloud-Powered Apps with Firebase

Firebase ID tokens

From the course: React: Cloud-Powered Apps with Firebase

Start my 1-month free trial

Firebase ID tokens

“

- [Presenter] So far we've implemented authentication and have allowed authenticated users to edit data and upload files. But how does Firebase check for authenticated users? It does is through Firebase ID tokens, which are essentially JSON web tokens with added data. Every time a user signs in their user credentials are sent to the Firebase authentication backend and exchange for a Firebase ID token, a JWT, and they refresh token, which can be used to retrieve new tokens. JSON web tokens is an industry standard that provides a safe and compact way for representing data transfer between two parties. JWTs can be verified because they are signed, typically using a secret with the HVAC shot 256 algorithm. There are three parts to JSON web tokens, all separated by a dot. The header, the payload and the signature. The header will contain the algorithm with the token type. Typically the header for a JWT will look like this. Here it is specifying that the RSA shot 256 algorithm was used and the type is JWT. The payload includes claim information for an entity, which is most likely a user for your application. There are specific claims that are defined in the JWT standard, and you can also add your own properties to this object. A typical payload will look like this. IAT stands for it should add the timestamp when this JWT was created. It is represented in seconds. Exp stands for expiration time, which is a time that this JWT expires also in seconds. Here we also added metadata about a user. In this case, the email and other properties that are specific to Firebase, you can see how this will be very useful in building a role based authentication system. For instance, we will want to have an admin role that can view and edit all data and do important things like delete users if necessary, right from the web app. This feature will be implementing is called Firebase Custom Claims, and we'll be digging into it. Now here, I want to quickly show you what a Firebase ID token looks like. Let's head over to our web application now. Ensure that a user is logged in, open up your developer tools and head to the application tab. You will see that Firebase has maintained data in local storage for this user. In particular, we can inspect the access token, open up the value object under STS token manager. And you will see the access token here, head over to the sources tab, and then to snippets. We will write a spouse snippet to retrieve this token, which can be very useful for debugging. Let's create a variable to hold the database, can have a request here, which would be indexed DB.open, local storage DB is Firebase, local storage DB. This is for any errors and also for a success event. And we can grab the database from event.target.result. Let's create a transaction here now, and give it a name, let's grab a hold of the object store. And in particular, we'll need to retrieve a specific value. Let's go ahead and grab this key right here. Copy that head back to sources. Then we can paste that here and we can create the on success handler here, scrap the data from event.target.result. Let's log this object out. And we can also grab the token from data.value.ststokenmanager.accesstoken and ensure we close the database. Let's go ahead and run this snippet now. We can see the object here and the access token for this user we can go ahead and grab this token, head over to jwt.io. We can paste that here. Looks like I didn't copy it correctly, right click and copy. We can paste that here. We can see that decoded token here. This token is then sent on every request to Firebase, and that is how the user is able to be verifiable and able to perform operations like updating data and uploading files.

Contents