Login: Login Card in Login - Hbs

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 4

setup the database

installed the dependencies


creating basic express server

Create a Route in index.js so that we can render some views-get for login,dashboard
views-dashboard.hbs,login.hbs to render views or templates
added cdn in main.hbs
static folder
all routes imported to app.js

2 layouts -one for login page because not going to have navbar
-login.hbs,main.hbs

LOGIN
WE CANNOT DO ANYTHING WITHOUT LOGGING IN.If I try to go to
/stories or /anything it’s just going to bounce me back.so I need to
login
set up morgan for login bring in morgan to page app.js

login card in login.hbs

To IMPLEMENT LOGIN, WORKED WITH GOOGLE OAUTH CREATE API


KEY AND API SECRET BY USING GOOGLE CLOUD CONSOLE

Using PASSPORT For Authentication,


---1st create google OAuth 2.0 strategy copied from passport docs it
takes profile data : image,name etc.
in config-PASSPORT.js(where our strategy will go)async way because delaing with Mongoose
FOR mongo DB NEED TO CREATE MODELS--USER.js(bring in mongoose,create schema with fields we
want back)
set up routes to use strategy--auth.js
---2nd once they verify with Google we will save that stuff in our db
and then they can use that as login
---3rd 2 Routes of google

TYPE ROUTES
if after logout we type /dashboard we go there and if we login and
type /login we can go there.
To avoid this we created
a piece of middleware(fxn that has access to request and response
objects)
and protected routes. middleware folder-->auth.js-->creating fxn.
RELOAD
if we reload dashboard kicks me out.To prevent this storing sessions in
database with connect-mongo extension in app.js and pass session
if we go to db we can see sessions .

NAVBAR
for navbar _header.hbs it's partial it's being inserted into another view
and then insert partial in main.hbs with {{>header}}
when we logout this goes to auth logout.

CK EDITOR
using ck editor using cdn for that and put in main.hbs

REQUESTS
make this form do put req for update/edit/delete because we want
updates in server.db
we going to keep method post but middleware method-override going
to replace that with whatever we put stories.js--edit.hbs
delete using method post although not really post because using
override
read more--get request to story/id

LOGOUT
logout in auth.js ,with passport middleware once we login we will have
logout method on the request object so
we can just simply call that request logout and then after we logout
let's just redirect to home page

Models-Story.js
index.js

dashboard.hbs--if stories we will have table on that otherwise show no


stories
_add_btn.hbs--for add button
add.hbs--to add story by post req to /stories , stories.js
stories-index.hbs--for public stories
helpers-hbs.js--to truncate story
dashboard.hbs--edit,delete icon

Express:Our web framework to create routes and more.

Mongoose:To work with our database, to create modes and so on.

Connect-mongo:To store our sessions in our database so that when we


reset the server we don’t get logged out.

Express-session:For session and cookies.

Express-Handlebars:Using as a template engine.

Dotenv:For config so that we can put our environment variables in there

Method-override:That will allow us to make put and delete request from


our templates because by default we can only make get and post.

Moment:This is used to format dates.

Morgan:Used for logging.

Passport:Used for Authentication.And since we are using google for our


login we need passport-google-oauth20 package.

Nodemon:To continuously watch our server so we don’t have to restart


everytime we make a change.
So here are the routes that I have set up for different pages .

ROUTES DESCRIPTION
GET/ Login Page
GET/DASHBOARD Dashboard Page
GET/auth/google Authenticate with Google
GET/auth/google/callback Google auth callback
/auth/logout Logout user
GET/stories/add Show add page
POST/stories Process add form
GET/stories Show all stories
GET/stories/edit/:id Show edit page
PUT/stories/:id Update story
DELETE/stories/:id Delete story
GET/stories/:id Show single story
GET/stories/user/:userId User stories

You might also like