accessing sharepoint SP.js from react js Single page app

Question

I have built a Single page application. I have deployed the html file to the root of the sharepoint site and js files are stored in the Assets Library. They are referenced from there. I am trying to check if the current logged in user has access to the sharepoint site/web, among other things using rest api.

The following endpoint _api/web/effectivebasepermissions returns:

High, low response :
{High: '2147483647', Low: '4294967295'}

then I will have to check this response againts SP.BasePermissions() as follows:

var my_basePermissions = new SP.BasePermissions();
        
    my_basePermissions.initPropertiesFromJson(my_effectivePermissions);
    console.log("my_basePermissions = " + JSON.stringify(my_basePermissions, null, 4));
    
        var manageWeb = my_basePermissions.has(SP.PermissionKind.manageWeb);

To access SP.BasePermissions, I need to reference SP.js. I tried the following, found in this other post: https://sharepoint.stackexchange.com/questions/213236/spx-and-typescript-how-to-add-references-to-sp-js

import { SPComponentLoader } from '@microsoft/sp-loader';
try {
      SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/init.js', {
        globalExportsName: '$_global_init'
      })
        .then((): Promise<{}> => {
          return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/MicrosoftAjax.js', {
            globalExportsName: 'Sys'
          });
        })
        .then((): Promise<{}> => {
          return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.Runtime.js', {
            globalExportsName: 'SP'
          });
        })
        .then((): Promise<{}> => {
          return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.js', {
            globalExportsName: 'SP'
          });
        })
        .then((): Promise<{}> => {
          return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.taxonomy.js', {
            globalExportsName: 'SP'
          });
        })
        .then((): void => {
          this.setState({ loadingScripts: false });
        })
        .catch((reason: any) => {
          this.setState({ loadingScripts: false, errors: [...this.state.errors, reason] });
        });
    } catch (error) {
      this.setState({ loadingScripts: false, errors: [...this.state.errors, error] });
    }
  }

I get the following error:

 Module not found: Error: Can't resolve '@ms/sp-telemetry' in '\node_modules\@microsoft\sp-loader\lib-commonjs\utilities'

Ok, so the question is, how can I reference and load SP.js, for example, in my react js app?

Answer 1

The SP.js is more or less a specialized thing to be used inside classic SharePoint pages. You might be better off using something more reasonable in your third-party-react app (which does not run inside of the sharepoint, as far as I understand), like pnpjs for example, it is the most common library to query sharepoint, and has permissions wrappers implemented as well:

const sp = spfi(...your URL and token...);

const perms = await sp.web.getCurrentUserEffectivePermissions();
if (sp.web.hasPermissions(perms, PermissionKind.ManageWeb)) {
    // ...
}

Or you can just calculate your permission "manually" since 'has permission' is basically a utility math method. The logic from the above pnpjs library:

https://github.com/pnp/pnpjs/blob/f724231148c4b221acb190c11d1795934dab7719/packages/sp/security/funcs.ts#L73

// ...
// PermissionKind.ManageWeb = 31

function hasPermissions(value: IBasePermissions, perm: PermissionKind): boolean {

    perm = perm - 1;
    let num = 1;

    if (perm >= 0 && perm < 32) {
        num = num << perm;
        return 0 !== (value.Low & num);
    } else if (perm >= 32 && perm < 64) {
        num = num << perm - 32;
        return 0 !== (value.High & num);
    }
    return false;
}

or in your case of "manage web" this could be simplified to (if I did not make a mistake):

hasManageWebPermission = low & (1 << 30)

Meaning, it's just bit 31 in the "Low" part you are probably looking for. You can of course load one hundred (well, actually less) of other sharepoint libraries to load SP.js and then make that library perform this sort of calculation, just not sure why would you want all those dependencies? :)