TypeScript Msal-React PropTypes

Issue

I am adding authentication to an app via msal-React.

My app is using msalcontext inside a component wrapped by withMsal:

function App(props: any) {
  return (
    <>
      <AuthenticatedTemplate>
        <Router msalContext={props.msalContext} />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <GenReLogin />
      </UnauthenticatedTemplate>
    </>
  )
}

export default withMsal(App)

In my router component I need to declare a type for the props, however I can't find anything in the msal docs to indicate what type this should be.

function Router({ msalContext }){
...
}

Solution

You can use IMsalContext interface.

import { IMsalContext } from "azure/msal-react";
function Router({ msalContext }: IMsalContext){...}

Please check this document for IMsalContext.

https://azuread.github.io/microsoft-authentication-library-for-js/ref/interfaces/_azure_msal_react.IMsalContext.html

or

https://learn.microsoft.com/en-us/javascript/api/@azure/msal-react/imsalcontext?view=msal-js-latest

Answered By - Green Dev