How to use OAuth 2.0 with @azure/msal-react package?

Library

• msal@1.x.x or @azure/msal@1.x.x
• @azure/msal-browser@2.x.x
• @azure/msal-node@1.x.x
• @azure/msal-react@1.x.x
• @azure/msal-angular@0.x.x
• @azure/msal-angular@1.x.x
• @azure/msal-angular@2.x.x
• @azure/msal-angularjs@1.x.x

Description

Hi All,

After successfully imposing MSAL to my page, I was asked to add an OAuth2 into my application.

Isn’t @azure/msal-react capable of it? Thanks.

Reference of my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'index.css';
import App from 'App';
import * as serviceWorker from 'serviceWorker';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from 'store/reducer'

import { MsalProvider, MsalAuthenticationTemplate  } from "@azure/msal-react";
import { Configuration,  PublicClientApplication, InteractionType } from "@azure/msal-browser";


//, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
const store = createStore(reducer);

const config = {
  auth: {
    clientId: '***********************',
    authority: 'https://login.microsoftonline.com/***********************' **// <-- isn't replacing the OAuth 2 endpoint here?**
    },
  cache: {
    cacheLocation: "sessionStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  }
};

const pca = new PublicClientApplication(config);


ReactDOM.render(
<Provider store={store}>
  {/* <React.StrictMode> */}
  <MsalProvider instance={pca}>
    <MsalAuthenticationTemplate
      interactionType={InteractionType.Redirect}>
        <App/>
        </MsalAuthenticationTemplate>
    </MsalProvider>
   </Provider>,

  document.getElementById('root')
);

serviceWorker.unregister();

Source

• Internal (Microsoft)
• Customer request

[pkanher617]

@wy10cheng this is done for you by the library. The library abstracts the protocol away from the application and exposes APIs to acquire the ID and access tokens needed for your app to function. Please go through the docs and samples for msal-browser and msal-react, it should make it more apparent how to use this library.

[pkanher617]

@wy10cheng I’m not sure what you are asking. OAuth 2.0 is the protocol implemented by MSAL.js libraries. Specifically, msal-react and msal-browser are implementing the OAuth 2.0 authorization code flow with PKCE. If you’d like to read more about what the OAuth 2.0 protocol describes you can read more here.