rishipr / mern-auth

MERN (+ Redux) user authentication boilerplate with Passport.js and JWT

mern-auth

Minimal full-stack MERN app with authentication using passport and JWTs.

This project uses the following technologies:

• React and React Router for frontend
• Express and Node for the backend
• MongoDB for the database
• Redux for state management between React components

Medium Series

• Build a Login/Auth App with the MERN Stack — Part 1 (Backend)
• Build a Login/Auth App with the MERN Stack — Part 2 (Frontend & Redux Setup)
• Build a Login/Auth App with the MERN Stack — Part 3 (Linking Redux with React Components)

Configuration

Make sure to add your own MONGOURI from your mLab database in config/keys.js.

module.exports = {
  mongoURI: "YOUR_MONGO_URI_HERE",
  secretOrKey: "secret"
};

Quick Start

// Install dependencies for server & client
npm install && npm run client-install

// Run client & server with concurrently
npm run dev

// Server runs on http://localhost:5000 and client on http://localhost:3000

For deploying to Heroku, please refer to this helpful video by TraversyMedia.

mern-auth's Issues

How to enter User profile for this project

Hey bro, can you update this project with user profile? I really need that for my project

REDUX_DEVTOOLS_EXTENSION

For some reason I was getting an undefined apply error and after looking around it looks like REDUX_DEVTOOLS_EXTENSION has to be slightly changed, so instead of whats is on line 14 of store.js I applied the below and was able to get through the error.

    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__() || compose

I want to pass the Id of the user in URL to make axios.get request,How can I do that?

@rishipr

First of all, this was a great article .

I have learnt react-redux from this but I am having issue when I need to pass the ID of the user in the URL,

• I need little bit of understanding here,I am unable to do it?
• Is there any method so that I can use the ID of the signed IN user in making axios.get request to my API.
• Where I need to change the files ?
  Please someone can explain?

react native: how to use in a react native app

Is this application cross platform to work in react native, and if so can you direct me how.

thanks

event on local storage

there should be an event on local storage which triggers when user clears(anyhow) local storage while hovering home page then
user have to login again

How would you implement Server Side Rendering ?

Hey, I love your boilerplate and am actually using it for a project !
Overall everything is exactly how I want it to be, except one thing... SSR !

I am actually having some trouble to implement SSR with your React app. Do you have any idea on how we could upgrade it with SSR ?

Error when following quickstart

It gives the following error:

Cannot find file: 'index.js' does not match the corresponding name on disk: 'C:\Users...\desktop\mern-auth\node_modules\is-empty\lib\Desktop'.

withRouter deprecated, replaced with Navigate and getting useContext error for Register.js

Hi Rishi and all,

First of all thanks, so much for this tutorial.

My challenge is it is 4 years old and we are now using react-router v6 with some deprecations including withRouter which you implement in this MERN-AUTH tutorial.

I am getting withRouter deprecated,
So i replaced with Navigate for register.js here:

export default connect(
mapStateToProps,
{ registerUser }
)(Navigate(Register));

