Firebase includes an incredibly powerful set of tools which allow us to develop applications with very little boilerplate needed. It has official libraries for Angular allowing us to very easily integrate it into our applications. But what if we’re using Auth0 instead of Firebase Authentication? How do we get the benefits of features like Firestore Rules without using Firebase Authentication?

Fortunately it’s simple to make the connection, all we need is a single API endpoint (whether that be on an API we already have, or even a simple serverless function) which effectively converts the Auth0 JWT token to a Firebase JWT token. We then tell the Angular Firebase library to use this and voilà!

This short tutorial won’t cover creating an API/serverless function/Angular app etc. We’ll just presume that you’re adding this to an existing set of applications. For simplicity, we’ll also presume that the API is written in NodeJS & uses the Auth0 JWT to authenticate so we can stick with one language throughout the tutorial. Many other languages have official Firebase libraries which can also be used.

Converting the JWT

Firstly let’s convert our JWT. We need to install the firebase-admin library as this allows us to easily generate custom Firebase JWT tokens. Follow the official setup instructions to setup and authenticate with your Firebase project.

Then create a new POST route, e.g. POST /convertToken, which will handle our logic. This route should be authenticated using the JWT from Auth0. After the request has passed the authentication step, pull the sub property from the JWT. This is the users’ Auth0 ID.

We can now create a new token with the Firebase library to generate a custom Firebase JWT that has the same user ID as in Auth0.

‍

Now we just return this token to the UI and that’s it for our API.

Using the JWT in the UI

We’re going to be using the official Firebase Angular library to access Firebase in the UI: @angular/fire. Follow the setup instructions and make sure to include AngularFirestoreModule and AngularFireAuthModule in your AppModule imports.

Now all we need to do is hook into the response from when a user logs in and set handle authenticating against Firebase. Once your user logs in, add an API call to generate our Firebase JWT (ensuring that you authenticate this request with the Auth0 JWT). We’ll take the Firebase JWT from the response and simply tell Firebase to use the new token.

‍

‍

From now on, all actions taken with the Firebase library will be authenticated as our Auth0 user. This means you could store a document in Firestore at the location `/users/{auth0-userid}` and easily validate it in the Firestore rules by simply checking:

‍

Conclusion

This was a simplified look into setting up Firestore with Angular and Auth0. Now we can easily use the power of Firestore and other Firebase features in Angular without needing to move to Firebase Authentication.