Unable to access FileSystem of Azure Data Lake Gen2 with Angular using azure-sdk-for-js

Question

I am developing an application with Angular 8 and trying to connect to Azure Data Lake Gen 2's FileSystem through its REST API in order to be able to retrieve the list of folders as well as do a file import.

For authentication I use the library msal-angular that allows me to retrieve an ID token via the loginPopup function and an access token via acquireTokenSilent function.

I am using this scheme as a guide: aad connection flow

The scope: ['user.read','api://<uuid>/user_impersonation'] . api scopes

Then I use the storage-datalake library to try to retrieve information from my Data Lake. So I use the access token of my user logged to create a DataLakeStorageClient with TokenCredentials . Then I try to recover the list of folders on one of my FileSystems.

I'm getting this error: 401 (Server failed to authenticate the request. Please refer to the information in the www-authenticate header.) .

Do you have any idea where my problem might come from?

My user has the following roles:

• Contributor
• Storage Blob Data Contributor

API permissions: api permissions

When I'm using END-USER authentication without user impersonation (as a service principal) I can access my filesystem...

Thank you in advance for your help.

Answer 1

The scope is not correct. You can not use two kinds of resource in the scope. user.read is for https://graph.microsoft.com resource. api://<uuid>/user_impersonation is for your own resource.

You can try with ['https://datalake.azure.net/.default'] as the scope.