Gérer les erreurs et les exceptions dans MSAL React

Cet article explique comment gérer certaines erreurs et exceptions pouvant être levées par MSAL React. Nous allons couvrir BrowserConfigurationAuthErrors et BrowserAuthErrors et fournir des étapes de dépannage pour vous aider à les résoudre.

Erreurs d'authentification de la configuration du navigateur

BrowserConfigurationAuthErrors est utilisé pour représenter les erreurs qui surviennent en raison d’une configuration incorrecte des paramètres d’authentification de MSAL et peut se produire lors de l’initialisation d’une instance PublicClientApplication ou ConfidentialClientApplication. Si l’objet de configuration transmis au constructeur ne répond pas aux exigences de la bibliothèque, vous ne fournissez pas d’ID client ou d’autorité valide, ou si vous fournissez un URI de redirection non valide, vous pouvez rencontrer ce type d’erreur.

stubbed_public_client_application_called

Cette erreur signifie qu'une méthode a été appelée sur une instance PublicClientApplication qui a été stubée ou initialisée de manière incorrecte lorsque vous tentez d'utiliser un composant ou un hook msal sans MsalProvider plus haut dans l'arborescence des composants. Tous les hooks et composants utilisent l’API de contexte React et nécessitent un fournisseur. Vous pouvez obtenir un message similaire à Stub instance of PublicClientApplication was called. If using @azure/msal-react, please ensure context is not used without a provider.

L’extrait de code suivant lève cette erreur, car le useMsal hook est utilisé en dehors du contexte de MsalProvider.

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

const pca = new PublicClientApplication(config);

function App() {
    const { accounts } = useMsal();

    return (
        <MsalProvider instance={pca}>
            <YourAppComponent>
        </ MsalProvider>
    )
}

Pour résoudre l’erreur, vous devez refactoriser l’extrait de code précédent afin que le useMsal hook soit appelé dans un composant sous MsalProvider. L’implémentation correcte est illustrée dans l’extrait de code suivant.

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

const pca = new PublicClientApplication(config);

function ExampleComponent () {
    const { accounts } = useMsal();

    return <YourAppComponent />;
};

function App() {
    return (
        <MsalProvider instance={pca}>
            <ExampleComponent />
        </ MsalProvider>
    )
}

BrowserAuthErrors

BrowserAuthErrors est utilisé pour représenter les erreurs qui se produisent pendant le processus d’authentification dans un environnement de navigateur. De telles occurrences peuvent être effectuées lorsqu’un utilisateur tente de lancer une nouvelle demande de connexion pendant qu’une demande précédente est toujours traitée. Pour résoudre ces erreurs, vous devez vous assurer que chaque interaction s’est terminée avant de commencer une nouvelle.

Interaction_in_progress

Cette erreur est levée lorsqu’une API interactive (loginPopup, , loginRedirect, acquireTokenPopupacquireTokenRedirect) est appelée alors qu’une autre API interactive est toujours en cours. Les API `login` et `acquireToken` sont asynchrones ; vous devez donc vous assurer que les promesses qui en résultent sont résolues avant d’invoquer une autre API. Vous pouvez obtenir un message d’erreur similaire à Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.

Dans @azure/msal-react 2 scénarios, cela peut se produire :

  1. Votre application appelle l’une des API en dehors du contexte où vous n’avez pas accès à l’état inProgress . Pour plus d’informations sur le contexte, consultez la FAQ sur MSAL React
  2. Votre application appelle l’une des API sans vérifier d’abord si l’interaction est déjà en cours ailleurs.

L’extrait de code suivant lève l’erreur quand un autre composant a déjà appelé une API interactive en cours :

import { useMsal, useIsAuthenticated } from "@azure/msal-react";
import { useEffect } from "react";

export function exampleComponent() {
    const { instance } = useMsal();
    const isAuthenticated = useIsAuthenticated();

    useEffect(() => {
        if (!isAuthenticated) {
            // If another component has already invoked an interactive API this will throw
            await instance.loginPopup();
        }
    }, [isAuthenticated, instance]);
}

Pour corriger l’extrait de code précédent, vérifiez qu’aucune autre interaction n’est en cours avant d’appeler loginPopup:

import { useMsal, useIsAuthenticated } from "@azure/msal-react";
import { InteractionStatus } from "@azure/msal-browser";
import { useEffect } from "react";

export function exampleComponent() {
    const { instance, inProgress } = useMsal();
    const isAuthenticated = useIsAuthenticated();

    useEffect(() => {
        if (!isAuthenticated && inProgress === InteractionStatus.None) {
            await instance.loginPopup();
        }
    }, [isAuthenticated, inProgress, instance]);
}

Procédure de résolution du problème

  • Activez la journalisation détaillée et tracez l’ordre des événements. Vérifiez qu’une API interactive n’est pas appelée avant qu’une autre n’ait été résolue. Si vous utilisez le flux de redirection, assurez-vous que handleRedirectPromise a été résolu (effectué dans le MsalProvider).

Si vous ne parvenez pas à déterminer pourquoi cette erreur se produit, ouvrez un ticket et préparez-vous à fournir les informations suivantes :

  • Journaux détaillés
  • Exemple d’application et/ou d’extraits de code que nous pouvons utiliser pour reproduire le problème
  • Actualisez la page. L’erreur disparaît-t-elle ?
  • Ouvrez votre application dans un nouvel onglet. L’erreur disparaît-t-elle ?

Voir aussi

Il existe des erreurs supplémentaires qui peuvent être levées par MSAL.js. Vous pouvez consulter la liste complète des erreurs couvertes dans MSAL Browser.

  • Last updated on