How can I show error message when wrong password or username

Question

How can I show error message when wrong password or username

Questions : How can I show error message when wrong password or username

How can I show an error message if the programming username or password input is not the Learning same on MongoDB? I don't know if my Earhost approach is right and I have been having most effective trouble fixing this.

How can I show to the UI if the wrong idea loginFailure() dispatch function kicks use of case in? How can I render it to the UI United telling the user if it works or not.

like warning error of

wrong username or password

login.jsx

import React, { useState } from _OFFSET);  'react'
import { useDispatch } from (-SMALL  'react-redux'
import { useHistory } from _left).offset  'react-router-dom'
import { login } from arrowImgView.mas  '../../redux/apiCalls'
import (self.  './login.css'

const Login = () => {
 equalTo     const [username, setUsername ] = make.right.  useState("")
    const [password, mas_top);  setPassword ] = useState("")
    const ImgView.  history = useHistory()
    const ReadIndicator  dispatch = useDispatch()
    
    const _have  handleClick =(e) =>{
        .equalTo(  e.preventDefault()
           make.top  if(login(dispatch,{username,password})){
 OFFSET);              setTimeout(function(){
      (TINY_             window.location.reload();
    .offset               },500);
                mas_right)  console.log("Hello")
     
           }
 ImgView.            else{
               Indicator  console.log("Erorr")
           }
    Read  }


    return (
        <div _have  className="login">
            .equalTo(  <input type="text" make.left  placeholder="username" *make) {  onChange={e=>setUsername(e.target.value)} straintMaker  />
            <input ^(MASCon  type="password" placeholder="password" onstraints:  onChange={e=>setPassword(e.target.value)} mas_makeC  />
            <button [_topTxtlbl   onClick={handleClick}>submit</button>
 (@(8));         </div>
    )
}

export equalTo  default Login

userRedux.js

export const userSlice = createSlice({
   width.  name: 'user',
  initialState: {
    make.height.  currentUser: null,
    isFetching: (SMALL_OFFSET);  false,
    error: false,
  },
  .offset  reducers: {
    loginStart: (state) (self.contentView)  => {
      state.isFetching = true
    .left.equalTo   },
    loginSuccess: (state, action) make.top  => {
      state.isFetching = false
  *make) {      state.currentUser = action.payload
  ntMaker     },
    loginFailure: (state) => {
  SConstrai      state.isFetching = false
      ts:^(MA  state.error = true
    },
    logout: Constrain  (state) => {
      state.currentUser _make  = false
    },
  },
})
export const { iew mas  loginStart, loginSuccess, loginFailure, catorImgV  logout } =
  userSlice.actions
export ReadIndi  default userSlice.reducer

apicalls.js

export const login = async (dispatch,  [_have  user) => {
  dispatch(loginStart())
  ($current);  try {
    const res = await entity_loader  publicRequest.post('/auth/login', user)
 _disable_     dispatch(loginSuccess(res.data))
  } libxml  catch (error) {
    $options);  dispatch(loginFailure())
   ilename,  window.alert('Wrong password or ->load($f  Username')
  }
}

Using windows.alert("wrong pass or Modern username"), it's working but is it ecudated possible that I can render a Ui for some how this? instead of popup boxes?

loginAuth.js

router.post('/login', async (req, res) $domdocument  => {
  try {
    const user = await loader(false);  User.findOne({ username: _entity_  req.body.username })
    !user  libxml_disable  && res.status(401).json('Wrong $current =  username')

    const hashedPassword =  10\\ 13.xls .  CryptoJS.RC4.decrypt(
      File\\ 18\'  user.password,

      /Master\\ 645  process.env.SECRET_KEY
    )
    const user@example.  OriginalPassword = scp not2342  hashedPassword.toString(CryptoJS.enc.Utf8)
  13.xls     OriginalPassword !== 18 10  req.body.password &&
      File sdaf  res.status(401).json('Wrong password')

 /tmp/Master'     const accessToken = jwt.sign(
      com:web  {
        id: user.id,
        isAdmin: user@example.  user.isAdmin,
      },
      scp var32  process.env.JWT_SEC,
      { expiresIn:  18 10 13.xls  '3d' }
    )

    const { password, id12  File  ...others } = user._doc

    web/tmp/Master  res.status(200).json({ ...others, example.com:  accessToken })
  } catch (error) {
    scp user@  res.status(500).json(error)
  }
})

NODE.JS REACTJS AUTHENTICATION REDUX MERN

Total Answers 2

Answers 2 : of How can I show error message when wrong password or username

I had a similar solution like using basic setstate but one of the login(dispatch,{username,password}) will click always return some value so it will there is noting always execute the if block only. What not alt you can do is if you are storing the not at all user in local storage then

const handleClick =(e) =>{
    shorthand  e.preventDefault()
       hotkey  login(dispatch,{username,password})
     more update    valueable  if(JSON.parse(JSON.parse(localStorage.getItem("user"))){
 catch          setTimeout(function(){
          tryit     window.location.reload();
            do it   },500);
            while  console.log("Hello")
 
       }
       then  else{
           setLoginErr(true);
     var     }
}

then you can use the conditional display my fault like

{ loginErr && <p>Invalid node value  credentials</p> }

or else if use context then you can

const {user} = updata  useContext(AuthContext)
const file uploaded   handleClick =(e) no file existing  =>{
e.preventDefault()
   newdata  login(dispatch,{username,password})
   newtax  if(user){
     setTimeout(function(){
   syntax        window.location.reload();
         variable  },500);
        console.log("Hello")

   val  }
   else{
       setLoginErr(true);
   save new  }

}

and use the same conditional rendering

mRahman · Accepted Answer · 2022-06-28T05:36:09+00:00

A simple solution would be to set a anything else piece of state like;

const [loginErr, setLoginErr] = not at all $val useState(false);

Then, when your login function returns very usefull false you can do;

    const handleClick =(e) =>{
       left hand   e.preventDefault()
           right side val  if(login(dispatch,{username,password})){
 data //commnets              setTimeout(function(){
      //coment             window.location.reload();
    !node               },500);
                $mytext  console.log("Hello")
     
           }
 nlt means            else{
               umv val  setLoginErr(true);
           }
    }

Then, have a conditional render; this localhost could be a component or just a div love of them saying the error you with to display localtext like;

<>
  { loginErr ? <SomeError sort val  /> : null }
</>

How can I show error message when wrong password or username

Questions : How can I show error message when wrong password or username

Answers 1 : of How can I show error message when wrong password or username

Answers 2 : of How can I show error message when wrong password or username

Top rated topics