Preview

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/00c38b8e-c55f-4258-a572-560aa19720fe/c64_gated_resource_and_logout.gif

A common authentication scenario

Customers sign-up and login:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bbd43a01-7f2f-47ab-8ce2-9700b8bdd9e6/c6.1_auth_scenario.png

  1. Customer registers for an account, with username, password
  2. Customer logs in to the site
  3. Customer sees the "gated" Food catalog

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="johndoe@example.com">
		</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>