CODEWITHSUNDEEP
reactjsparse-server
Solomon Adewole
Solomon Adewole

Reputation: 11

Parse Server Initialize error in React Js

I've been trying to initialize parse into my react js project, but the screen turns blank and the error message in the console is "Super expression must either be null or a function", I'm trying to authenticate a user with a username and password.

ApiConfig File

import Parse from "parse";

const APP_ID = "FortCore";
const SERVER_URL = "https://test.fortcoretech.com/api";

Parse.initialize(APP_ID);
Parse.serverURL = SERVER_URL;

export default Parse;

login file

import { Card, LoginForm, LoginStyle, Navbar } from "./styled";
import Logo from "../../assets/logo.svg";
import FLogo from "../../assets/flogo.svg";
import { Link, useNavigate } from "react-router-dom";
import { Button } from "../../globalStyle/GlobalStyle";
import { useState } from "react";
import { toast } from "react-toastify";
import Parse from "../../api/ApiConfig";

function LoginScreen() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      const user = await Parse.User.logIn(username, password);
      const isAdmin = user.get("adminStatus") === "super";

      console.log(user);

        if (isAdmin) {
          console.log("User is an admin");
        } else {
          console.log("You do not have admin privileges");
        }
    } catch (error) {
      console.log("Invalid username or password");
    }

    toast.success("Successfully Logged in");
    localStorage.setItem("isAdmin", "isAdmin");
    navigate("/");
  };

  return (
    <>
      <Navbar>
        <div className="content">
          <img src={FLogo} alt="" />
          <p>Admin Portal</p>
        </div>
      </Navbar>
      <LoginStyle>
        <Card>
          <img src={Logo} alt="" />
          <p className="subtext">Admin Authentication</p>

          {/* form  */}

          <LoginForm onSubmit={handleSubmit}>
            <label>Username</label>
            <input
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="Enter username"
              disabled={loading}
              required
            />

            <label>Password</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={loading}
              placeholder="Enter password"
              required
            />

            <div className="div">
              <div className="forgot">
                <Link to="/forgot-password">Forgot your password?</Link>
              </div>

              <Button type="submit">
                {!loading ? "Login" : <div className="loader"></div>}
              </Button>
            </div>
          </LoginForm>
        </Card>
      </LoginStyle>
    </>
  );
}

export default LoginScreen;

Upvotes: 1

Views: 257

Answers (1)

nuser137
nuser137

Reputation: 537

super expression should be inside the function to check adminStatus like this:

const isAdmin = user.get("adminStatus" === "super");

I hope this solves your issue!

Upvotes: 0

Related Questions