Authentication Using Third-Party Libraries

Prework

Create an account with Auth0 (using GitHub, Google, or any account you prefer) - the account is free.

Learning Goals

• Explore a third-party library to hand over authentication security responsibility
• Extract information from the third-party library about the user who is logged in
• Save that user information to a backend server

Feature Goal

At the end of this, we want to be able to have a frontend application that can let a user login. After the user logs in, some of the user’s information is displayed on the page, and that user information is also sent to the backend to be saved.

Auth0

Auth0 is a software company that gives developers a way to implement a login for their websites without worrying about security and all the little implementation details. When you implement login using Auth0, a user can be redirected to an Auth0 page, login using a number of different methods (Google, Facebook, and many others…), and then redirect back to your website where you have access to information about who has logged in.

There are other third-party libraries that can do what Auth0 is doing. It’s just one that we’ve chosen for the lesson. Some others include Firebase, Stormpath, Passport, and many others.

Let’s Build It!

Let’s build an app with very limited functionality. The frontend application will ultimately display some user information after login to give the user some indication that they are indeed logged in. That information will be sent to the backend server to be saved (and for more feature filled applications, this user data could be used to associate other data with that user, like their personal to-do list, for instance).

Let’s break out into small teams to work on this together.

Frontend Implementation

1. Fork this React app repo to start working on your frontend. Follow the setup instructions to get it started.
2. One frontend person only from each group needs to make a new application in their Auth0 account dashboard. Login to your account, head to your account dashboard (you might need to click on your avatar on the top-right corner to get there), click Applications on the left menu, then Applications again, and then click + Create Application. Name it something appropriate, select Single Page Web Applications, the click Create. Head to the Settings tab for the information you’ll need later on.
3. Use this tutorial provided by Auth0 to work through adding a login. Use http://localhost:3000 for all of the URLs referenced in this guide.
4. Once you have your app logging in and logging out a user, focus on being able to send user data to the backend when the user logs in (coordinate with the backend for what data they need according to the API contract).

Backend Implementation

1. Fork this ExpressJS boilerplate repo to start working on your backend. Follow the setup instructions to get it started.
2. Take a look through the API contract below. Your job is to prepare for the frontend to send you user information (once the user is able to login to the frontend). You’re actually not handling login at all because of the third-party API, which I know feels weird!
3. Use Postman to test your endpoints while you’re waiting on the frontend.

API Contract

Below are the routes the backend server should be able to handle. While the frontend application is being worked on, build your endpoints, and test them with Postman.

Request to add a new user: POST /api/v1/users Content-Type: application/json Body:

{
  name: "",
  email: "",
  avatarUrl: ""
}

Response:

{
  name: "",
  email: "",
  avatarUrl: ""
}

Request to get all users: GET /api/v1/users Content-Type: application/json

Response:

{
  users: [
    {
      name: "",
      email: "",
      avatarUrl: ""
    }
  ]
}

Beyond Login…

Currently, the backend server is not protected. Anyone can send a request to the server and add a user, which could be dangerous. If you’re interested in protecting the backend server to make sure only authorized users/applications can send requests, check out this guide from Auth0 (it works in conjunction with the login flow you all worked on above).