Setting up Firebase with Firestore, Authentication and React

Following along from my previous post about Google Cloud Platform I wanted to touch on Firebase. If you're a mobile developer by trade you're probably very familiar with it, however, if your new to the industry you might not have, so here's why it's great.

Setup

It's extremely simple to set up, got a Google account? You're done. Within minutes you can have a project set up. Want to connect it to a React frontend?

Simply add the SDK

yarn add firebase

Then add the following lines to a global config file so that you can import the Firebase component in other areas of your application.

import firebase from 'firebase'

var config = {
  apiKey: 'APIKEY',
  authDomain: 'domainname.firebaseapp.com',
  databaseURL: 'https://example.firebaseio.com',
  projectId: 'exampleproject',
  storageBucket: 'exampleproject.appspot.com',
  messagingSenderId: '0987654321234567890'
}

firebase.initializeApp(config)
export default firebase

For React you then simply import that config file that you created for firebase see above and then start using it!

You do have to remember if you’re going to have a user sign up to your service then you need to flick the switch so that they actually can signup. This is done really easily by navigating to the authentication section in the Firebase console. Once there you can click on the tab labelled “Sign in method” this will bring you here

You then enable all the sign in methods that a user can use.

Done now you have your firebase connection. You can create a new user pretty easily using the following.

firebase
  .auth()
  .createUserWithEmailAndPassword(email, password)

This goes off and creates the user like so.

It's not all about how easy it is to talk to the code, it's also about how easy it is to use the backends interface.

Say you need to add a new collection to your database, you can do so quite easily through the console. Google has done quite a good job in making it feel “Googly”, it follows the same structure as other applications do which makes navigation a breeze. I'll show you just how easy it is right now.

First, you navigate to the ‘database’ tab. Once here for the first time, you will have to create a database.

You start in test mode so that you can actually access it without setting up a whole bunch of important rules which you would need for a production database.

You will then see this screen. This is the newly created database, you now have to add some collections to it. Firebase uses a NoSQL database, this everything is a collection of documents, there is no structure and everything will be returned as JSON.

Create a collection, here I’ve called it ‘Posts’.

You then need to create a document in order for Firebase to set it up properly. As this is NoSQL you can have as many or as little fields as you want on an individual document basis. Here, I’ve only added 2 but feel free to add as many as you want.

All done, you’ve created a collection and a document in that collection. How about we go and grab it.

Calling anything in Firebase is usually a breeze and the trend continues with grabbing data out of a Firebase.

const Posts = () => {
  firebase
    .firestore()
    .collection('Posts')
    .get()
    .then(querySnapshot => {
      console.log(querySnapshot.docs)
    })
}

That's all you need to retrieve all the documents in the post collection and return their title. In essence, I’m calling the Firebase API, talking to the Firestore (the database), pointing to the collection of “Posts” then grabbing them all.

Which looks a little something like this:

I created a second post to prove that you can get more than just one with that code.

As you can see you get two ‘QueryDocumentSnapshot”, you then need to use a map or something to grab the data out of each one, but that's for another time.

How easy was that? With really not a lot of code you have the data that's in the database, it really wasn’t hard and most of all you didn’t have to create a backend and you didn’t have to write a single line of SQL which is always a plus.

Firebase the service I wish I knew about earlier

I only recently discovered Firebase, ever since then I haven’t wanted to write a backend. Sure writing a backend is still going to be required but if you have an idea that you want to get out there, then passing that time, work and effort into a service will save you so much time and a lot of headaches. When you do eventually get millions of users and the feature set of Firebase doesn’t suit your needs then you might have to do something else, but if you have that problem then you’re doing really well.

---

Do you want to learn about Firebase right from the best around? Come learn it from Pluralsight. I’m always learning something new and with Pluralsight I can have unlimited access to all things programming. But hold on, it’s not just programming. There’s photoshop, visual communication, manufacturing and design. There's a whole bunch! Sign up today and get a free 10-day trial!