#100Devs - Auth & Project Night Part 02 (cohort 2)

Class 51 of our Free Web Dev Bootcamp for folx affected by the pandemic. Join live T/Th 6:30pm ET leonnoel.com/twitch and ask questions here: leonnoel.com/discord

Skip to first slide
Slide 1 of 36

 

Auth & Project Night 2

Leon Noel

#100Devs

"Who is that surrounding me?
Enemy, enemy you crossed the wrong boundary, poof!
Wicked witness wizardry
Disappear from here and end up in a tree
Crossed the wrong boundary"

Slide 2 of 36

Agenda

Slide 3 of 36

Questions

About last class or life

Slide 4 of 36

Checking In

Like and Retweet the Tweet

!checkin

Slide 5 of 36

Submitting Work

I WANT IT - CHECKLIST

Homework: https://forms.gle/MUdE5XCY7VGKup1y8

Please Triple Check Before You Submit! No incomplete / fake work. It just makes my life more difficult and won't help you...

 

Slide 6 of 36

BACKEND REVIEW CLASS

SUNDAY Sept 11th
1:00pm EST

Slide 7 of 36

Authentication? Logged In Users? HOW?

Slide 8 of 36

MVC

Slide 9 of 36
Slide 10 of 36

Step 1: Go to File > Preferences > Settings

Step 2: search for "workbench.editor.labelFormat"

Step 3: select medium from a drop-down

Slide 11 of 36

Client Makes A Request

Client

Server

someurl.com/todos

Loggining In or Signing Up redirects you to

Slide 12 of 36

Server Is Setup To Hear That Request

Server

Running Code

We Wrote

To Handle The Request

Slide 13 of 36

Bottom of server.js file

Top of server.js file

routes/todos.js

Slide 14 of 36

Router Hears The Request

routes/todos.js

Slide 15 of 36

WHAT TYPE OF REQUEST WAS IT?

routes/todos.js

Slide 16 of 36

Check If Logged In

routes/todos.js

Slide 17 of 36

ARE YOU LOGGED IN?

middleware/auth.js

 

Slide 18 of 36

Ok, logged in, but what controller?

routes/todos.js

Slide 19 of 36

Controllaaa

Get hip...

Slide 20 of 36

Which METHOD tho...

controllers/todos.js

Slide 21 of 36

routes/todos.js

Slide 22 of 36

Who is logged in?

controllers/todos.js

Slide 23 of 36

SHOW ME THAT REQUEST

Slide 24 of 36

How do I get the todos?

controllers/todos.js

Slide 25 of 36

MONGOOSE

models/todos.js

Slide 26 of 36

Mongoose

Collection

document

document

document

document

Mongoose provides a straight-forward, schema-based solution to model your application data.

Slide 27 of 36

Mongoose

Collection

document

document

document

document

Each schema maps to a MongoDB collection and defines the shape of the documents within that collection.

const UserSchema = new mongoose.Schema({
  userName: { type: String, unique: true },
  email: { type: String, unique: true },
  password: String
})
Slide 28 of 36

Mongoose

Collection

document

document

document

document

Models are fancy constructors compiled from Schema definitions. An instance of a model is called a document.

Models are responsible for creating and reading documents from the underlying MongoDB database.

module.exports = 
  mongoose.model('User', UserSchema)
Slide 29 of 36

It Goes Down In The DB

Slide 30 of 36

Pass It To The Views

controllers/todos.js

Slide 31 of 36

I was running through...

views/todos.ejs

Slide 32 of 36

Render THAT

controllers/todos.js

Slide 33 of 36

HAPPY USER

Slide 34 of 36
Slide 35 of 36

Team Projects!

Group Pairings, Room, Floor, & Table Info

Remo Room 01

Remo Room 02

https://replit.com/@100devs/todo-mvc-auth-local?v=1

Slide 36 of 36

Homework

Do: Finish Project