OneDrive Sign-In Issue on First Login Attempt

[a-keta]

I am experiencing an issue with OneDrive sign-in during the first login attempt in my application. I have integrated OneDrive into my Next.js application for file upload functionality. However, when I try to log in for the first time, I encounter the following error message:

However, when I close and reopen the application, I find myself logged in and everything works as expected. The problem only occurs during the first login attempt.

So, When attempting to sign in to OneDrive for the first time, an error occurs, preventing successful authentication. However, upon retrying to access OneDrive, subsequent sign-in attempts are successful, and users are able to access OneDrive smoothly without encountering any errors. This behavior is inconsistent with the expected behavior, as users expect to be able to sign in successfully on their first attempt without encountering errors.

Here is the relevant code snippet from my application:

import Image from "next/image";
import { useState } from "react";
import Loader from "./Loader";

const allowedExtensions = [
  ".pdf",
  ".docx",
  ".doc",
  ".xlsx",
  ".xls",
  ".csv",
  ".png",
  ".jpg",
  ".jpeg",
  ".txt",
];

export default function OneDriveUploader({ checkFileValidation }) {
  const [loading, setLoading] = useState(false);

  const handleSuccess = async (files) => {
    setLoading(() => true);
    const dataPromises = files.value.map((file) =>
      fetch(file["@microsoft.graph.downloadUrl"])
        .then((res) => res.blob())
        .then((blob) =>
          blob
            ? {
                blob: blob,
                name: file.name,
                type: blob.type,
                size: blob.size,
              }
            : null
        )
    );

    const data = await Promise.all(dataPromises);
    checkFileValidation(data);

    setLoading(() => false);
  };

  const launchOneDrivePicker = () => {
    const odOptions = {
      clientId: process.env.NEXT_PUBLIC_ONEDRIVE_CLIENT_ID,
      action: "download",
      multiSelect: true,
      openInNewWindow: true,
      advanced: { filter: allowedExtensions },
      success: handleSuccess,
      cancel: () => console.log("CANCELLED"),
      error: (err) => console.log("ERROR: ", err),
    };
    // eslint-disable-next-line no-undef
    OneDrive.open(odOptions);
  };

  return (
    <div
      id="original-tab-id"
      className="position-relative d-flex align-items-center justify-content-center">
      {loading && <Loader />}
      <button onClick={launchOneDrivePicker} disabled={loading}>
        <Image
          src="/images/file-icons/onedrive.png"
          width={100}
          height={100}
          style={{ opacity: loading ? 0.5 : 1 }}
          alt="onedrive"
        />
        <p>Onedrive</p>
      </button>
    </div>
  );
}

I have already tried the general troubleshooting steps such as checking for updates and resetting OneDrive, but the issue persists. Any help or guidance would be greatly appreciated.

Note: I also have a script for this component in my layout

<script
  type="text/javascript"
  src="https://js.live.net/v7.2/OneDrive.js"
></script>