and I get this error getting useContext error on Register.js

Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
at Object.useContext (http://localhost:3000/static/js/bundle.js:47601:25)
at useInRouterContext (http://localhost:3000/static/js/bundle.js:43805:45)
at Navigate (http://localhost:3000/static/js/bundle.js:44689:4)

Note: I am really after the banking tutorial, but since it relies on this one, i had to do this one first.

Any chance of updating this MERN-AUTH tutorial, and the banking tutorial for 2023 react/typescript/node specs for compatibility with react-router version 6 and what else could trigger errors?

Many thanks

Could not proxy request

Getting this error when trying to register a user after initial install:

Proxy error: Could not proxy request /api/users/register from localhost:3000 to http://localhost:5000

How to mapStateToProps Id of the user to authAction

@rishipr
I need help . Please have a look .
I mapped the mapStateToProps like this .

const mapStateToProps = state => ({
  auth: state.auth,
  user: state.user,
  errors: state.errors
});

from my component and when i do axios request in authAction , Do I need to pass directly user directly like

export const registerDevice = (userData, history) => dispatch => {
  axios
    .post("/api/users/addDevice/${user_id}", userData)
    .then(res => history.push("/Comment"))
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

My back-end code is developed such that it takes farm id also,I can make a postman request it's working but I am unable to integrate with front-end part ,little.

//Router for Device Addition in a Specific Farm
//:id@ User Id
//:farmID@ Farm that we want to add the Device.  
router.post("/addDevice/:id/:farmID",(req,res) => {
  const deviceName=req.body.deviceName;
  const deviceType=req.body.deviceType;
  const description=req.body.description;
  const deviceLocation=req.body.deviceLocation;
  const Parameter=req.body.Parameter;
  const Topic=("sagita/"+User.name+"/"+req.params.farmID+"/"+deviceName+"/"+deviceLocation+"/"+Parameter);
  User.findByIdAndUpdate(req.params.id, 
    { $push: { "farm.$[farm].device": {deviceName,deviceType,description,deviceLocation,Parameter,Topic} },
     $currentDate:{lastModified:true,"deviceModified":{$type:"timestamp"}} },
      { arrayFilters: [ { "farm._id": req.params.farmID } ],upsert: true, safe: true, new: true, multi: false},
        function (err, updatedFarm)
         {
          if (err)
          console.log(err);
          res.json({success:true,message:"Farm updated! Roger_That.",body:updatedFarm});
          }); 
   User.aggregate([
    {$group:{ _id:"$device",data:{$push:"$Topic"}} },
  
    {$out:"Data Bucket",}
  ]);
  
});

Originally posted by @BradPrit09 in #15 (comment)

componentWillReceiveProps has been deprecated.

Since componentWillReceiveProps has been deprecated, what should be use and how exactly? Should we replace just componentWillReceiveProps function or there will be slight modifications in the code like how many parameters to pass and so on

Remove footer

Hello brother,

I hope this question will be simple for you: How do I remove the footer on my app? I used your code as a boilerplate, I'm building a "Challenge" app. Here's the screenshot of what I mean:

https://i.imgur.com/kHY9PI4.png

Down there where the mouse is, there is nothing, just empty space. I've tried inspecting the site to see where is this space, but can't even access it. Can you help me with this please?

Thank you for this fine code and all the best!

In Register.js component, there is redundancy in the way you store errors

Both this.state.errors (used in render function) and this.props.errors (never used) are present in Register.js. The errors object should not be in state, and only this.props.errors should be referred to. This is also present in the Login.js component.

register and login button do nothing on click

on clicking button gives error http://localhost:3000/api/users/login 404 (Not Found)

This project is insecure, you can set a random jwt token and still get access to the dashboard

Just a small error checking fix in register.js

Instead of:

if (Validator.isEmpty(data.email)) errors.email = "Email field is required";
if (!Validator.isEmail(data.email)) errors.email = "Email is invalid";

Use this:
if (Validator.isEmpty(data.email)) errors.email = "Email field is required";
else if (!Validator.isEmail(data.email)) errors.email = "Email is invalid";

I was checking if errors work and it was always displaying "Email is invalid" error. Probably because email is also invalid if it's an empty string and then errors.email gets overwritten. :)

Anyway, thanks for this tutorial! I like that the code is clean and it's easy to follow. It helped me with understanding passport and jwt.

stumbled upon this while trying to setup authentication in React

great scaffolding, I will probably use a little of it.
Just letting you know you use classnames on your client react app, but its not included in the package.json

thanks!

Error: Actions must be plain objects.

Hey. Just followed your tutorial, and when i press action button for register or login, it gives me error -

Error: Actions must be plain objects. Use custom middleware for async actions.
this.props.registerUser(newUser, this.props.history); - for example.

How to integrate social login along with this

Hi

How to integrate social login along with this, Is there any plan to create the same in future?

Please let me know

Not able to deploy on aws

showing me /Cannot GET .what ll be the solution on it?

Failed to load resource: the server responded with a status of 404 (Not Found)

On Windows only, all of a sudden, I get that api/users/login:1 is missing.

Both on a clean install (cloning this repo) and my app.

Did anything change on a dependency maybe?

MacOS works OK.

Code missing if jwtToken exist but corresponding data not in DB

In user.js, there should be another API that verifies whether the token is valid... so far, I do not see this here. It trusts what is written to localStorage and immediate 'trust' user should be login and I think this is wrong.

How to test... Launch the app, register the users... then go to Mongo and delete the user without logining out. Now refresh the page. You see the that app keep doing the spinning wait.

Mobile web version not rendering

Not sure if this is an issue with the setup here or something else but my site doesn't render when loading it via moweb (deployed via heroku). any thoughts?

Heroku deploy

Hello brother,

First let me say thank you for this app, it's a really good starter for a project I have. Now to my question, as one of my tasks is to deploy this somewhere and I picked heroku, could you please help me by adding a production configuration to this app? I tried almost all day yesterday and I will continue trying today, so far no success. I've followed the video you provided but no go. Fixed few of the issues I stumbled upon the way. Now the error I get is as follows:

"at=info method=GET path="/" host=still-castle-16013.herokuapp.com request_id=4d24fd1e-2d01-4f61-bdf2-cd1db48c68de fwd="31.176.251.67" dyno=web.1 connect=0ms service=13ms status=404 bytes=380 protocol=https
2019-05-22T07:57:06.298913+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/app/client/build/index.html'"

I've pasted all the code the guy from the video you have left, as the code structure seems to be the same, but I get this path error and I'm not sure how to fix it. This is the code I've added in server.js above the const port part:

// Serve static assets in in production
if (process.env.NODE_ENV === 'production') {
// Set static folder
app.use(express.static('client/build'));

app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
}

Thank you for your help brother!

export 'withRouter' (imported as 'withRouter') was not found in

ERROR in ./src/components/auth/Register.js 308:3-13

export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_DataStaticRouterContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_HistoryRouter, useActionData, useAsyncError, useAsyncValue, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit)

VSCode debug & sourcemap

Am trying to get this project working....in VS Code I have debugger for chrome installed, but I can't get breakpoints or other connections to work. I also don't see sourcemaps in the browser when I navigate to localhost:3000 directly. Can you give guidance?

building a Platform in which users can post their views and comment on it

This project opens a dashboard where it says hello user. I want to extend this project into an application through which the user can go to another page where they can see other people's posts and comment on them. Also they can publish their own posts. Can you help with that?

Does not work on Heroku

Context: The app is working fine on the localhost. I've tested APIs and React components and the result was flawless.

Problem:
Followed all the steps from this video https://www.youtube.com/watch?v=71wSzpLyW9k and uploaded the app on Heroku.
The landing page works fine but the resources (like style.css, logo files etc.) are inaccessible from the app. The pages
somename.herokuapp.com/login and somename.herokuapp.com/register return 'Internal Server Error'.

What could be the possible fix for this?