Preview

A common authentication scenario

Suppose the server we are working on is for an online store that shows a catalog of Products and Foods. 🛍🛒
Currently, everyone can CRUD everything on our site, but this functionality should be reserved for Admins.
Customers (or clients) should have limited access to our site and will have to register and log-in to access our catalog. 🔐
- For simplicity, Customers can view (Read) the list of items. They cannot Update, Create and Delete
- Of course, we can add features like adding to cart and buying but let's save that for a UI workshop 😉

Customers sign-up and login:

Customer registers for an account, with username, password
Customer logs in to the site
Customer sees the "gated" Food catalog
- this is the resource page that is "gated", i.e. only logged in users can see this page

This is completely separate from the users resource and routes that we did before, to simplify the code.

c6.1 Registration page 📃

Let's create a new folder in routes/ to separate all the authentication route handlers

Views

views/auth/register.ejs

<%- include('../partials/_head'); %>

<body>
	**<form method="post" action="/register">**
		<div class="form-group">
			<label for="name">Name</label>
			<input type="text" **name="name"** class="form-control">
		</div>
		<div class="form-group">
			<label for="name">Username</label>
			<input type="text" **name="username"** class="form-control">
		</div>
		<div class="form-group">
			<label for="name">Password</label>
			<input type="password" **name="password"** class="form-control">
		</div>
		<div class="form-group">
			<label for="confirm_password">Confirm Password</label>
			<input type="password" **name="confirm_password"** class="form-control">
		</div>
		<div class="form-group">
			<label for="email">Email address</label>
			<input type="email" **name="email"** class="form-control" placeholder="[email protected]">
		</div>
		<div class="form-group">
			<label for="phone">Phone Number</label>
			<input type="text" **name="phone"** class="form-control" placeholder="111-222-3333">
		</div>
		**<button type="submit" class="btn btn-primary">Submit</button>**
	</form>
	<br /><hr /><br />
	<a role="button" class="btn btn-success" href="/login">Login</a>
</body>

views/auth/login.ejs

<%- include('../partials/_head'); %>

<body>
	**<form method="post" action="/login">**
		<div class="form-group">
			<label for="name">Username</label>
			<input type="text" **name="username"** class="form-control">
		</div>
		<div class="form-group">
			<label for="name">Password</label>
			<input type="password" **name="password"** class="form-control">
		</div>
		**<button type="submit" class="btn btn-primary">Submit</button>**
	</form>
	<br /><hr /><br />
	<a role="button" class="btn btn-success" href="/register">Sign Up</a>
</body>