sdk 8.0 FilePicker for SharePoint, giving error "GetDataError: Exception of type 'Microsoft.IdentityModel.Tokens.AudienceUriValidationFailedException' was thrown"

Question

I am trying to implement FilePicker v8 in my application. I am using the Javascript Basic code for developement. For authentication I am using OAuth2 flow and getting the access token. Access token is working with api such as

https://graph.microsoft.com/v1.0/me/drives

But the problem is when I use the same access token for FilePicker, it throws an error: 'PrefetchFailure (3000003, invalid_client). Detailed error from console of FilePicker is

error : GetDataError: Exception of type 'Microsoft.IdentityModel.Tokens.AudienceUriValidationFailedException' was thrown. code : "3000003,invalid_client" message : "Exception of type 'Microsoft.IdentityModel.Tokens.AudienceUriValidationFailedException' was thrown."

I am unable to figure out why picker does not work.

Code is as below:

import { useEffect } from "react";

export interface IProps {

  accessToken: string;

  baseUrl: string;

  onFileSelect: (files: { driveId: string; itemId: string }[]) => void; // Callback for selected files

}

export const launchPicker = async (props: IProps) => {

  if (!props.baseUrl || !props.accessToken) {

console.error("Missing required parameters: baseUrl or accessToken.");
return;

  }

  const params = {

sdk: "8.0",
messaging: {
  origin: window.location.origin,
  channelId: "27",
},
entry: {
  sharePoint: {},
},
authentication: {},
typesAndSources: {
  mode: "all",
  pivots: {
    oneDrive: true,
    recent: true,
  },
},

  };

  let win: Window | null = null;

  let port: MessagePort | null = null;

  // Define the message listener early

  const messageListener = (event: MessageEvent) => {

if (!win || event.source !== win) return;

const message = event.data;

if (message.type === "error") {
  console.error("Picker Error:", message.data);
}

if (message.type === "initialize" && message.channelId === params.messaging.channelId) {
  port = event.ports[0];
  if (port) {
    port.addEventListener("message", (msg) => handleMessage(msg.data));
    port.start();
    port.postMessage({ type: "activate" });
  }
}

  };

  // Add the message listener before opening the window

  window.addEventListener("message", messageListener);

  // Open the picker window

  win = window.open("", "Picker", "width=1080,height=680");

  if (!win) {

console.error("Failed to open the picker window.");
return;

  }

  const queryString = new URLSearchParams({

filePicker: JSON.stringify(params),

  });

  const url = ${props.baseUrl}/_layouts/15/FilePicker.aspx?${queryString};

  const form = win.document.createElement("form");

  form.setAttribute("action", url);

  form.setAttribute("method", "POST");

  win.document.body.append(form);

  const input = win.document.createElement("input");

  input.setAttribute("type", "hidden");

  input.setAttribute("name", "access_token");

  input.setAttribute("value", props.accessToken);

  form.appendChild(input);

  form.submit();

  const handleMessage = (message: any) => {

switch (message.type) {
  case "notification":
    console.log(`Notification: ${message.data}`);
    break;

  case "command":
    if (port) {
      port.postMessage({
        type: "acknowledge",
        id: message.id,
      });
    }

    const command = message.data;

    switch (command.command) {
      case "authenticate":
        const token = props.accessToken;
        if (port && token) {
          port.postMessage({
            type: "result",
            id: message.id,
            data: {
              result: "token",
              token,
            },
          });
        } else {
          console.error("Failed to authenticate.");
        }
        break;

      case "close":
        win?.close();
        break;

      case "pick":
        console.log(`Picked: ${JSON.stringify(command)}`);
        props.onFileSelect(command.files || []);
        if (port) {
          port.postMessage({
            type: "result",
            id: message.id,
            data: { result: "success" },
          });
        }
        win?.close();
        break;

      default:
        console.warn(`Unsupported command: ${command.command}`);
        if (port) {
          port.postMessage({
            result: "error",
            error: {
              code: "unsupportedCommand",
              message: command.command,
            },
            isExpected: true,
          });
        }
        break;
    }
    break;

  default:
    console.warn(`Unknown message type: ${message.type}`);
    break;
}

  };

  // Use interval to clean up when the window is closed

  const interval = setInterval(() => {

if (win?.closed) {
  clearInterval(interval);
  window.removeEventListener("message", messageListener);
}

  }, 500);

};

Permissions available with the access token are:

SharePoint:

1. AllSites.Read
2. MyFiles.Read

Microsoft Graph

1. Files.Read
2. Files.Read.All
3. Files.ReadWrite
4. Files.ReadWrite.All
5. Sites.Read.All
6. Sites.ReadWrite.All
7. User.Read

Answer 1

Hi @Sanyam Sanyam,

As said in this thread: Getting the picker v8.0 to access with MS Graph Token, Filepicker v8.0 does not currently call the graph APIs. v7.2 might be an option to you. We sincerely recommend you go to Microsoft Graph Feedback community to provide your feedback: Microsoft Graph · Community (microsoft.com). This is the best platform to let related team hear from you and make the products and services better for you and others.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.