MSAL.js cheatsheet

msal-cheatsheet.js

// Initialization
const myMSALObj = new msal.PublicClientApplication({
  auth: {
    clientId: "c993fdd7-f80e-4586-bd81-8753a1f3e5ac", // This is the ONLY mandatory field; everything else is optional.
    authority: "https://MyOrgName2349865.b2clogin.com/MyOrgName2349865.onmicrosoft.com/B2C_1_susi", // Choose sign-up/sign-in user-flow as your default.
    knownAuthorities: ['MyOrgName2349865.b2clogin.com'], // You must identify your tenant's domain as a known authority.
    redirectUri: "http://localhost:6420" // You must register this URI on Azure Portal/App Registration. Defaults to "window.location.href".
  },
  cache: {
    cacheLocation: "sessionStorage", // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
    storeAuthStateInCookie: false // If you wish to store cache items in cookies as well as browser cache, set this to "true".
  }
});

// Save the token after returning from redirection. This must be executed on every page load.
myMSALObj.handleRedirectPromise()
  .then(response => {
    if (!response) {
      console.log('You are not coming from a redirect');
    } else {
      // I don't really know which properties does the response object contain other than `idTokenClaims` and `account`.
    }
  })
  .catch(error => {
    // I am not sure if you can use this catch to know if the user cancelled, or if it is just for server errors.
  });

// Login
myMSALObj.loginRedirect({
  scopes: [
    "openid",
    "https://MyOrgName2349865.onmicrosoft.com/tasks-api/tasks.read",
    "https://MyOrgName2349865.onmicrosoft.com/tasks-api/tasks.write"
  ],
});

// Logout
myMSALObj.logoutRedirect({
  postLogoutRedirectUri: 'http://localhost:6420',
});

// Get saved accounts
myMSALObj.getAllAccounts();
// Note: The objects of this funciton have the same format as the one returned from `handleRedirectPromise()` in `response.account`.

// Check stored access token and redirect if we don't have one
const request = {
  account: myMSALObj.getAllAccounts()[0],
  scopes: [
    "https://MyOrgName2349865.onmicrosoft.com/tasks-api/tasks.read",
    "https://MyOrgName2349865.onmicrosoft.com/tasks-api/tasks.write"
  ],
  forceRefresh: false
};
myMSALObj.acquireTokenSilent(request)
  .then(response => {
    if (response.accessToken) {
      console.log(response.accessToken);
    } else {
      return myMSALObj.acquireTokenRedirect(request);
    }
  });

// Request with the access token
fetch('http://localhost:5000/hello', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${accessToken}`
  }
});

// User's name
account.username
// Make sure to have the `Display Name` claim configured.
// You might have to manually edit the user from Azure B2C or use the `Profile editing` user flow.