Using Firestore with Angular - part #1

Using Firestore with Angular - part #1

Wojciech Parys - November 26, 2018

This is the first part of the series “Ultimate Guide to Firestore for Angular”. In this series, we will dive into a new realtime database service - Firestore, which is a competitive solution for Firebase Realtime Database. Both solutions are part of Firebase, which is a Google’s mobile platform that helps you quickly develop high-quality apps and grow your business (but not too much).

So, let’s start with Firebase. Firebase allows developers to focus more on crafting their applications. You don’t need to write APIs, manage servers or worry about authentication. Firebase is your server, your API and your datastore, an all-in-one solution, written so generically that you can modify it to suit most needs. Of course, sometimes you’ll need to use other pieces of the Google Cloud for more advanced applications since Firebase can’t provide everything to everyone. However, it gets pretty close.

Cloud Firestore vs. Realtime Database

On October the 3rd, 2017, Google announced the release of another realtime database service for Firebase known as Firestore. It improves Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster, more secure queries and scales better than the Realtime Database.

Document Structure

In Realtime Database, you can either sort or filter at a time by a selected property in a single query, but you can’t do both. On the other hand, in Cloud Firestore, you can chain filtering and sorting in a single query.

Another change is in an offline support for Web Applications, since Realtime Database supports only mobile clients for IOS and Android. All differences you can find on the Firebase Documentation Page.


In Cloud Firestore, charges are lower than Realtime Database. Realtime Database charges only for bandwidth and storage, but at a higher rate. Cloud Firestore charges primarily for read/write/delete operations performed in your database. Bandwidth and storage are also charged but at a lower rate.

When you use Cloud Firestore, you are charged for the following:

  • The number of reads, writes, and deletes that you perform.
  • The amount of storage that your database uses, including overhead for metadata and indexes.
  • The amount of network bandwidth that you use.


In Cloud Firestore, when you listen to the results of a query, you are charged for a read each time a document in the result set is added or updated. You are also charged for a read when a document is removed from the result set because the document has changed.

Comparison with MongoDB

Comparison with mongo

Getting Started with Firestore

This quick intro shows how to set up a Cloud Firestore project, install all the necessary modules and implement authentication service, so let’s dive into it!

