DEV Community

Balaramakrishna Kamma
Balaramakrishna Kamma

Posted on

Request Aborted (NS_BINDING_ABORT) In Firefox but working in remaining browsers

const Login = () => {

  const { isAuthenticated } = useSelector(

    (rootState: RootState) => rootState.auth

  );

  const router = useRouter();

  const dispatch = useDispatch();

  const searchParams = useSearchParams();

  const [isLoading, setIsLoading] = useState(false);

  const [passwordVisible, setPasswordVisible] = useState(false);

  const togglePasswordVisibility = () => {

    setPasswordVisible(!passwordVisible);

  };

  const ValidationSchema = z.object({

    email: z.string().email("Please enter a valid email address"),

    password: z

      .string()

      .min(8, "Password must be at least 8 characters")

      .max(20, "Password can't exceed 20 characters"),

    remember_me: z.boolean().optional().default(false),

  });

  const [isPending, setIsPending] = useState(false);

  type ValidationSchemaType = z.infer;

  useEffect(() => {

    if (isAuthenticated) {

      router.push("/app");

    }

  }, [isAuthenticated]);

  const {

    watch,

    setValue,

    register,

    handleSubmit,

    formState: { errors },

  } = useForm({

    resolver: zodResolver(ValidationSchema),

  });

  const handleGetProfileData = async () => {

    try {

      const response = await axios.get(${API_URL}/users/api/v1);

      const userData = response?.data?.data;

      return userData;

    } catch (error) {

      console.log(error);

    }

  };

  const onSubmit: SubmitHandler = async data => {

    setIsPending(true);

    try {

      const validatedData = ValidationSchema.parse(data);

      const response = await axios.post(

        API_URL + "/users/api/v1/auth/login",

        validatedData

      );

      const expiryTime = watch("remember_me")

        ? 30 * 24 * 60 * 60 * 1000

        : 7 * 24 * 60 * 60 * 1000;

      setCookie("token", response.data.data.token, {

        secure: true,

        sameSite: "none",

        expires: new Date(Date.now() + expiryTime),

        // domain: process.env.NEXT_PUBLIC_APP_BASE_URL,

      });

      const userData = await handleGetProfileData();

      dispatch(login(userData));

      router.push("/app");

      toast.success(response.data.message);

    } catch (error: any) {

      if (error.response) {

        toast.error(error.response.data.message);

      } else {

        toast.error(error.message);

      }

      console.error("Login failed:", error);

    } finally {

      setIsPending(false);

    }

  };

return(
//rest of code
);
};

I have written like this for user authentication. But I'm getting error request aborted.
-> I have entered credentials and send to backend.
-> Token is generating and get success message.
-> After that I've to redirect to app page. but while redirecting the request is aborting.

can any one help me in this to solve this issue

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Cloudinary image

Need to crop and overlay a logo on 999.999 web images?

No problem! Combine hundreds of advanced image effects directly through an API. Discover all you can do with Cloudinary Image and Video APIs.

Discover