MSAL in Storybook

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.19.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.1.1

Description

I’m Trying to set up MSAL in Storybook using a decorator, https://storybook.js.org/docs/react/writing-stories/decorators

It works fine on pageload and if refresh the page, but if i click between the stories I can see that “inProgress” is “startup” and nothing else happens.

I have tried with different configurations for cache, but to no avail.

Anyone got any tips or have done this themself?

I reckon it is something on Storybooks side and how they handle routing as it the same configration i use for the other apps and they work fine.

I dont want to add MSALProvider for each story

MSAL Configuration

auth: {
    clientId: xxx,
    authority: xxx,
    redirectUri: '/',
  },
  cache: {
    secureCookies: true,
    cacheLocation: 'localStorage', // This configures where your cache will be stored
    storeAuthStateInCookie: true, // Set this to "true" if you are having issues on IE11 or Edge
  },

Relevant Code Snippets

./storybook/preview.js

const withMSALProvider = (Story) => {
  return (
    <MsalProvider instance={publicClientApplication}>
      <MsalAuthenticationTemplate
        interactionType={InteractionType.Popup}
        loadingComponent={InProgressComponent}
        errorComponent={ErrorComponent}
      >
        <Story />
      </MsalAuthenticationTemplate>

      <UnauthenticatedTemplate>
        <LoggInn />
      </UnauthenticatedTemplate>
    </MsalProvider>
  );
};

export const decorators = [withMSALProvider];

Identity Provider

Azure AD / MSA

Source

External (Customer)

[tnorling]

This issue will be fixed by the linked PR. Thanks for bringing this to our attention!

[igorovic]

I was able to workaround this issue with this code.

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

const App2 = appWithTranslation(MyApp);

function MsalApp(props: AppProps) {
  const router = useRouter();
  const navigationClient = new CustomNavigationClient(router);
  msalInstance.setNavigationClient(navigationClient);
  return (
    <MsalProvider instance={msalInstance}>
      <App2 {...props} />
    </MsalProvider>
  );
}

export default MsalApp;

@tnorling Thanks for your help.