Click here to Skip to main content
15,789,952 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I faced an error and tried to solve this but after wasting my whole day it not be solved. this is My Login.js file

The code which I bold(in the I used I f-else condition). the condition does not work. I set the condition if the user role is admin then redirect to the admin dashboard after login. but when I log in, in the console I received an authtoken. but received an invalid credential(don't know why it shows a toast error message). and also not redirect to the dashboard. if any know how to fix this please let me know I trying to fix it for the last 2 days

What I have tried:

import React, { useState } from 'react'
import loginImg from '../photos/login.jpg'
import {useNavigate} from 'react-router-dom'
//To show Alert messaage
import { toast } from 'react-toastify';
import { Link } from 'react-router-dom';

const Login = () => {
    //To show Error and success login message 

    const [credentials, setCredentials] = useState({ email: "", password: "", role: ""})
    // const [role, setrole] = useState()
    let role = ["admin", "publisher", "employee"]
    const navigate = useNavigate();


    const handleSubmit = async (e) => {
        const response = await fetch("http://localhost:5000/api/auth/login", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'

            body: JSON.stringify({ email:, password: credentials.password, role: credentials.role })
        const json = await response.json();
            if (json.success &&  role === "admin") {
            //save the auth token and redirect
            localStorage.setItem('token', json.authtoken);
            toast.success("login Successfully");
        else if(json.success && role === "employee"){
                //save the auth token and redirect
                localStorage.setItem('token', json.authtoken);
        else if(json.success && role === "publisher"){
                  //save the auth token and redirect
               localStorage.setItem('token', json.authtoken);
            toast.error("invalid credentials");

    const onChange = (e) => {
        setCredentials({ ...credentials, []: });

    return (
            <div className="container-fluid h-custom">
                <div className="row d-flex justify-content-center align-items-center h-100">
                    <div className="col-md-9 col-lg-6 col-xl-5">
                        <img src={loginImg} className="img-fluid" alt="loginimg" />

                    <div className="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
                        <form onSubmit={handleSubmit}>
                    <select className="form-select form-select-lg" id="role" name="role" value={credentials.role}  onChange={onChange} style={{ backgroundColor: "aliceblue", fontWeight: "500" }}>
                        <option defaultValue >Select Role</option>
                        <option value="admin">Admin</option>
                        <option value="publisher">publisher</option>
                        <option value="employee">Employee</option>

                            {/* <!-- Email input --> */}
                            <div className="form-outline mb-4">
                                <label className="form-label" htmlFor="form3Example3">Email address</label>
                                <input type="email" id="email" name="email" value={} onChange={onChange} className="form-control form-control-lg" required
                                    placeholder="Enter a valid email address" style={{ backgroundColor: "#eaedf0" }} />

                            {/* <!-- Password input --> */}
                            <div className="form-outline mb-3">
                                <label className="form-label" htmlFor="form3Example4">Password</label>
                                <input type="password" id="password" name="password" value={credentials.password} onChange={onChange} className="form-control form-control-lg" autoComplete="off"
                                    placeholder="Enter password" required style={{ backgroundColor: "#eaedf0" }} />

                            <div className="d-flex justify-content-between align-items-center">
                                {/* <!-- Checkbox --> */}
                                <div className="form-check mb-0">
                                    <input className="form-check-input me-2" type="checkbox" value="" id="form2Example3" />
                                    <label className="form-check-label" htmlFor="form2Example3">
                                        Remember me
                                <Link to="/Reset" className="link-danger">Forgot password?</Link>
                              <div className="text-center text-lg-start mt-4 pt-2">
                                <button type="submit" className="btn btn-primary btn-lg">Login</button>

export default Login

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900