--- title: Azure AD Authentification with React, NextJs and the MSAL Library description: Dieser Beitrag erklärt Ihnen die Azure AD Authentifizierung anhand verschiedener Komponenten. image: https://blog.hansevision.com/hubfs/Active_Directory_blog_bs-800x400.jpg --- [![HV_BechtleGroup_sRGB_Black_2025 (3)](https://blog.hansevision.com/hs-fs/hubfs/Website%20Weebly%20Bildmaterialien/Logos/HV_BechtleGroup_sRGB_Black_2025%20(3).png?width=225&height=45&name=HV_BechtleGroup_sRGB_Black_2025%20(3).png)](https://www.hansevision.com/) [Blog](https://blog.hansevision.com) Lösungen Leistungen [Über uns](https://www.hansevision.com/hansevision.html) Karriere [Kontakt](https://www.hansevision.com/kontakt.html) [![HV_BechtleGroup_sRGB_Black_2025 (3)](https://blog.hansevision.com/hs-fs/hubfs/Website%20Weebly%20Bildmaterialien/Logos/HV_BechtleGroup_sRGB_Black_2025%20(3).png?width=163&height=32&name=HV_BechtleGroup_sRGB_Black_2025%20(3).png)](https://www.hansevision.com/) [Blog](https://blog.hansevision.com) Lösungen Leistungen [Über uns](https://www.hansevision.com/hansevision.html) Karriere Zurück 3 Minuten Lesezeit 11.08.2021 [Tutorial](https://blog.hansevision.com/tag/tutorial) [Active Directory](https://blog.hansevision.com/tag/active-directory) [Azure](https://blog.hansevision.com/tag/azure) ![Bild von Dan Deaconu](https://blog.hansevision.com/hubfs/Theme%20Development/user-large-solid.svg) [Dan Deaconu](https://blog.hansevision.com/author/dan-deaconu) # Azure AD Authentification with React, NextJs and the MSAL Library --- ## Bausteine Die folgenden Komponenten werden in dieser Beispielanwendung verwendet: - NextJs - React - Fluent UI - MSAL Bibliothek [![](https://blog.hansevision.com/hubfs/Imported_Blog_Media/FluentUI_wordmark_space_onwhite_lg_1x-1024x597-1-e1628688541800-300x79.png)](https://blog.hansevision.com/azure-ad-react-nextjs-msal)   [![](https://blog.hansevision.com/hubfs/Imported_Blog_Media/solutions-for-azure-ad-2-300x91.png)](https://blog.hansevision.com/azure-ad-react-nextjs-msal) [![](https://blog.hansevision.com/hubfs/Imported_Blog_Media/react-logo-e1628688428259.png)](https://blog.hansevision.com/azure-ad-react-nextjs-msal)     [![](https://blog.hansevision.com/hubfs/Imported_Blog_Media/nextjs-logo-e1628688447918.png)](https://blog.hansevision.com/azure-ad-react-nextjs-msal)       ## Funktionalität Die Anwendung zeigt die beiden Hauptmöglichkeiten zur Authentifizierung der Anwendung mit Microsoft Azure AD-Konten. Auf der einen Seite steht die granulare Interaktion mit `react hooks` und auf der anderen Seite `Higher-Order-Components` (HOC), welche zur einfacheren Integration eingesetzt werden. Eine App-Registrierung in Azure AD ist erforderlich. Diese steuert, welche `Redirect URI` unterstützt werden und liefert die `ClientId` für die spätere Konfiguration. ## Bausteine zusammensetzen Eine neue NextJs-Anwendung kann mit einem npm-Befehl erstellt werden. `npx create-next-app --typescript --usenpm` ✔ Stellen Sie sicher, dass npx global verfügbar ist (falls nicht, kann dies mit `npm i -g npx` erreicht werden) React und ESLint sind bereits vorhanden, es werden nur noch die Bibliotheken Azure MSAL und Fluent UI benötigt. `npm i --save @azure/msal-browser @azure/msal-react @fluentui/react` 🤔 Zusätzliche ESLint- oder Prettier-Regeln können nach Bedarf erstellt werden. NextJs bietet einen Satz grundlegender Regeln, die sofort einsatzbereit sind. Der Hello-World Code von NextJs kann komplett gelöscht werden, da er nicht verwendet wird. Am Ende sollten die **Source**-Dateien \_app.tsx, index.tsx und global.css übrig bleiben. Die Azure MSAL- und Fluent UI-Bibliotheken stellen HOC-Komponenten als Context Provider zur Verfügung. Diese müssen in der Datei `_app.tsx` konfiguriert werden. Für Fluent UI wird die Komponente `ThemeProvider` benötigt, diese kann direkt ohne weitere Angaben verwendet werden. Für Azure MSAL müssen noch die Einstellungen für die App-Registrierung gesetzt werden. Am besten ist es, eine neue `msalConfig.ts`-Datei zu erstellen. In dieser Konfigurationsdatei müssen die `clientId` und `authority` gesetzt werden. Diese Einstellungen sollten in **Enviroment Variables** gesetzt werden und niemals in das **Git Repository** übertragen werden. Zu Testzwecken können sie jedoch direkt in die Datei geschrieben werden. Die Einstellungen für die App-Registrierung werden verwendet, um eine MSAL-Instanz zu erstellen. Diese wird dann dem `MsalProvider` als Eigenschaft übergeben.   ``` const msalInstance = new PublicClientApplication(msalConfig); function MyApp({ Component, pageProps }: AppProps) { return ( ); } export default MyApp; ```   Check the original code out on GitHub: [https://github.com/projectsbydan/nextjs-azuread-auth/blob/main/pages/\_app.tsx](https://github.com/projectsbydan/nextjs-azuread-auth/blob/main/pages/_app.tsx) There is also some CSS in globals.css to center it all   [![Azure AD NextJS](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/GIF-11_08_2021-16-50-47.gif?width=520&height=625&name=GIF-11_08_2021-16-50-47.gif)](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png) ## Granulare Interaktion mit React Hooks React-Hooks können je nach Bedarf zur Steuerung der Interaktion mit Azure AD verwendet werden. Die MSAL-Bibliothek bietet mehrere Utilities und Hooks. In dieser Beispielanwendung wurden die Hooks `useMsal()` und `useIsAuthenticated()` verwendet. `useMsal()` erzeugt einen direkten Zugriff auf den `MsalProvider` und dessen Instanz. Über diese Instanz können Benutzer an- oder abgemeldet werden. Zusätzlich gibt es die Möglichkeit, die Anmeldedaten mit `SSO Silent` zu aktualisieren. Damit ist es auch möglich, einen `AuthCode` für `Bearer` Anfragen gegen MS Graph oder eigene Anwendungen zu erhalten. `useIsAuthenticated()` ist ein sehr hilfreicher Hook um zu sehen, ob ein Benutzer eingeloggt ist oder nicht. Zusätzlich kann man den `InteractionStatus` aus der Bibliothek beobachten, um zu sehen, in welchem Stadium sich die Authentifizierung befindet. Der gesamte Code für diese Seite ist auf [GitHub](https://github.com/projectsbydan/nextjs-azuread-auth/blob/main/pages/index.tsx) verfügbar. ## Einfachere Interaktion mit Higher-Order-Components Wenn die Anwendung oder eine bestimmte Seite keinen Bedarf an granularer Interaktion hat, gibt es eine Reihe von HOC-Komponenten, die in der Azure MSAL-Bibliothek verfügbar sind. `AuthenticatedTemplate` zeigt automatisch den Children-Inhalt an, wenn ein Benutzer eingeloggt ist. `UnauthenticatedTemplate` zeigt automatisch den Children-Inhalt an, wenn **kein** Benutzer eingeloggt ist. `MsalAuthenticationTemplate` kann konfiguriert werden, um den Benutzer automatisch einzuloggen. Es unterstützt mehrere Arten der Interaktion (Redirect, Popup, etc.) und kann bei Bedarf Lade- und Fehlerkomponenten anzeigen. Der gesamte Code für diese Seite ist auf [GitHub](https://github.com/projectsbydan/nextjs-azuread-auth/blob/main/pages/hoc.tsx) verfügbar. [![NextJs AzureAD HOC](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/GIF-11_08_2021-17-08-55.gif?width=373&height=397&name=GIF-11_08_2021-17-08-55.gif)](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png)       ![Bild von Dan Deaconu](https://blog.hansevision.com/hubfs/Theme%20Development/user-large-solid.svg) [Dan Deaconu](https://blog.hansevision.com/author/dan-deaconu) Diese Person ist nicht mehr bei der HanseVision tätig. [Alle Artikel des Autors](https://blog.hansevision.com/author/dan-deaconu) ### Ähnliche Blog-Artikel ![](https://blog.hansevision.com/hs-fs/hubfs/Theme%20Development/hansevision-newsletter.png?width=410&name=hansevision-newsletter.png) ### Mit unserem HanseVision Update sind Sie immer gut informiert über alle Themen rund um moderne Zusammenarbeit, Lösungen und Tools, Referenzen und Aktionen. [![Jetzt zum Newsletter anmelden](https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50.png)](https://hubspot-cta-redirect-eu1-prod.s3.amazonaws.com/cta/redirect/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50) Updates & Aktionen Versand alle 4-6 Wochen Trends & aktuelle Entwicklungen ![](https://blog.hansevision.com/hs-fs/hubfs/Theme%20Development/hansevision-newsletter.png?width=250&height=250&name=hansevision-newsletter.png) [![Jetzt zum Newsletter anmelden](https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50.png)](https://hubspot-cta-redirect-eu1-prod.s3.amazonaws.com/cta/redirect/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50) [Datenschutzerklärung](https://www.hansevision.com/datenschutzerklaerung.html) [Impressum](https://www.hansevision.com/impressum-688471.html) [AGB](https://www.hansevision.com/uploads/4/1/9/3/41931735/hansevision_agb_der_hansevision_gmbh_stand_31.03.2020.pdf) [Telefon: +49 (40) 2880 7590 - 0](tel:+4940288075900) Adresse: Atlantic Haus, Bernhard-Nocht-Strasse 113, 20359 Hamburg [Cookie-Richtlinien](https://www.hansevision.com/cookie-richtlinie.html) Cookie-Einstellungen ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Dan Deaconu", "url" : "https://blog.hansevision.com/author/dan-deaconu" }, "dateModified" : "2024-03-20T07:34:44.598Z", "datePublished" : "2021-08-11T22:00:00.000Z", "headline" : "Azure AD Authentification with React, NextJs and the MSAL Library", "image" : [ "https://blog.hansevision.com/hubfs/Active_Directory_blog_bs-800x400.jpg" ], "mainEntityOfPage" : { "@id" : "https://blog.hansevision.com/azure-ad-react-nextjs-msal", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.hansevision.com/hubfs/HanseVision_sRGB_Black.png" }, "name" : "HanseVision GmbH" } } ```