I want to use Azure Active Directory to allow users to read and write to Azure storage (specifically all Blobs and Tables) from a single-page web app.

I started like this:

import { InteractiveBrowserCredential } from '@azure/identity';
import { TableClient, TableServiceClient } from '@azure/data-tables';

const credentials = new InteractiveBrowserCredential({
  clientId: myAuthConfig.clientId,
  tenantId: myAuthConfig.tenantId,
});

const client = new TableServiceClient(
  `https://${myAuthConfig.storageAccountName}.table.core.windows.net`,
  credentials
);
client.listTables().byPage().next().then(console.log);

This works totally fine! I can see all the tables on the account. But then I wanted to list some of the data in on of the tables. So I did:

const client = new TableClient(
  `https://${myAuthConfig.storageAccountName}.table.core.windows.net`,
  '<table name>',
  credentials
);
client.listEntities().byPage().next().then(console.log);

But this gives an error:

{
  "odata.error": {
    "code":"AuthorizationPermissionMismatch",
    "message": {
      "lang":"en-US",
      "value":"This request is not authorized to perform this operation using this permission.\nRequestId:<uuid>\nTime:2021-10-28T18:04:00.0737419Z"
    }
  }
}

I'm very confused by this error. As far as I can tell I've done everything right. I followed every tutorial. I've set up active directory permissions for my app to use the storage API, my Microsoft account has permission to access the tables, OCRS is enabled, etc.

I'm not sure why I would have access to see a table but not see what's in it. I tried to use InteractiveBrowserCredential.authenticate to explicitly set scopes like this:

const scopes = ["User.Read"]

credentials.authenticate(scopes).then(console.log);

It works fine for User.Read but I couldn't figure out what scopes corresponded to Storage read/write access. If I added a scopy like "Microsoft.Storage" it told me that it didn't exist

Has anyone got an error like this before? What am I supposed to do here?