Create a project

  1. Open Firebase Console and create a new project.

  2. In the Database section, click the Get Started button for Cloud Firestore.

  3. Select a starting mode for your Cloud Firestore Security Rules:

    • Test mode - good for getting started, but allows anyone to read and overwrite your data. After testing, make sure to set the security rules
    • Locked mode - Denies all reads and writes from mobile and web clients. Your authenticated application servers (C#, Go, Java, Node.js, PHP, Python, or Ruby) can still access your database.
  4. Click Enable.

  5. Open Authentication section, then go to Providers and make Google auth enabled.

When you create a Cloud Firestore project, it also enables the API in the Cloud API Manager. It’s perfectly fine to start in test mode - you will learn later how to add security rules.

Install Angular Packages

The official Angular library for Firebase is AngularFire2 - since September 2018 it is finally released as v5 and published under @angular/fire package. It requires firebase js sdk too, so make sure it’s installed. You might also want a RxJS library for more complicated queries. All can be done with the following command:

npm install firebase @angular/fire rxjs --save

Once you’ve installed all required dependencies, you need to add firebase config to your environments file. Open /src/environments/environment.ts and add your Firebase configuration. You can find your project configuration in the Firebase Console. From the project settings page, click Add Firebase to your web app.

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'

Then open the /src/app/app.module.ts, inject Firebase providers, and specify your Firebase configuration.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

  imports: [
    AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
export class AppModule {}

Create AuthenticationService

Thanks to Firebase there are many authentication providers built in, so you can add users to your app very easily. In this case, Google OAuth will be used. All that we need to authenticate a user is to implement two simple methods: login and logout. Remember to inject an AngularFireAuth Service, which can be hooked to Sign In / Sign Out buttons in our app.

    private angularFireAuth: AngularFireAuth
) { }

login() {
    const authProvider = new firebase.auth.GoogleAuthProvider();

logout() {

In many cases you will need to display user data. You can store them in a service, or use NgRx Store to handle it for you - I’ve described this library in my previous article. To grab user data simply use authState observer from AngularFireAuth Service, which will emit null or authenticated user data. Here is a simple example of a store effect

  authenticateUser$ = this.actions$
      switchMap(() => {
        return this.angularFireAuth.authState.pipe(
          map((identity: fromFirebase.User) => {
            return identity
              ? new authActions.AuthenticateUserSuccess(ConvertingHelper.extractFirebaseUserInfo(identity))
              : new authActions.AuthenticateUserFail('User Not logged In.');
          catchError(error => of(new authActions.AuthenticateUserFail(error)))

Note that once user has authorized with your app, his profile is not directly connected to your app. After sign in with federated identity provider, such as Google Sign-In or Facebook Login, a new profile is created in your application, so when user changes his profile data in Google Settings, change will not affect your user’s data persisted by your service or NgRx Store. Instead, you can manually change user profile data. See Manage Users page in the documentation.

To be continued

This is just the beginning of our journey through Firebase Cloud. In the next part, we will dive into creating basic and advanced queries, adding, updating and removing data from our database. You will learn how to implement realtime updates - the key feature of Firestore, and how to react to changes in many ways.

About the author

Wojciech Parys

Wojciech Parys

Software Engineer

Linkedin profile Github profile

Wojciech is a Javascript developer with many years of experience. He's always striving to find new ways to evolve and expand his knowledge to be the best he can for himself and others. One thing that sets him apart from other frontend developers is his understanding of backend nature, which he gained through working on many projects as an experienced professional. Wojciech has experience in various frameworks and technologies, giving him a uniquely diverse skill set. Wojciech brings a whole new dimension to his work by being able to contribute significant project improvements.

Tempted to work
on something
as creative?

That’s all we do.

join nexocode

This article is a part of

Zero Legacy
36 articles

Zero Legacy

What goes on behind the scenes in our engineering team? How do we solve large-scale technical challenges? How do we ensure our applications run smoothly? How do we perform testing and strive for clean code?

Follow our article series to get insight into our developers' current work and learn from their experience. Expect to see technical details, architecture discussions, reviews on libraries and tools we use, best practices on software quality, and maybe even some fail stories.

check it out

Zero Legacy

Insights from nexocode team just one click away

Sign up for our newsletter and don't miss out on the updates from our team on engineering and teal culture.


Thanks for joining the newsletter

Check your inbox for the confirmation email & enjoy the read!

This site uses cookies for analytical purposes.

Accept Privacy Policy

In the interests of your safety and to implement the principle of lawful, reliable and transparent processing of your personal data when using our services, we developed this document called the Privacy Policy. This document regulates the processing and protection of Users’ personal data in connection with their use of the Website and has been prepared by Nexocode.

To ensure the protection of Users' personal data, Nexocode applies appropriate organizational and technical solutions to prevent privacy breaches. Nexocode implements measures to ensure security at the level which ensures compliance with applicable Polish and European laws such as:

  1. Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation) (published in the Official Journal of the European Union L 119, p 1); Act of 10 May 2018 on personal data protection (published in the Journal of Laws of 2018, item 1000);
  2. Act of 18 July 2002 on providing services by electronic means;
  3. Telecommunications Law of 16 July 2004.

The Website is secured by the SSL protocol, which provides secure data transmission on the Internet.

1. Definitions

  1. User – a person that uses the Website, i.e. a natural person with full legal capacity, a legal person, or an organizational unit which is not a legal person to which specific provisions grant legal capacity.
  2. Nexocode – NEXOCODE sp. z o.o. with its registered office in Kraków, ul. Wadowicka 7, 30-347 Kraków, entered into the Register of Entrepreneurs of the National Court Register kept by the District Court for Kraków-Śródmieście in Kraków, 11th Commercial Department of the National Court Register, under the KRS number: 0000686992, NIP: 6762533324.
  3. Website – website run by Nexocode, at the URL: whose content is available to authorized persons.
  4. Cookies – small files saved by the server on the User's computer, which the server can read when when the website is accessed from the computer.
  5. SSL protocol – a special standard for transmitting data on the Internet which unlike ordinary methods of data transmission encrypts data transmission.
  6. System log – the information that the User's computer transmits to the server which may contain various data (e.g. the user’s IP number), allowing to determine the approximate location where the connection came from.
  7. IP address – individual number which is usually assigned to every computer connected to the Internet. The IP number can be permanently associated with the computer (static) or assigned to a given connection (dynamic).
  8. GDPR – Regulation 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of individuals regarding the processing of personal data and onthe free transmission of such data, repealing Directive 95/46 / EC (General Data Protection Regulation).
  9. Personal data – information about an identified or identifiable natural person ("data subject"). An identifiable natural person is a person who can be directly or indirectly identified, in particular on the basis of identifiers such as name, identification number, location data, online identifiers or one or more specific factors determining the physical, physiological, genetic, mental, economic, cultural or social identity of a natural person.
  10. Processing – any operations performed on personal data, such as collecting, recording, storing, developing, modifying, sharing, and deleting, especially when performed in IT systems.

2. Cookies

The Website is secured by the SSL protocol, which provides secure data transmission on the Internet. The Website, in accordance with art. 173 of the Telecommunications Act of 16 July 2004 of the Republic of Poland, uses Cookies, i.e. data, in particular text files, stored on the User's end device.
Cookies are used to:

  1. improve user experience and facilitate navigation on the site;
  2. help to identify returning Users who access the website using the device on which Cookies were saved;
  3. creating statistics which help to understand how the Users use websites, which allows to improve their structure and content;
  4. adjusting the content of the Website pages to specific User’s preferences and optimizing the websites website experience to the each User's individual needs.

Cookies usually contain the name of the website from which they originate, their storage time on the end device and a unique number. On our Website, we use the following types of Cookies:

  • "Session" – cookie files stored on the User's end device until the Uses logs out, leaves the website or turns off the web browser;
  • "Persistent" – cookie files stored on the User's end device for the time specified in the Cookie file parameters or until they are deleted by the User;
  • "Performance" – cookies used specifically for gathering data on how visitors use a website to measure the performance of a website;
  • "Strictly necessary" – essential for browsing the website and using its features, such as accessing secure areas of the site;
  • "Functional" – cookies enabling remembering the settings selected by the User and personalizing the User interface;
  • "First-party" – cookies stored by the Website;
  • "Third-party" – cookies derived from a website other than the Website;
  • "Facebook cookies" – You should read Facebook cookies policy:
  • "Other Google cookies" – Refer to Google cookie policy:

3. How System Logs work on the Website

User's activity on the Website, including the User’s Personal Data, is recorded in System Logs. The information collected in the Logs is processed primarily for purposes related to the provision of services, i.e. for the purposes of:

  • analytics – to improve the quality of services provided by us as part of the Website and adapt its functionalities to the needs of the Users. The legal basis for processing in this case is the legitimate interest of Nexocode consisting in analyzing Users' activities and their preferences;
  • fraud detection, identification and countering threats to stability and correct operation of the Website.

4. Cookie mechanism on the Website

Our site uses basic cookies that facilitate the use of its resources. Cookies contain useful information and are stored on the User's computer – our server can read them when connecting to this computer again. Most web browsers allow cookies to be stored on the User's end device by default. Each User can change their Cookie settings in the web browser settings menu: Google ChromeOpen the menu (click the three-dot icon in the upper right corner), Settings > Advanced. In the "Privacy and security" section, click the Content Settings button. In the "Cookies and site date" section you can change the following Cookie settings:

  • Deleting cookies,
  • Blocking cookies by default,
  • Default permission for cookies,
  • Saving Cookies and website data by default and clearing them when the browser is closed,
  • Specifying exceptions for Cookies for specific websites or domains

Internet Explorer 6.0 and 7.0
From the browser menu (upper right corner): Tools > Internet Options > Privacy, click the Sites button. Use the slider to set the desired level, confirm the change with the OK button.

Mozilla Firefox
browser menu: Tools > Options > Privacy and security. Activate the “Custom” field. From there, you can check a relevant field to decide whether or not to accept cookies.

Open the browser’s settings menu: Go to the Advanced section > Site Settings > Cookies and site data. From there, adjust the setting: Allow sites to save and read cookie data

In the Safari drop-down menu, select Preferences and click the Security icon.From there, select the desired security level in the "Accept cookies" area.

Disabling Cookies in your browser does not deprive you of access to the resources of the Website. Web browsers, by default, allow storing Cookies on the User's end device. Website Users can freely adjust cookie settings. The web browser allows you to delete cookies. It is also possible to automatically block cookies. Detailed information on this subject is provided in the help or documentation of the specific web browser used by the User. The User can decide not to receive Cookies by changing browser settings. However, disabling Cookies necessary for authentication, security or remembering User preferences may impact user experience, or even make the Website unusable.

5. Additional information

External links may be placed on the Website enabling Users to directly reach other website. Also, while using the Website, cookies may also be placed on the User’s device from other entities, in particular from third parties such as Google, in order to enable the use the functionalities of the Website integrated with these third parties. Each of such providers sets out the rules for the use of cookies in their privacy policy, so for security reasons we recommend that you read the privacy policy document before using these pages. We reserve the right to change this privacy policy at any time by publishing an updated version on our Website. After making the change, the privacy policy will be published on the page with a new date. For more information on the conditions of providing services, in particular the rules of using the Website, contracting, as well as the conditions of accessing content and using the Website, please refer to the the Website’s Terms and Conditions.

Nexocode Team


Want to be a part of our engineering team?

Join our teal organization and work on challenging projects.