This is the curriculum for the 2018 Foxtrot Web Developer Bootcamp.

The terms Authentication and Authorization are often conflated. Let's clear that up.

Authentication

Authentication is the process of establishing that an entity is what/who it claims to be.
In our industry the entity is often a user. Authentication is often done by providing credentials that are not publicly available, or secret, such as a password; this process is called signing in or logging in.

Wikipedia: Authentication

Authorization

Authorization is process of giving permission to an entity to access a resource. This is often done after an entity has been authenticated.
For instance:

  • Logging into a mail server, gives you access to your email but not others' emails.
  • Logging into Google Drive gives me permission to read some files and permission to edit other files.
  • When I am on internet in the US, I can watch movies on Netflix, but not when I am outside the US.

The last instance shows an authorization scheme that is not dependent on authentication.

Wikipedia: Authorization

Authentication

Front to back communication

User authentication requires the frontend, directly controlled by the user and the backend, controlled by the developer to agree that the user is who he/she claims to be, and that there has been no interference, malicious or otherwise, between the two sides of the system. This is the fundamentals of web application security, we need to make sure we know who is communicating, and that the communication is real. There are many strategies developers use to ensure security in their applications, and just as many opinions on the benefits of each. Some developers opt to construct their own authentication strategy, while others depend on tried and true standard methods supported and maintained by the community as a whole. Best practice is to use standardized and open authentication tools for web apps. Open source tools such as Knock and JWT, the two that we'll be using in class, have many, many smart people driving their development, protecting their apps against bugs and security vulnerabilities. Just as important, these tools are well maintained, assuring that when new security risks are discovered, the tools are patched quickly. It is our responsibility, as users of these tools, to make sure that we stay current with the latest versions, keeping our own apps as safe as possible.

How authentication works

auth workflow

The backend app has the primary responsibility for maintaining security in an application. It is the only place where we as developers can be certain that we have absolute control over our data. The backend uses secrets and hashing algorithms for its secure data that it sends out to browsers and other clients. The server then demands that the client sends a secure token that only the server could have generated with every request that requires authentication.

Authenticating for APIs

Let's take a look at how authentication works on the server. The backend generates a token when a user provides login credentials, and then requires that token on every request with elevated privileges. When working with JSON Web Tokens, we encrypt the data needed to look the user up again and perform operations on that user's behalf. This means that user data is encrypted, then sent to and stored on the client so we have to be certain that the entire transaction is secure. How exactly do we go about this? Let's setup a new Rails application, and take a look.

Routes with Authentication

There are many ways to handle routes with authentication, we will go over one that uses React Router.

We have been using React Router with Switch to form blocks of Routes. But so far we haven`t used the Switch block for very much except to store our routes.

But what if we could make a certain set of routes available if a person is logged in, and a different set of routes available to guest users?

That is what the code below is doing with two Switch blocks using a ternary. If you don`t remember what a ternary is - read about it here: MDN Ternary Conditional

** App.js -- inside the Router

{ (condition will evaluate to true or false)
    /* if condition is true, use these routes */
    ? <Switch>
        <Route exact path="/apartments/new" component={Create} />
        <Route path={`${url}/:id`} component={Show} />
        <Route exact path="/" component={All} />
    </Switch>

    /* else use these routes */
    : <Switch>
        <Route exact path={"/apartments"} component={All} />
        <Redirect from="/apartments/new" to="/Login"/>
        <Redirect from={`${url}/:id`} to="/Login"/>
        <Route exact path="/" component={All} />
    </Switch>
}

HTML/CSS Review Questions

  • Name all types of CSS selectors
  • What is a css Reset for? Why is it important?
  • What is z-index for?
  • What are the important concepts for building responsive web layouts?

Javascript

  • Name at least 3 higher order array methods
  • Explain the difference between a mutator method and an accessor method
  • Explain scope
  • What is an event listener? Name 3 examples
  • What is the difference between == and ===?
  • Can you give an example for destructuring an object or an array?

Ruby (and Rails)

  • What are migration files and why are they important?
  • Explain what routes are available if you see resources :posts in a rails router?
  • What does rails g scaffold ____model name___ build for you?
  • Ruby supports Single Inheritance, Multiple Inheritance, or both?
  • What is ActiveRecord?
  • Explain why "Convention Over Configuration" is an important concept in Rails.

React

  • What is JSX?

App architecture

HTTP/Fetch

Other

  • What tools/process would you use to fix a bug in your code?

- What is a version manager (like RVM, RBENV, and NVM) for?

Authentication Intro

Getting Started

Clone the Rails API

We have created a rails backend app with Devise authentication already hooked up. We will go though all the steps of setting up a rails app with Devise later.

For now, go to this repo:

example-auth-backend

Clone the repo and start the app. Remember all the steps for setting up a rails app!

Clone the React App

We have also created the beginnings of a React front end with a registration page. It is already set to work with the rails api.

Go to the frontend repo example-auth-frontend

Clone the repo and start the app. Remember all the steps for setting up a React app!

Get Aquainted

Take a few moments to look through the React app and the register page. Check to see if you can follow the path of authentication

Challenges

  • create a public page with content
  • create a protected page with content
  • add a Login page with Login functionality
  • add a header with a logout button

Stretch Challenges

  • edit the header to show a logout button when user is logged in and a log in button when user is guest
  • create a dashboard that shows all information for the logged in user