OneDrive Sign-In Issue on First Login Attempt

Question

Hello,

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:

Something went wrong
We're sorry, sign-in isn't working right now. But we're on it! Please try again later.
If this problem persists, contact your support team and include these technical details:
Correlation ID: c0be23a1-b034-8000-b981-35528ac3075a
Date and Time: 4/29/2024 5:05:45 AM
URL: https://onedrive.live.com/
User: ahmedketa12@gmail.com
Issue Type: Unknown issue.

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.

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>

Thanks,

Answer 1

Hi,

I suggest you post this issue to OneDrive for Developer forum:

https://techcommunity.microsoft.com/t5/onedrive-developer/bd-p/OneDriveDeveloper

The reason why we recommend posting appropriately is you will get the most qualified pool of respondents, and other partners who read the forums regularly can either share their knowledge or learn from your interaction with us. Thank you for your understanding.

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.