Security and Keys

Security is no simple matter. It's important to keep security in mind when designing your applications from the beginning. For example, if you accidentally committed your keys to your repository, you'd have to do some trickery to either remove that from the repository's history or, more likely, you'd have to revoke those credentials and generate new ones.

We simply can't have our database credentials visible to the world in our frontend JavaScript, but there are ways for the frontend to work with databases. The first step is to implement the proper security and understand where we can put our credentials, both for the frontend and the backend.

The following topics will be covered in this chapter:

• Authentication versus authorization
• Using Firebase
• .gitignore and environment variables for credentials

Technical requirements

Be prepared to work with the code provided in the Chapter-17 directory of the repository: https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-17. As we'll be working with command-line tools, also have your terminal or command-line shell available. We'll need a modern browser and a local code editor.

Authentication versus authorization

As we begin our exploration of security with JavaScript, it's important to understand the vital difference between authentication and authorization. In a nutshell, authentication is a process whereby a system affirms and acknowledges that you are who you say you are. Think of going to the store to buy a bottle of wine. You may be asked to provide identification that proves you are of or above the legal consumption age of your locale. The clerk has authenticated you with your photo ID to say that yes, you are you because I, the clerk, have matched your face to the photo in the I.D. A second case is when you fly on an airline. When you pass through security, they're also going to check your ID for the same reason: are you who you say you are?

These two use cases end, however, with authorization. Authorization says: I know you are who you say you are. Now, are you allowed to do what you want? In our wine example, if you are above the age of 21...

Using Firebase

For ease of use, I've replicated our restaurant finder app in the Chapter-17 directory in the GitHub repository. Don't forget to include your own environment variables in the .env file from Chapter 15, Combining Node.js with the Frontend, restaurant finder. Take a moment to get this set up and working before we move on.

The next thing we'll need to do is go to Firebase and configure it to use authentication. In the Firebase console, access the Authentication section and set up a sign-in method; for example, you can set up Google authentication. There's a list of methods you can use here, so go ahead and add one or more.

Next, we're going to set our rules in the Real-Time Database section, as follows:

{
  "rules": {
    "restaurants": {
      "$uid": {
        ".write": "auth != null && auth.uid == $uid",
        ".read": "auth != null && auth.uid == $uid"
      }
   ...

.gitignore and environment variables for credentials

As we've been working with .env files, I've made it a point to note that these files should never be committed to the repository. In fact, a good practice is to add an entry to your .gitignore file before you create any sensitive files to ensure you never accidentally commit your credentials. Even if you later delete it from your repository, the file history is maintained and you'll have to invalidate (or cycle) those keys so that they are not exposed in history.

While a full section on Git is beyond the scope of our work here, let's take a look at an example of a .gitignore file:

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env*

npm-debug.log*
yarn-debug.log*
yarn-error.log*

Several of these are entries created by the create-react-app scaffold. Note specifically .env*. The asterisk (or...

Summary

In this chapter, we learned about authentication, authorization, and the difference between the two. Remember that it's usually not enough to only do one or the other: most applications that need credentials need a combination of both.

Firebase is a useful cloud storage database that you can use with existing login systems and can not only be useful as a development resource but can also scale to production-level usage. Lastly, remember these points: because JavaScript is client-side, we have to protect sensitive information in different manners than a purely backend application:

1. Authenticate and authorize to determine who can use which resources.
2. Separate our sensitive data from our public data.
3. Never commit keys and sensitive data to a repository!

It's up to all of us to be good digital citizens, but there are bad actors out there. Protect yourself and your code!

In the next chapter, we'll be tying together Node.js and MongoDB to persist our data. We'll...