cornflourblue / react-redux-registration-login-example

React + Redux - User Registration and Login Tutorial & Example

react-redux-registration-login-example

React + Redux - User Registration and Login Tutorial & Example

For documentation and further details go to https://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example

react-redux-registration-login-example's Issues

Using real backend causes Alerts to not persist

Hi great work here.

I have incorporated your code but i found that the alerts do not persist when using a real api. If you require any further information I will try my best to provide.

Deploying to Heroku gives Error

When deploying this to Heroku, an error occurs in which the following log is produced:

2018-12-01T01:37:29.263070+00:00 heroku[web.1]: Starting process with command `npm start`

2018-12-01T01:37:27.000000+00:00 app[api]: Build succeeded

2018-12-01T01:37:32.506185+00:00 heroku[web.1]: Process exited with status 1

2018-12-01T01:37:32.359519+00:00 app[web.1]:

2018-12-01T01:37:32.359538+00:00 app[web.1]: > [email protected] start /app

2018-12-01T01:37:32.359540+00:00 app[web.1]: > webpack-dev-server --open

2018-12-01T01:37:32.359541+00:00 app[web.1]:

2018-12-01T01:37:32.394066+00:00 app[web.1]: sh: 1: webpack-dev-server: not found

2018-12-01T01:37:32.401497+00:00 app[web.1]: npm ERR! file sh

2018-12-01T01:37:32.401869+00:00 app[web.1]: npm ERR! code ELIFECYCLE

2018-12-01T01:37:32.402180+00:00 app[web.1]: npm ERR! errno ENOENT

2018-12-01T01:37:32.402494+00:00 app[web.1]: npm ERR! syscall spawn

2018-12-01T01:37:32.407459+00:00 app[web.1]: npm ERR! [email protected] start: `webpack-dev-server --open`

2018-12-01T01:37:32.407725+00:00 app[web.1]: npm ERR! spawn ENOENT

2018-12-01T01:37:32.408144+00:00 app[web.1]: npm ERR!

2018-12-01T01:37:32.408387+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.

2018-12-01T01:37:32.408605+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

It looks like there is a problem with webpack-dev-server. Is there any way to fix this, and if so, how?

You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored

You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored Getting this error. Any ideas how to fix?

Auth using Oauth2.0

Hey! this example is great but I am looking for something with Oauth 2.0 as the Authentication process and not JWT. My backend API is setup using Django and basically need to access that. I tried replacing the fake backend with some of my chnages but it does not work. Running into many issues. Have you implemented anything using Oauth 2.0?

webpack external config not found

when I run using npm start -s and it compiles I get the following error (tracked down to a webpack external defined as a JSon object for configuration).

./src/_services/user.service.js
Module not found: Can't resolve 'config' in '/Users/james/Documents/Projects/react/Camera/Template/src/_services'

Any thoughts why this is happening?

Jboss server issue

I tried this app to deploy in jboss server, it deployed but when I load the page it loads only the header and footer , doesn't load Router part. My modified App.jsx is here

render() { const { alert } = this.props; return ( <div> <nav style={{ backgroundColor: "#BFBFBF" }}> <div className="container-fluid"> <div className="navbar-brand"> <div className="navbar-header" >System Administration Portal</div> </div> </div> </nav> <div className="col-sm-8 col-sm-offset-2"> {alert.message && <div className={alert ${alert.type}}>{alert.message}</div> } <Router history={history}> <div> <PrivateRoute exact path="/" component={HomePage} /> <Route path="/login" component={LoginPage} /> {/*<Route path="/register" component={RegisterPage} />*/} </div> </Router> </div> <footer className="navbar-fixed-bottom" style={{ backgroundColor: "#BFBFBF" }}> <div className="container"> <div className="row"> &nbsp;&nbsp; </div> </div> </footer> </div> ); }

How to run project subdirectory

Hi

I want to run project as static build. I am creating build using npm run build. This creates dist folder with index.html and main.js. When I deploy this on apache root folder it works fine but when I want to run on subdirectory it is giving me just blank page. I checked web and found there should be some configuration to run project in subdirectory. I was not able to find any solution with webpack for same.

Reducer not working

I have implement new project so i am getting issues with reducer for users only how is working. i am tired to finding it

Dispatch is not a function

I am getting this error " Dispatch is not a function " every time when I run it.

This is the section of code from login Page where i am getting this error.

   handleSubmit(e){
        e.preventDefault();
        console.log(JSON.stringify(this.state));
        this.setState({ submitted : true });
        const { username, password } = this.state;
        // console.log(username);
        // console.log(password);
        const { dispatch } = this.props;
        if ( username && password) {
            console.log('sasjas');
            dispatch(userActions.login(username,password)); //  Dispatch is not a function
        }
    }

Contains insecure dependencies that npm audit requires manual review for.

