Coffee Masters Project Setup

[00:00:00]
>> It's time for workshop. So now we will start creating our forms, or in this case enhancing the forms. So if you want to follow along in this website firtman.github.io/authentication, you have the instructions, step-by-step. So in what we will be building, you have here the link to another repo.

[00:00:30]
This is the repo where you have, right now, a basic web app with a basic Node.js server that we're going to use. So you just need to clone this repo, okay? Github.com/firtman/coffeemasters-authn. CoffeeMasters is the name of our web app, is like the coffee shop for Frontend Masters, okay?

[00:00:56]
So we are going to be logging in on that web app. It's a PWA, but in this case, that PWA is just the authentication flow. We don't have content, okay? In the app, just to focus on what we need to do. So after you clone the repo, you just need to execute npm install to install all the dependencies.

[00:01:18]
The dependencies that we already have are basically Express JS for the web server, a couple of plugins for Express JS. Also, we have dependencies on libraries that we will use later, such as a Web Authentication Server Library. We have a library for hashing passwords, okay? So we have all the dependencies that we will use during the day, okay?

[00:01:45]
And npm start will start a server with node-monitor. I'm not sure if you know what node-monitor is actually doing, but it's a monitor, node-monitor, and the idea is that it's monitoring the file system. So if you change the file system, such as we change the server, it will restart the server automatically.

[00:02:05]
So we don't need to kill the server and run the server again. It's just that. So just to make things easier for our development time, okay? Make sense? So I already have it here. It's this one, let me just close everything. I have it on Visual Studio Code.

[00:02:26]
It's this one? Yeah, it's this one. npm install I think I already did that, but I can just do it just for. Yep, it's there, so it's updating so I can now run npm start, and now it's running in port 5050. If you don't like the port, you can change that.

[00:02:46]
So if you open up the root folder we have server.js. And here we have the port number. So if you wanna change that, go ahead, any the port number will work. And we will analyze the code in a second. But let me open, first, the code. I will use Chrome here to do that.

[00:03:06]
Localhost, by the way this isn't my Gmail account, but actually for an email address that I have just created for this workshop. Because we will work with identity and login. It's actually a good idea to create a couple of accounts, fake accounts to work with this. So you don't work with your real Google account or Apple account.

[00:03:28]
It's not a bad idea. Well, I'm going to open localhost 5050, and this is what we see, okay? You can see that it says welcome, you're currently logged out. I can click Log In, and I have a form that is not optimized yet. So now I'm going to optimize it a little bit, or we will do that.

[00:03:47]
So I can log in or I can register a new account instead. And if I go to register a new account it goes to the registration form, okay? It also has an account section, here at the top. But anyway, because we are logged out, it forwards me to Log In when I get there.

[00:04:06]
So it's redirecting me. Everything, this is vanilla js, I'm not using any client-side framework. This is pure Vanilla js. If you wanna see the client-side code that is running right now, of course, we will be playing with it. It's in the public folder. So you have in the public folder an index.html.

[00:04:26]
So here I have the html that we will be enhancing in a second. And within the scripts, we have an API.js file, that is going to be our placeholder for making all the calls to our server. The only part that's already there just to avoid writing code that is boring is the making a PostRequest.

[00:04:50]
So I already have a function that makes a PostRequest to our server, just using the fetch API and parsing the response of JSON, okay? So on the app.js, this is kind of the entry point of my app. So from a DOM perspective, when the page loads or when the page is actually loading, it's executing app.js.

[00:05:12]
And app.js using ES modules is importing the other objects that they have here. I have a router. This is the one that is doing client-side routing, pretty like manual, no framework, okay? Just by changing history.pushState and listening for the popstate event, this is how it works. This is how a react router, or view router, or angular router is working behind the scenes, okay?

[00:05:39]
But this is Vanilla js. So that's why actually when we change URLs, I am going to log in, I'm actually changing the URL, okay? But this is client-side routing, but anilla js, okay? And in auth.js, what we will be doing here is writing all the flows, all the logic the authentication flow will happen here.

[00:06:03]
The only thing that I have right now is a code that says updateStatus, that based on if we are logged in or not is like turning on or off different sections of the page, okay? And I have a little trick here, this one, logged_out, logged_in. But it's doing this because we don't have reactive programming here.

[00:06:27]
So the idea is that every time you call updateStatus, it's looking for elements with this class. Class logged_out, class logged_in, class account_name, and class account_username. No matter where in your HTML you have that class, it will hide or show the elements based on that state, that login state.

[00:06:49]
And account name will show your name, the user's name, and this is the user name that in our case we're going to use the email, okay? So every time you need to show user's name, you put a div, and a span, or anything, with a class account_name, and then your name will be there, okay?

[00:07:07]
It's not a big deal, but just for you to understand what's going on here. And well, CSS, we won't even touch the CSS. So you can play with that later. This is open source, so do whatever you want.