Anyway to tell in msal.js if authentication was an existing user login or a new user signup

Viewed 298

We are using @azure/msal-browser and @azure/msal-react and have the standard authentication flow in our React app, as is show in the code samples below.

We are using Azure External Identities user flow where the users can either login or, if they don't have an account, they are given an opportunity to sign up for one and are then taken to the app.

Is there anyway to detect in the app if a successful authentication was a result of a login or of a new user sign up?

I see that there are several event types defined in the source code here (and I can catch many of them in the console while the user is signing in); however, none of them correspond to the event of a new user sign up: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/60c4aafa5/lib/msal-browser/src/event/EventType.ts

Config

export const msalConfig: Configuration = {
  auth: {
    clientId: `${process.env.REACT_APP_CLIENT_ID}`,
    authority: `https://login.microsoftonline.com/${process.env.REACT_APP_TENANT_ID}`,
    redirectUri:
      process.env.NODE_ENV === 'development'
        ? 'http://localhost:3000/'
        : process.env.REACT_APP_DEPLOY_URL,
  },
  cache: {
    cacheLocation: 'sessionStorage',
    storeAuthStateInCookie: false,
  },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
          default:
            console.error(message);
        }
      },
    },
  },
};

Main app component

const msalInstance = new PublicClientApplication(msalConfig);

<MsalProvider instance={msalInstance}>
  {!isAuthenticated && <UnauthenticatedHomePage />}
  {isAuthenticated && <Protected />}
</MsalProvider>

Unauthenticated component

const signInClickHandler = (instance: IPublicClientApplication) => {
  instance.loginRedirect(loginRequest).catch((e) => {
    console.log(e);
  });
};

<UnauthenticatedTemplate>
  <Button onClick={() => signInClickHandler(instance)}>Sign in</Button>
</UnauthenticatedTemplate>

Protected component

<MsalAuthenticationTemplate
  interactionType={InteractionType.Redirect}
  errorComponent={ErrorComponent}
  loadingComponent={LoadingComponent}
>
    ... the rest of the app ...
</MsalAuthenticationTemplate>
0 Answers
Related