Using PnP JS Core and node-sp-auth

One of our goals is making it easy for folks to use the JS Core library - and we are always looking for opportunities to improve on that mission. Recently Sergei Sergeev submitted a PR to add support for his library node-sp-auth. Ultimately we decided not to merge this change. However, we recognize that such a change could provide developers greater flexibility and control of authentication - but we want folks to make that choice for themselves as well as what authentication library they may want to use beyond the basic support provided. To that end this post will describe how to use node-sp-auth with pnp-js-core.

The first step is to setup your application - you can use one you already have or setup one following the app guide, which is what I've done here. Next you'll want to install the node-sp-auth library:

 npm install node-sp-auth --save-dev

What this gives us, as outlined in the docs is a way to authentication against SharePoint using user credentials and add-in only permissions in both SPO and on-premises. There is also an option for ADFS user credentials. There are just two steps when using node-sp-auth, first create a set of options and then call getAuth using those options. Below is the full source of the main.ts file which you can also get in the download. You will also notice we are shimming the fetch classes and method on the global object, something you need to do to enable pnp-js-core to work as expected, not required specifically by node-sp-auth.

main.ts

 import { Web, setup as pnpsetup } from "sp-pnp-js";
import { getAuth, IOnlineAddinCredentials, IAuthResponse, IUserCredentials } from "node-sp-auth";

// grab node-fetch
let nodeFetch = require("node-fetch");

// shim the globals for node-fetch
declare var global: any;
global.Headers = nodeFetch.Headers;
global.Request = nodeFetch.Request;
global.Response = nodeFetch.Response;
global.fetch = nodeFetch;

let siteUrl = "{ your absolute site url }";

// setup your credential options
let addInOptions: IOnlineAddinCredentials = {
  clientId: "{ client id }",
  clientSecret: "{ client secret}"
};

let userCredentials: IUserCredentials = {
  username: "{ user name }",
  password: "{ pass word }"
};

// call getAuth with your site url and the appropriate options
getAuth(siteUrl, addInOptions).then((response: IAuthResponse) => {
  return new Promise<void>(resolve => {
    // now we use the headers supplied by getAuth to set the global headers for the pnp library
    pnpsetup({
      headers: response.headers,
    });
    resolve();
  });
}).then(() => {

  // we need to use the Web constructor to ensure we have the absolute url
  let web = new Web(siteUrl);
    web.select("Title").get().then(w => {
    console.log(`Web's title: ${w.Title}`);
  });
});

There are a few things not handled in the above such as token timeouts or MFA but Sergei has an expanded post where he describes how to handle token lifetimes. This library allows you some flexibility when needing to authenticate from node in scenarios not handled by the basic add-in permissions included in sp-pnp-js. Download the full sample to try it out.

What is the JS Core Component?

The Patterns and Practices JavaScript Core Library was created to help developers by simplifying common operations within SharePoint and the SharePoint Framework. Currently it contains a fluent API for working with the full SharePoint REST API as well as utility and helper functions. This takes the guess work out of creating REST requests, letting developers focus on the what and less on the how.

“Sharing is Caring”

Comments

• Anonymous
  January 11, 2017
  Hey,Is it possible to use node-sp-auth in Angular2 application?I'm having Angular2 app with PnP JS Core and trying to configure that with node-sp-auth but I'm not sure if that's possible... Thanks,Michal.
  • Anonymous
    January 18, 2017
    You can ask that as an issue in the repo for node-sp-auth. I think it would be fine but he can confirm.