Supabase Login Issue: 'Invalid Login Credential' on Different Device

Question

I'm using Next.js 14 and "@supabase/ssr": "^0.5.2", "@supabase/supabase-js": "^2.47.10" for my backend. I've encountered an issue where I receive the error message "invalid login credential" when trying to log in to my web application on my friend's laptop. However, when I try logging in on my own laptop, the login works successfully without any issues.

I can't figure out why this happens. Here's the code for my login logic:

export async function login(formData: FormData) {
  const supabase = await createClient();

  const data = {
    email: formData.get('email') as string,
    password: formData.get('password') as string,
  };

  console.log("Response data:", data);
  
  const { error } = await supabase.auth.signInWithPassword(data);
  
  console.log("Response error:", error);
  if (error) {
    return { success: false, error: error.message };
  }

  return { success: true };
}

And here’s my login UI component:

'use client';

import React, { useState, FormEvent } from "react";
import {
  Box,
  Typography,
  Button,
  Stack,
  InputAdornment,
  IconButton,
} from "@mui/material";
import { Visibility, VisibilityOff } from "@mui/icons-material";

import CustomTextField from "@/app/(DashboardLayout)/components/forms/theme-elements/CustomTextField";
import { login } from "../login/action";
import { toast } from "react-toastify";

interface loginType {
  title?: string;
  subtitle?: JSX.Element | JSX.Element[];
  subtext?: JSX.Element | JSX.Element[];
}

const AuthLogin = ({ title, subtitle, subtext }: loginType) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
  
    const formData = new FormData();
    formData.append("email", email);
    formData.append("password", password);
  
    const response = await login(formData);
  
    if (!response.success) {
      setError(response.error || "Login failed. Please check your email and password.");
      toast.error(response.error || "Login failed. Please try again.");
    } else {
      setError(""); // Clear error if login is successful
      toast.success("Login successful!");
      window.location.href = "/dashboard"; // Redirect to dashboard
    }
  };
  

  const handleClickShowPassword = () => setShowPassword(!showPassword);

  return (
    <>
      {title && (
        <Typography fontWeight="700" variant="h2" mb={1}>
          {title}
        </Typography>
      )}

      {subtext}

      <form onSubmit={handleSubmit}>
        <Stack>
          <Box>
            <Typography
              variant="subtitle1"
              fontWeight={600}
              component="label"
              htmlFor="email"
              mb="5px"
            >
              Email
            </Typography>
            <CustomTextField
              id="email"
              type="email"
              variant="outlined"
              fullWidth
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </Box>
          <Box mt="25px">
            <Typography
              variant="subtitle1"
              fontWeight={600}
              component="label"
              htmlFor="password"
              mb="5px"
            >
              Password
            </Typography>
            <CustomTextField
              id="password"
              type={showPassword ? "text" : "password"}
              variant="outlined"
              fullWidth
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton
                      aria-label="toggle password visibility"
                      onClick={handleClickShowPassword}
                      edge="end"
                    >
                      {showPassword ? <VisibilityOff /> : <Visibility />}
                    </IconButton>
                  </InputAdornment>
                ),
              }}
            />
          </Box>
        </Stack>

        {error && (
          <Typography color="error" variant="body2">
            {error}
          </Typography>
        )}

        <Box sx={{ my: 2 }}>
          <Button
            sx={{ color: "white" }}
            variant="contained"
            size="large"
            fullWidth
            type="submit"
          >
            Sign In
          </Button>
        </Box>
      </form>

      {subtitle}
    </>
  );
};

export default AuthLogin;

Do you have any idea why the login fails when using a different laptop? Could it be something related to cookies, device configuration, or Supabase settings? Any insights would be greatly appreciated.

Thank you so much!