How to authenticate my user with React Material UI components?

Question

I'm using ReactJs in an application and I need to authenticate/validate my application users.

I want add some logic for user validations through redux-saga library.

When anyone enters some invalid data, validation messages should be displayed with fields.

import React from 'react';
import history from './history';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';


import { reduxForm, Field } from 'redux-form'
import { connect } from 'react-redux'
// import { Link } from 'react-router'

import Messages from '../notifications/Messages'
import Errors from '../notifications/Errors'
import PropTypes from "prop-types";



import loginRequest from './actions/login'

const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));


const handleSubmit = (event) => {
  event.preventDefault();
  console.log('Submitted!');
}

export default function Login(props) {
  const classes = useStyles();
  const {
    handleSubmit, // remember, Redux Form injects this into our props
    login: {
      requesting,
      successful,
      messages,
      errors,
    },
  } = props

  // Remember, Redux Form passes the form values to our handler
  // In this case it will be an object with `email` and `password`
  // submit = (values) => {
  //   this.props.loginRequest(values)
  // }
// Pass the correct proptypes in for validation
  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        {/* noValidate */}
        <form className={classes.form} onSubmit={handleSubmit(this.submit)} >
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth            
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth           
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>             
        </form>
      </div>      
    </Container>
  );
}


Login.propTypes = {
  handleSubmit: PropTypes.func,
  loginRequest: PropTypes.func,
  login: PropTypes.shape({
    requesting: PropTypes.bool,
    successful: PropTypes.bool,
    messages: PropTypes.array,
    errors: PropTypes.array,
  }),
};

I've grabbed the example code for authentication from here:

https://github.com/jcolemorrison/redux-sagas-authentication-app/blob/login/src/login/index.js

    Application built with
    {
      "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
 "redux": "^4.0.5",
    "redux-saga": "^1.1.3"
    }

The problem i face is getting errors while converting ES6 component class to material Ui pure react component (based on function approach). Both have many variances.

Currently i am getting an error on following conversion but there is a possibility for more errors during conversion.

 submit = (values) => {
     this.props.loginRequest(values)
   }

I tried to follow guides and looked up example implementations but could not find the recommended way to solve the the issue.

I am facing tow major problems

1). Converting Material UI component (based on functional approach) to ES6 class based component.

2). If there is not a simple way for point#1 then I want to convert (provided code in example) ES6 class based component to Pure react component (based on functional approach)

Thank you

Yes.please see here github.com/jcolemorrison/redux-sagas-authentication-app/blob/… — maifs
– maifs, Commented May 13, 2020 at 1:22

wentjun · Accepted Answer · 2020-05-13 01:32:38Z

1

If you are using functional components, there are no class properties, hence you can't use this.

In addition, loginRequest seems to be a redux action. If you want to access it within your component as part of its props, you will need to convert it into a connected component using connect(), and use mapDispatchToProps. Alternatively, you can use the useDispatch hook to dispatch redux actions.

This is one way the submit method should be written (with the useDispatch hook):

const dispatch = useDispatch()

const submit = (values) => {
  dispatch(loginRequest(values));
};

And on your form, you will need to bind the submit method to the onSubmit event

    <form className={classes.form} onSubmit={submit} >

edited May 13, 2020 at 1:32

answered May 13, 2020 at 1:21

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

maifs Over a year ago

Than you wentjun. What other conversions can be an issue ? I usually face too much usage of ES6 bases class components. Should i go for Material UI (function based) components to class based components or class based components to function based components ?

wentjun Over a year ago

To be honest, it doesn't matter if you are using class/function based, as they are opinionated. But moving forward, it is recommended to stick to function components as they tend to be preferred these days.

Collectives™ on Stack Overflow

How to authenticate my user with React Material UI components?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related