_supabaseClient__WEBPACK_IMPORTED_MODULE_1__.supabase.auth.signIn is not a function

27 views Asked by At

I am trying to sign in to a project I'm working on to test the authentication. Currently, when I try to sign in, I'm met with the error "supabaseClient__WEBPACK_IMPORTED_MODULE_1_.supabase.auth.signIn is not a function"

This is a React project. I'm using Supabase for my authentication. I will include my LogIn.js file (the file housing the log in function) as well as my package.json file so you can see all my dependencies. I cannot for the life of me figure this out haha. Thanks in advance.

LogIn.js:

import React, { useState } from "react";
import { supabase } from "../supabaseClient";
import "./LogIn.css";

const LogIn = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleLogIn = async (e) => {
    e.preventDefault();
    const { error } = await supabase.auth.signIn({ email, password });

    if (error) {
      alert(`Error logging in: ${error.message}`);
    } else {
      alert("Login successful!");
    }
  };

  return (
    <div className="auth-form-container">
      <form className="login-form" onSubmit={handleLogIn}>
        <h1>Welcome back to BookSwap</h1>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <button type="submit">Log In</button>
      </form>
    </div>
  );
};

export default LogIn;

package.json:

{
  "name": "argon-design-system-react",
  "version": "1.1.2",
  "description": "React version of Argon Design System by Creative Tim",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/creativetimofficial/argon-design-system-react.git"
  },
  "keywords": [
    "react",
    "reactjs",
    "argon",
    "argon-react",
    "design",
    "design-react",
    "argon-design",
    "argon-design-react",
    "kit",
    "react-kit",
    "argon-design-system",
    "argon-design-system-react",
    "design-system-react"
  ],
  "author": "Creative Tim",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/creativetimofficial/argon-design-system-react/issues"
  },
  "homepage": "https://demos.creative-tim.com/argon-design-system-react/",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "compile-sass": "sass src/assets/scss/argon-design-system-react.scss src/assets/css/argon-design-system-react.css",
    "minify-sass": "sass src/assets/scss/argon-design-system-react.scss src/assets/css/argon-design-system-react.min.css --style compressed"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.5.1",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@supabase/supabase-js": "^2.41.1",
    "bootstrap": "4.6.2",
    "classnames": "2.3.2",
    "headroom.js": "^0.12.0",
    "moment": "2.29.4",
    "nouislider": "15.4.0",
    "react": ">=16.0.0",
    "react-datetime": "3.2.0",
    "react-dom": ">=16.0.0",
    "react-router-dom": "6.11.1",
    "react-scripts": "5.0.1",
    "reactstrap": "8.10.0",
    "sass": "1.62.1"
  },
  "peerDependencies": {
    "react": ">=16.0.0",
    "react-dom": ">=16.0.0"
  },
  "devDependencies": {
    "@types/markerclustererplus": "2.1.33",
    "@types/react": "18.2.6",
    "eslint-plugin-flowtype": "8.0.3",
    "jquery": "3.7.0",
    "typescript": "5.0.4"
  },
  "overrides": {
    "svgo": "3.0.2"
  }
}

I have tried changing the .signIn to .signInWithPassword, in case I wasn't utilizing the right function based on the library I was using, but that didn't work. I still got the same error, apart from the function it was referencing (sign in vs. sign in with password). I changed the entire LogIn.js function at one point to utilize the supabase OTP method, which worked, but I don't want to utilize a OTP. I want to be able to log in with a username/password.

EDIT

I tried using signInWithPassword again, and it worked. I'm guessing the first time that I did SignInWithPassword (capital S on Sign), and didn't notice.

0

There are 0 answers