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.