MERN is easy to understand and I had a great time building my first React/Redux app with it.
However, I don't know how to add user login function by linking react-router to authentication information contained in Redux tree. I found a package called react-router-redux don't know how to plug it into server.js in MERN, since MERN is using a different way of server rendering.
Highly appreciated for any solution Thanks~
Checkout JWT authentication with React and Redux or you can use this package. Both of them seem to have good documentation.
I'm trying to integrate Passport.js ( specifically the github-strategry) into the MERN stack... I have authentication working, however I'm unsure how to get the authenticated info to persist into the store. Any tips? Been mostly following this guide for configuration of passport: jokecamp.com/tutorial-passportjs-authentication-i…
I am also trying to add user authentication to MERN stack. Has there been any new ways of doing this?
Thanks a lot. Currently I successfully applied this approach to authenticate user access within one route, and it so far gives me what I want. Nevertheless, I wonder if the approach of this repo is possible? It provides route based authentication that is more useful for large projects. Thanks~
Hi, i created a very basic auth example, just for learning. I'm curious your opinion about the way. Is good start or i missunderstud something.
I created a git repo: https://github.com/devmetal/mern-auth-example
Currently there is no site or describtion. Im working on it. The main points here:
//routes.js import { Route, IndexRoute } from 'react-router'; import React from 'react'; import App from './container/App'; import PostContainer from './container/PostContainer/PostContainer'; import PostDetailView from './container/PostDetailView/PostDetailView'; import LoginContainer from './container/Login/LoginContainer'; import * as Actions from './redux/actions/auth-actions'; export default (store, req) => { let token = null; if (req && req.session.token) { token = req.session.token; } const requireLogin = (nextState, replace, cb) => { function checkAuth() { const { auth: { isAuthenticated }} = store.getState(); if (!isAuthenticated) { replace('/login'); } cb(); } const { auth: { loaded }} = store.getState(); if (!loaded) { store.dispatch(Actions.checkToken(token)).then(checkAuth); } else { checkAuth(); } }; return ( <Route path="/" component={App} > <IndexRoute component={PostContainer} /> <Route path="/post/:slug" component={PostDetailView} onEnter={requireLogin} /> <Route path="/login" component={LoginContainer} /> </Route> ) }; //auth-actions checkToken export function checkToken(sToken) { return (dispatch) => { const token = typeof window === 'undefined' ? sToken : localStorage.getItem('token'); if (!token) { return Promise.resolve(dispatch(tokenInvalid())); } dispatch(requestCheckToken()); return fetch(`${baseURL}/auth/me`, { method: 'GET', credentials: 'same-origin', headers: new Headers({ 'Authorization': `JWT ${token}` }) }) .then((response) => { if (response.status === 401) { dispatch(tokenInvalid()); return Promise.reject(); } return response.json() }) .then((response) => { const { user } = response; if (!user.ok) { dispatch(tokenInvalid()); return Promise.reject(); } dispatch(tokenValid()); }) .catch((err) => { console.log(err); }) } }I tought the main problem is the storage. On server i dont have a localStorage. The project currently is not consistent because if you login, and reload, the @@Init state sill falsy about authentication. But i think it can be solved by the index.js on server side just like fetchComponentData method.
What dou you think? This is a good way? Or is missed something.
And im really happy with MERN stack :) Thank you for authors!!!