Connecting to Firestore - Link-Sharing Site Part 3

Keywords: #link-sharer #javascript #firebase

New to this series? Start here!

Introduction

Thanks for taking the time to join me on my journey to create a new link-sharing site. In the last post I talked about how I initialised Firebase. Today I get to talk about how I hooked the web app up to work with Firebase’s offerings. In particular I will cover how I connected Firestore and gave users a way to submit and view links stored on it.


Handling Authentication

In the previous post, I also described how I used the Firebase SDK function createUserWithEmailAndPassword() to connect a sign-up form to Firebase Authentication.

Even after signing up, I presumed that I would first have to create the account and then call a sign in function separately. However the Firebase SDK makes it easier than that! If an account is successfully created then the user is automatically signed in.

Web Component Redirects

So, a user has created an account and been signed in. At this point, most sites I know redirect the user back to their previous page or another specific page. To simplify things, I opted to redirect the user to the ‘browse’ page whenever they have signed in. This page is the page where users can ‘browse’ all of the recently added links, it also acts as the home page (see below).

Initially, createAccount() looked like this:

createAccount(email, password) {
  const auth = getAuth();
  createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
      const user = userCredential.user;
  })
}

At first, I called createAccount() and then immediately redirected the user to a new page. Without waiting for the response to createUserWithEmailAndPassword(). I quickly realised this was an issue, whether the account creation was successful or not was not important. If a user clicked the ‘submit’ button in the sign-up form, they were getting redirected, authenticated or not.

However, if an account is not created due to an error such as an invalid email or password being used, then the user interface should give the user an opportunity to amend their form entries. To get around this, I wrapped my createAccount() logic in a Promise:

createAccount(email, password) {
  return new Promise ((resolve, reject) => {
    const auth = getAuth()
    createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
        this.user = userCredential.user;
        resolve()
    })
  })
}

As a relative-newcomer to JavaScript, I am still trying to get to grips with everything related to async, await, Promise etc. So for fellow newcomers, I recently published a guide on getting started with JavaScript Promises.

Signing In

Users could create accounts, hurrah! But they couldn’t yet sign in without making a new account every time. Doesn’t sound too user friendly to me…

Keeping it as simple as possible, I put together a sign in page which looked exactly the same as the sign up page. The only difference being what went on when the user hit ‘submit’. My signIn() method is almost identical to createAccount(). The difference being that signIn() uses signInWithEmailAndPassword() rather than the aforementioned createUserWithEmailAndPassword().

Working Sign-in Page

Now it’s time to celebrate! Working authentication hooked up to Firestore. Users can now create accounts on the site and sign-in later.


Firestore

Conclusion

In this update I have discussed:

I sincerely hope you have enjoyed this update. If you would like to hear when I publish more updates, sign up to the mailing list below or follow me on Twitter.


I hope you enjoyed reading this blog post! Sign up to my newsletter here: