Giter Club home page Giter Club logo

express-user-auth-validations's Introduction

README

How this thing was made

Basic setup

  1. $ express user-auth --git --hbs
  2. $ cd user-auth
  3. Create this awesome README and outline all steps as we go!
  4. $ git init
  5. $ git add -A
  6. '$ npm install'
  7. $ DEBUG=user-auth:* npm start
  8. Visit http://localhost:3000/ and ensure all is well
  9. Commit

User can sign up

  1. In layout.hbs, add above {{{body}}}:
<nav>
  <a href="/signup">Sign up</a>
</nav>
  1. In routes/index.js, add route:
router.get('/signup', function(req, res, next) {
  res.render('users/new');
});
  1. Create a file views/users/new.hbs with the following content:
<form action="/users" method="post">
  <label for="email">Email</label>
  <input type="email" name="email" value="">
  <br>
  <label for="password">Password</label>
  <input type="password" name="password" value="">
  <br>
  <input type="submit" value="Sign Up">
</form>
  1. Add the dependencies needed to save user to the database to package.json:
  • "bcrypt":"~0.8.3",
  • "cookie-session": "~1.2.0",
  • "monk": "~1.0.1",
  1. $ npm install
  2. Add to app.js in the top requires:
  • var cookieSession = require('cookie-session')
  1. Add to app.js under the engine setup:
app.set('trust proxy', 1)
app.use(cookieSession({
  name: 'session',
  keys: ['key1', 'key2']
}))
  1. Add to routes/users.js under the requires:
  • var bcrypt = require('bcrypt');
  • var db = require('monk')('localhost/user-auth');
  • var User = db.get('users');
  1. Add route to create user from signup form in users.js:
router.post('/', function(req, res, next) {
  bcrypt.genSalt(10, function(err, salt) {
    bcrypt.hash(req.body.password, salt, function(err, hash) {
      user = User.insert({ email: req.body.email, passwordDigest: hash });
      req.session.currentUserEmail = user.query.email;
      res.redirect('/');
    });
  });
});
  1. Pass in user email into views in the 'routes/index.js' file, updating root path like so:
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Cool App, Dude', currentUserEmail: req.session.currentUserEmail});
});
  1. And finally, update the layout view nav to use your new session:
<nav>
  {{#if currentUserEmail}}
    <h1>Welcome, {{currentUserEmail}}!</h1>
  {{else}}
    <a href="/signup">Sign up</a>
  {{/if}}
</nav>

User can signout

  1. Add a signout link to layout within {{#if currentUserEmail}}:
  • <a href="/signout">Sign out</a>
  1. Add route to index.js:
router.get('/signout', function(req, res, next) {
  req.session = null;
  res.redirect('/');
});

User can signin

  1. Add a signin link to layout.hbs within else portion of {{#if currentUserEmail}}:
  • <a href="/signin">Sign in</a>
  1. Add route to index.js
router.get('/signin', function(req, res, next) {
  res.render('authentication/new');
});
  1. Add views/authentication/new.hbs with the following content:
<h1>Sign in!</h1>
<form action="/authentication" method="post">
  <label for="email">Email</label>
  <input type="email" name="email" value="">
  <br>
  <label for="password">Password</label>
  <input type="password" name="password" value="">
  <br>
  <input type="submit" value="Sign In">
</form>
  1. Add a authentication router to app.js:
  • var authentication = require('./routes/authentication'); near other like route variables
  • app.use('/authentication', authentication); near other like app.use route middleware
  1. Add a new route file routes/authentication.js with the following content:
router.post('/', function(req, res, next) {
  User.findOne({ email: req.body.email }).on('success', function (user) {
    bcrypt.compare(req.body.password, user.passwordDigest, function(err, valid) {
      if (valid) {
        req.session.currentUserEmail = user.email;
        res.redirect('/');
      };
    });
  });
});

express-user-auth-validations's People

Contributors

barteezy avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.