shouheiyamauchi / react-passport-example

An example application for authentication using a Node.js back-end and React JS front-end

React Passport Example Application

An example application which combines a back-end which stores user data and front-end React.js application which handles user authentication sessions.

This application be easily separated into two completely different repositories.

Created using the tutorials below:

https://vladimirponomarev.com/blog/authentication-in-react-apps-creating-components https://vladimirponomarev.com/blog/authentication-in-react-apps-jwt

However, this version has replaced the React Router v3 which were used in the above tutorials with the most recent React Router v4 which has some major differences. I also made some minor tweaks to account for the NPM packages which had issues due to updates since the tutorial was published.

This application incorporates the following packages:

• axios
• bcryptjs
• jsonwebtoken
• mongoose
• passport
• react-router-dom
• validator

Installation

After cloning the repo, follow the steps below:

$ cd react-passport-example

$ yarn install

$ sudo mongod

$ yarn run dev

When editing the files, run the following command for webpack to watch your files and bundle whenever changes are made:

$ yarn run bundle

Screenshots

Home page before login:

Sign up page:

Login page:

Dashboard which is only accessible after login:

react-passport-example's Issues

How to create modules

Ok, so I got it to work, but I am having a small issue I need the API url to be able to search collections etc.

how do I set that up?

I tried adding the following to api.js with no success

const express = require('express');
//const Pages = require('mongoose').model('Pages');

const router = new express.Router();

router.get('/dashboard', (req, res) => {
  res.status(200).json({
    message: "You're authorized to see this secret message.",
    // user values passed through from auth middleware
    user: req.user
  });
});

router.get('/pages', (req, res) => {
 /* Pages.find({}, function(err, docs) {
    if (!err){ 
        console.log(docs);
        process.exit();
    } else {throw err;}
  });
*/
  res.status(200).json({
    message: "You're authorized to see to edit pages.",
    // user values passed through from auth middleware
    user: req.user
  });
});

module.exports = router;

DB request in middleware defeats point of JWT

This DB call isn't needed:

react-passport-example/server/middleware/auth-check.js

Line 25 in 6fc204b

return User.findById(userId, (userErr, user) => {

A valid, short-lived JWT should be enough to access an endpoint - you're getting no benefit if your middleware is doing a DB call every request...

Error on dashboard page

After login, if reload page Dashboard on enter manually http://localhost:3000/dashboard the page does not work.

What's the purpose of Base.jsx component?

In the components folder, there's a Base.js component but the code inside it is commented and I did not understand the reason behind this component.

Mongoose install steps missing from README

The instructionsudo mongod (typo?) in the README presumes the installation of an executable. It would be nice to provide minimal guidance to users who are new to mongodb.

wont start on plesk server

I was trying to get this to work on a plesk server and it will not start.

Would be good if this would work from npm install and npm start

-- Other issues

• Name needs to be split into firstname and lastname (when I made changes to the client side and rebuilt the file would not load (just showed blank white screen)

hot reloading

Hot reloading is not working for me. I have to wait several seconds for it be bundled and then I have to refresh the page.