Adding Authentication to YelpCamp

This week I worked on adding authentication to the YelpCamp app I was building through the bootcamp tutorials. I used the npms express-session, passport, passport-local, and passport-local-mongoose. The first I did was call the…

This week I worked on adding authentication to the YelpCamp app I was building through the bootcamp tutorials. I used the npms express-session, passport, passport-local, and passport-local-mongoose. The first I did was call the npms and configure passport so that it ran properly on the app. This included making the app start a session when a user logged in and make sure that passport was able to run user authentication method.

//Passport Configuration
app.use(require("express-session")({
    secret:"This is the YelpCamp secret!",
    resave: false,
    saveUninitialize: false
}));
app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

After setting up passport I created a user model that was then imported into our main app file. In this user model my user mongoose schema is held. We also called passport-local-mongoose which allowed us to export our user schema with access to passport methods.

var mongoose = require("mongoose");
var passportLocalMongoose = require("passport-local-mongoose");

var UserSchema = new mongoose.Schema({
    
    username: String,
    password: String
    
});

UserSchema.plugin(passportLocalMongoose);

module.exports = mongoose.model("User", UserSchema);

Once I had my user model was working properly I started creating the signup, login, and logout routes. The first routes I created were the sign up routes which was making sure the register page was called and then having the post route which handled he sign up logic. Then I created the register page which was an ejs file and it contained the registration form.

app.get("/register", function(req, res) {
    res.render("register");
});

//handle sign up logic

app.post("/register", function(req, res) {
    var newUser = new User({username: req.body.username}); 
    User.register( newUser, req.body.password, function(err, user){
        if(err){
            console.log(err);
            return res.render("register");
        }
        passport.authenticate("local")(req, res, function(){
            res.redirect("/campgrounds"); 
        });
    });
});

<% include ./partials/header %>
<h1> Sign Up! </h1>

<form action="/register" method="POST">
    <input type="text" name="username" placeholder="username"/>
    <input type="password" name="password" placeholder="password"/>
    <button> Sign Up </button>
</form>

<% include ./partials/footer %>

The second set of routes I created were the login routes. The first route held the call for the sign page and then the second route handled the login logic. The second route I had to place a middle ware that made sure the user logging was authenticated before sending them to a different page. After both routes were running I created the ejs file that held the login form.

//show login form
app.get("/login", function(req, res){
    res.render("login");
});
// handling login logic
app.post("/login", passport.authenticate("local", 
    {
        successRedirect:"/campgrounds", 
        failureRedirect:"/login"
    }), function(req, res) {
        
});

<% include ./partials/header %>
<h1> Login! </h1>

<form action="/login" method="POST">
    <input type="text" name="username" placeholder="username"/>
    <input type="password" name="password" placeholder="password"/>
    <input type="submit" value="Login"/>
</form>

<% include ./partials/footer %>

The last route that I had to include was the log out page for which I had to only create one route because passport allows us to use a method that automatically runs the logic needed to log out a user. Then once the user was logged out I redirected them to a different page.

//logout route
app.get("/logout", function(req, res) {
    req.logout();
    res.redirect("/campgrounds");
})

The last thing thing I worked on this section was making sure that the right links were showing when a user was logged out and when they were logged in. This involved showing the login and sign up links when a user was not logged in and only showing the log out link when they were logged in. I also made sure that a user wasn’t able to add comments to a post when they were logged in. To do this I had to create a middleware that detected if a user was logged in and the add it to the comment routes. If a user wasn’t logged in and tried to add a comment it would then send them to the login page.

//middleware
function isLoggedIn(req, res, next){
    if(req.isAuthenticated()){
        return next();
    }
    res.redirect("/login");
}

<!DOCTYPE html>
<html>
 
    <header>
        <title> YelpCamp </title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="/stylesheets/main.css">
    </header>
    
    <body>
        
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/"> YelpCamp </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <% if(!currentUser){ %>
                        <li> <a href="/login"> Login </a> </li>
                        <li> <a href="/register"> Sign Up </a> </li>
                        <% }else{ %>
                        <li> <a href="#"> Signed in as <%= currentUser.username %> </a> </li>
                        <li> <a href="/logout"> Logout </a> </li>
                        <% } %>
                    </ul>
                </div>
            </div>
        </nav>

It was great learning about user authentication and I’m also 2-3 sections away from deploying this app so I’m really looking forward to learning how to deploy it.

Project ideas

http://tdc.ds106.us/tdc1317/

http://tdc.ds106.us/tdc978/

I decided to choose these two projects because they can both be correlated if the photos and videos are used correctly. I also choose these two projects because I collect sneakers and enjoy the rewarding feeling of getting pairs that are limited. I am confident with the photography because I like to take pictures of the sneakers I am wearing for the day and post it on my social media accounts. However, when it comes to capturing good shots in a video I think I need to work on the proper settings and angles to get good footage. I think I would be able to create 2-3 different projects based on sneakers because of the different categories I can use in each video. Also I would be able to improve my story telling skills by sharing how and why I decided to purchase each sneaker that I currently have.