joshuaslate/mern-starter

A simple starter/seed project for a fullstack JavaScript app using MongoDB, Express, React, and Node.

MERN Starter

Starter/seed project for MongoDB, Express, React, Node full-stack JavaScript apps.

Newer starter

I have created a new starter, which can be found at https://github.com/joshuaslate/mkrn-starter

It substitutes Koa in for Express, and features more modern syntax, like async/await. I would recommend taking a look at that project instead.

Contributions

Please feel free to contribute to this project. Whether it's features, tests, or code cleanup, any help is welcome at this point.

Relevant tutorials found at https://blog.slatepeak.com

mern-starter's Issues

Social Auth Integration

Hey @joshuaslate, this library is really awesome for starting. I know it is a long term plan but what is your advice for starting doing Social Auth Integration?

Is there an option to verify user emails?

Most sites require you to click a link in the email before your account gets validated but I was not able to find this.
Let me know why you decided not to include this functionality

remove duplicated role declarations

Currently user role is declared in 2 places, which lends itself to bugs when refactoring code.

A better solution would be to have a single source of truth and use variable reference:

const roles = require('helpers/roles.js')

const UserSchema = new Schema({
 // [...]
  role: {
    type: String,
    enum: Object.values(roles),
    default: roles.ROLE_MEMBER
  }

requireOwner and requireAdmin middleware is missing

What the title says.

Make requireAuth routes load after user logs in

Hi,

Great work on this.

Is there a way to use the RequreAuth function only load the files once the user logs in? I have a problem where a lot of my app requires the jwt token which gets stored when the user logs in.

Issue with the current code is that it tries loading all modules (even the ones behind requireAuth

same port for client and server

Hi,
would it possible to make pages and api routing in same project rather than different project and deploy it differently on different ports ?
what kind and where should we modify code to achieve the same.
the jwt , passport is precisely implemented plus even without react implementation would be suffice .
Many thanks !
my case scenarios look likes
https://stackoverflow.com/questions/44098162/segregation-of-multiple-routes-for-pages-and-apis-with-jwt-using-express-in-node

Question about the logout

Hi, I'm very new to React and it's highly possible I'm doing something wrong but I can't figure out if it's a bug or just me not understanding so I'll ask anyway!

There's an action in actions/auth.js that is used to logoutUser. It works properly if you use the /logout route. However, if I don't require auth on the route to GET the API, and that it then sends back a 401 (we agree that it shouldn't but let's say my token expired in the back-end), then we send the error to the errorHandler. When we do that, it then checks for a 401, and if that's a 401, it calls the logoutUser function.

For me, this doesn't work, because it doesn't do anything except call that function, but that function returns a function and we don't do anything with it.

Now I found a way to make it work by passing the "dispatch" object from the errorHandler to the logoutUser function, and use that directly in that function. But I'm pretty sure that's now how it's supposed to work so I was wondering if you could explain to me what I'm missing?

Other than that, I just want to say thank you for your blogs and your starter project, it has helped me an incredible amount and finally me got me started in learning React, so THANK YOU! :)

Nodemon

Hi Joshua:

Just a quickie. Nodemon needs to be added to server/packages.json. I always need to add it on fresh installs....BTW: thanks for the new update!

Cheers,
Dave

/reset-password route should be a GET

I think this line should be a .get() and not a .post():

authRoutes.post('/reset-password/:token', AuthenticationController.verifyToken);

Signout

How to do a 'signout' router for use with this project?

Request for a build script

Hi,

This is a great boiler plate!

Was just wondering, could you please provide a build script for this. I'm new to react, and I'm not sure how this would work.

If it already has a built script- how do I run it?

Thanks

Can't register

Hello !
first of all, i'm new to react redux and your starter is really nice to learn with :)

I have a problem trying to register, when i click to register i fill the inputs with my credentials, then i click register, i can see in network the request payload with all the correct values, but nothing happens.

I should recieve a mail and the app should save me as new user in database.

I would love some help to fix this ! i've added mailgun api key with mailgun domain, i ran my mongodb instance and i have no errors.

Thanks for help :)

PS : after 5min clicked on REGISTER, i got this error :

POST http://localhost:3000/api/auth/register net::ERR_EMPTY_RESPONSE
Error type: auth_error
undefined
Uncaught (in promise) TypeError: Cannot read property 'response' of undefined
at o (bundle.js:3)
at bundle.js:3
o @ bundle.js:3
(anonymous) @ bundle.js:3

fall through on errors

I was having some problems with code executing beyond what it should when an error happened, but I can no longer pinpoint where that was for sure, probably in the forgotPassword middleware.

It looks to me that there's some inconsistence on how you handle the way you call next, sometime you just call next() , sometimes you call "return next()" ?

You can compare with my version of the same function: http://pastie.org/10970014

Cast Error in API call

Hi Joshua:

When I execute the api call to: http://localhost:8080/dashboard/profile I get the following error from the server: CastError: Cast to ObjectId failed for value "undefined" at path "_id".

I'm running the latest versions of everything in both client and server packages. It doesn't seem to be obtaining the _id from MongoDB. Have you seen this before?

BTW: Posting to the DB and registering etc. works fine.

Cheers,
Dave

Recipients doesn't show up on Compose Message component

Recipients doesn't show up on Compose Message component

TypeError: Cannot read property _id of undefined

baseUrl : http://localhost:3000/api/chat/new/5bd04769b995dd2d00d7bcb9 [ POST ]

Req :

{
"composedMessage":"hello",
"_id":"5bd04769b995dd2d00d7bcb9"
}

/dashboard/inbox throws Uncaught ReferenceError: api_url is not defined

The server seems to work ok and I can also login with client.

However if I navigate to http://localhost:8080/dashboard/inbox (from Inbox link) then the page shows no conversations and in browser console I've got the error:
Uncaught ReferenceError: api_url is not defined

In the database I have role "Admin" for the user that throws the error (haven't tried other role values yet).
Is the problem somewhere in my configuration or is there a bug in the code?

api/auth/login always shows "Unauthorized" response when invalid email/password is used

When I try to pass wrong email/password then the user.comparePassword function in passport.js always returns "Unauthorized" as response. I could not find any way to fix it. Can you help me with this?

Error: Stripe: "id" must be a string, but got: undefined (on API request to `GET /customers/{id}`)

Has anyone received this error when going to Billing?

redux state would lose in auth.js loginUser

export function loginUser({ email, password }) {
  return function (dispatch) {
    axios.post(`${API_URL}/auth/login`, { email, password })
    .then((response) => {
      cookie.save('token', response.data.token, { path: '/' });
      cookie.save('user', response.data.user, { path: '/' });
      dispatch({ type: AUTH_USER });
      window.location.href = `${CLIENT_ROOT_URL}/dashboard`;
    })
    .catch((error) => {
      errorHandler(dispatch, error.response, AUTH_ERROR);
    });
  };
}

above is login action in auth.js(client----src----actions----auth.js).

If use window.location.href, the page would refresh, redux state would lose, you would always get authenticated state false!

Replace window.location.href with browserHistory, state would be ok!

import { browserHistory } from 'react-router'
browserHistory.push('/some/path')

@joshuaslate

Do NOT return the raw User Entry

Just saw that you return basically the whole user entry.
https://github.com/joshuaslate/mern-starter/blob/master/server/controllers/user.js#L16

I guess you want to use the same function as in the authentication controller.

// Set user info from request
function setUserInfo(request) {
  let getUserInfo = {
    _id: request._id,
    firstName: request.profile.firstName,
    lastName: request.profile.lastName,
    email: request.email,
    role: request.role,
  };

  return getUserInfo;
}

If so, where does it make sense to implement this function.
Do you create a file "common/user.js" folder under the "controllers" directory?

Or does it actually make sense to use the "virtual" function of mongoose since in that case we anyways get the user from the DB.
in the User Model we would add:

UserSchema.virtual('info').get( function(){
  return {
    _id: this._id,
    firstName: this.profile.firstName,
    lastName: this.profile.lastName,
    email: this.email,
    role: this.role,
  }
});

and in the Controller:

res.status(200).json({ user: req.user.info});

And in the Authentication Controller we change that as well.

Move app specific code to another repo or into an examples folder

When first downloading this awesome starter I had to go thru a lot of removing code that I did not need for my app such as socket.io code, chat controllers, mailgun, mailchimp, stripe etc.

I think people would be able to integrate this faster if the extra, non-core code would be opt-in rather than opt-out, ie, put in a separate place.. either that or at least moved into their own specific files (I remember socket.io code was not in a separate file) so that it could be removed in a quicker and safer manner.

Going a step further, it would be great if in the future there would be a way for users to update theirs Mern Starter code without affecting app specific code that they have already added to their own local version

Error while trying forgot password

error in console:
`mern-auth\server\node_modules\mongoose\node_modules\mongodb\lib\utils.js:98
process.nextTick(function() { throw err; });
^

TypeError: Request path contains unescaped characters.
at new ClientRequest (http_client.js:50:11)
at Object.exports.request (http.js:31:10)
at Object.socket.once.exports.request (https.js:182:15)
at Object.request (C:\mern-auth\server\node_modules\mailgun-js\node_modules\proxy-agent\node_modules\agent-base\patch-core.js:52:20)
at Request.performRequest (C:\mern-auth\server\node_modules\mailgun-js\lib\request.js:340:19)
at Request.request (C:\mern-auth\server\node_modules\mailgun-js\lib\request.js:110:10)
at Mailgun.request (C:\mern-auth\server\node_modules\mailgun-js\lib\mailgun.js:71:14)
at constructor.(anonymous function) as send
at Object.exports.sendEmail (C:\mern-auth\server\config\mailgun.js:14:24)
at C:\mern-auth\server\controllers\authentication.js:150:19
at model. (C:\mern-auth\server\node_modules\mongoose\lib\document.js:1894:20)
at next (C:\mern-auth\server\node_modules\mongoose\node_modules\hooks-fixed\hooks.js:89:34)
at fnWrapper (C:\mern-auth\server\node_modules\mongoose\node_modules\hooks-fixed\hooks.js:186:18)
at C:\mern-auth\server\node_modules\mongoose\lib\model.js:3343:16
at C:\mern-auth\server\node_modules\mongoose\lib\model.js:228:5
at C:\mern-auth\server\node_modules\mongoose\lib\model.js:166:9
at handleCallback (C:\mern-auth\server\node_modules\mongoose\node_modules\mongodb\lib\utils.js:96:12)
at C:\mern-auth\server\node_modules\mongoose\node_modules\mongodb\lib\collection.js:1010:5
at commandCallback (C:\mern-auth\server\node_modules\mongoose\node_modules\mongodb\node_modules\mongodb-core\lib\topologies\server.js:1194:9)
at Callbacks.emit (C:\mern-auth\server\node_modules\mongoose\node_modules\mongodb\node_modules\mongodb-core\lib\topologies\server.js:119:3)
at null.messageHandler (C:\mern-auth\server\node_modules\mongoose\node_modules\mongodb\node_modules\mongodb-core\lib\topologies\server.js:358:23)
at Socket. (C:\mern-auth\server\node_modules\mongoose\node_modules\mongodb\node_modules\mongodb-core\lib\connection\connection.js:292:22)
at emitOne (events.js:77:13)
at Socket.emit (events.js:169:7)
at readableAddChunk (_stream_readable.js:153:18)
at Socket.Readable.push (_stream_readable.js:111:10)
at TCP.onread (net.js:531:20)
[nodemon] app crashed - waiting for file changes before starting...`

error in Chrome console:

bundle.js:31950 Uncaught (in promise) TypeError: Cannot read property 'error' of undefined
at http://localhost:8080/bundle.js:31950:50

`function getForgotPasswordToken(_ref3) {
var email = _ref3.email;

  return function (dispatch) {
    _axios2.default.post(API_URL + '/auth/forgot-password', { email: email }).then(function (response) {
      dispatch({
        type: _types.FORGOT_PASSWORD_REQUEST,
        payload: response.data.message
      });
    }).catch(function (response) {
      return dispatch(errorHandler(response.data.error));
    });
  };
}`

Change password doesn't work

http://localhost:3000/api/auth/forgot-password

I got strange response hitting the server with above route. I passed in the email, then try to console.log(err) and the response, both returned null, what is wrong?? I do have a record with tht email in my db.