$ npm audit
=== npm audit security report ===

                             Manual Review
         Some vulnerabilities require your attention to resolve

      Visit https://go.npm.me/audit-guide for additional guidance

Low Prototype Pollution

Package minimist

Patched in >=0.2.1 <1.0.0 || >=1.2.3

Dependency of webpack [dev]

Path webpack > watchpack > watchpack-chokidar2 > chokidar >
fsevents > node-pre-gyp > mkdirp > minimist

More info https://nodesecurity.io/advisories/1179

Low Prototype Pollution

Package minimist

Patched in >=0.2.1 <1.0.0 || >=1.2.3

Dependency of webpack-dev-server [dev]

Path webpack-dev-server > chokidar > fsevents > node-pre-gyp >
mkdirp > minimist

More info https://nodesecurity.io/advisories/1179

Low Prototype Pollution

Package minimist

Patched in >=0.2.1 <1.0.0 || >=1.2.3

Dependency of webpack [dev]

Path webpack > watchpack > watchpack-chokidar2 > chokidar >
fsevents > node-pre-gyp > tar > mkdirp > minimist

More info https://nodesecurity.io/advisories/1179

Low Prototype Pollution

Package minimist

Patched in >=0.2.1 <1.0.0 || >=1.2.3

Dependency of webpack-dev-server [dev]

Path webpack-dev-server > chokidar > fsevents > node-pre-gyp >
tar > mkdirp > minimist

More info https://nodesecurity.io/advisories/1179

Low Prototype Pollution

Package minimist

Patched in >=0.2.1 <1.0.0 || >=1.2.3

Dependency of webpack [dev]

Path webpack > watchpack > watchpack-chokidar2 > chokidar >
fsevents > node-pre-gyp > rc > minimist

More info https://nodesecurity.io/advisories/1179

Low Prototype Pollution

Package minimist

Patched in >=0.2.1 <1.0.0 || >=1.2.3

Dependency of webpack-dev-server [dev]

Path webpack-dev-server > chokidar > fsevents > node-pre-gyp > rc
> minimist

More info https://nodesecurity.io/advisories/1179

found 6 low severity vulnerabilities in 884 scanned packages
6 vulnerabilities require manual review. See the full report for details.

Error with command: npm start

TypeError: Class constructor ServeCommand cannot be invoked without 'new'

How to add Header and Footer section for this page

Please let me know how to add Header and Footer section in this page which is showing only login and register forms.

TypeError: Cannot read property 'then' of undefined

Hi.

I changed the fetch api to axios and am gettin this error.

user.service.js login function;

function login(email, password) {
    let bodyFormData = new FormData();
    bodyFormData.set('email', email);
    bodyFormData.set('password', password);

    axios({
        method: 'POST',
        url: appVars.apiURL + 'api/public/login',
        data: bodyFormData,
        config: {headers: {'Content-Type': 'multipart/form-data'}},
    })
      .then(response => {
          console.info(response);
          localStorage.setItem('user', JSON.stringify(response.data.data.token));
      })
      .catch(function (response) {

      });
}

I changed username strings to email in user.actions.js login function.

My API response

Thanks.

How to implement GetUserById?

Hello,

first of all thank you for the very good introduction to react-redux.
I followed your tutorial but I have now run into problems implementing the UserGetById action.

I have asked a similar question on stackoverflow as well, but no one could help me with it.
https://stackoverflow.com/questions/65583662/react-redux-redux-action-getting-called-multiple-times

I would be very grateful for any assistance!

How I was able to run this code

Of course, I followed the "Running the React + Redux Tutorial Example Locally" in the original article.

1st npm start) Got "error:0308010C:digital envelope routines::unsupported"
Found a stack overflow article and try command "npm audit fix --force"

2nd npm start) Got "TypeError: Cannot read properties of undefined (reading 'tap')"
The error popped up after "webpack-dev-server --open" command.
Found this article and decided reinstall webpack stuffs with the following command lines

npm uninstall webpack webpack-cli webpack-dev-server -force
npm install webpack webpack-cli webpack-dev-server --save-dev

3rd npm start was successful

How to get isAuthenticated info and the user ?

Hello,
I have this system and it works well thank you. Then I have added some other pages and I don't know how to get the isAuthenticated status and the connected user. Is there a way to do that?
Thanks

SCRIPT438: Object doesn't support property or method 'assign'

Giving error when running on IE 11, please fix:-

SCRIPT438: Object doesn't support property or method 'assign'

Build failed ?? How to build application for production

I was trying to make build but i dont know how to do that

Production environment

Hey james,

thank you for your project, it was very helpful.

Matheus

Doesn't stop refreshing and rebuilding

When I tried to run this on both npm and yarn it wouldn't stop compiling the webpack which made it impossible to fill in the form and register before it refreshed. Do you have an idea why this may be happening?