2024-02-29

• Review: You need GitHub Student Developer Pack and a Frontend Masters account to pass code interviews.

  • It is the textbook for this class. If you already have access, get started watching video cources in the next section.
  • If you don't have access yet, follow these instructions
  • Email Registrar's office to get proof of academic registration this quarter.

• Pick one of the following to practice visualizing data

  • Get started on Front-End HW 08 by watching Frontend Masters video course for either Plot (most beginner-friendly) or D3.js (most flexible and powerful) in class.
    • Keep your VSCode side-by-side with the video screen and type out the examples as you are watching.
  • Continue working on U.S. Cities Data Map
    1. Try to display the U.S. map outline
    2. Try to display U.S. cities on the map outline
    3. Try to display U.S. cities with circles proportional to population on the map outline

We'll practice sending API calls with a graphical tool, and then write an HTML form to send these calls for us.

• Open VSCode and install the "Thunderclient" VS Code Plugin
  • POST https://indira.arcology.builders/signup
    • with JSON body (don't choose abc or other three-letter placeholders, they are probably already in the database)

{
  "username": "<YOUR_NAME>",
  "password": "<SOME_PASSWORD>"
}

• POST https://indira.arcology.builders/signin
  • with JSON body

{
  "username": "<YOUR_NAME>",
  "password": "<A_DIFFERENT_PASSWORD>"
}

Try logging in with both correct and incorrect passwords to notice the difference in

• the error message in the response body
• the status code

These are the main ways that your UI will use to display these errors to the user.

Clone this repo from Maximiliano Firtman's front-end authentication course onto your laptop / GitPod / GitHub Codespaces.

https://github.com/firtman/coffeemasters-authn

Copy and paste the HTML and JS into your final project as desired. You can adapt the CSS or use your own CSS to match the style of your project. By the end of this exercise, you will a signup/signin form and basic functionality for your project's frontend, and then we'll connect it to your project's backend in the afternoon.

Watch his course to complete the forms and complete the exercises below. INSTEAD of starting his local Express server, serve the index.html page with the Python server

cd <DIR_WITH_INDEX_HTML>
sudo python3 -m http.server 5000

If you have already completed the classic login flow, proceed to the next section.

Open a browser tab to http://localhost:5000 on the same computer to test.

Then change the submit <button> click handlers to send fetch calls to the URLs that you practiced above in Thunderclient. Based on a successful login or successful user registration, change the display of your HTML using Javascript.

Once you have the token returned from a successful call to /signup or /signin calls, copy and save it somewhere, like a text editor. It will look like a unique string of random-looking letters, numbers, and symbols. For example:

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhYmMiLCJpYXQiOjE3MDkyMDIzNzd9.N1pUKS-YvzTIW5iTCKTa-ljOl6CgthgN-LQllH9prYo"
}

You can debug / decode this JWT by using the official website tool.

https://jwt.io/#debugger-io

Paste the token into the left-hand side and click "Decode". You can see the payload and the internet access time match what you encoded and when.

LocalStorage is a 2 MB persistent memory space that is kept by most modern browsers for each internet hostname. It is a separate storage area, but similar, to cookie storage and session storage. Like cookies but unlike sessionStorage, localStorage persists its data until you explicitly overwrite it, or clear the entire store.

With localhost:5000 loaded in a browser, open the web inspector and go to the Console.

Type and afterwards press Enter:

localStorage

You will see a Javascript object, or a map, mostly likely empty. Nothing has been put into localStorage for this hostname yet.

localStorage["token"] = "<TOKEN_COPIED_AND_PASTED>"

You might guess that localStorage is just a hashmap of strings to other strings. You'd be right. In that way, it is similar to Redis or other key-value stores, except that it is local and private to your browser as a client, requiring no extra setup. It is not accessible to servers, so the only way to use it is to write Javascript that is loaded by your static HTML pages, which run in the browser and act on behalf of the client.

Now try and retrieve the value associated with the key token

localStorage["token"]

Here's an example of what your session might look like

While you're at it, you can try to save random keys and values into sessionStorage using the web console as well. Don't worry, you can check a key first to make sure the associated value is undefined. If that's the case, you're not overwriting any key-value binding.

Same as before,

sessionStorage["<KEY>"]

should evaluated to `undefined.

Then assign any value to it,

sessionStorage["<KEY>"] = "<VALUE>"

and try evaluating it again.

Now try open another tab to a well-known public site of your choice, open the web inspector, and try seeing what is in the localStorage for this other hostname.

You can close your browser tab, or your entire browser, and navigate back to localhost:5000 or any other site, and try to inspect localStorage again. Are your values saved? What about sessionStorage?

Finally, in your adaption of Firtman's index.html authentication example, add some lines to the Javascript so that

• On successful /signin or /signup it saves the resulting token into localStorage, as you've practiced above.
• On initial load, it checks where localStorage contains a token, and if so, immediately displays the logged-in "Profile" page. There's no need to login or signup in this case.

That's it. You can use this

How to?

1. Serving a Built React Static Site with Express
2. Add a JSON / YAML / other config file into our monorepo, tagging which directories to serve on what AWS host, and how
3. Unmount, repair, and re-mount an AWS volume of a server that has been disconnected by any of the following
   • misconfigured firewall cutting off SSH access
   • lost PEM file
   • rogue systemd service that immediately starts up and pegs the CPU
4. How to start and run our API and UI server as a systemd service
5. How to backup our database incrementally every day, or every few days, allowing for restore if necessary

These will be presented as Infra Homework 09 next week.

• Continue working on authenticated routes

• Enable proxy_pass on your NGINX server.

• How to serve your UI from your API server

• If you would like to start fresh with Typescript + Express

  • Week 08 Infra Setup