Azure AD Authentification with React, NextJs and the MSAL Library

Bausteine

   
   

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 (
     <MsalProvider instance={msalInstance}>
       <ThemeProvider>
         <Component {...pageProps} />
       </ThemeProvider>
     </MsalProvider>
   );
}
export default MyApp;

Check the original code out on GitHub: https://github.com/projectsbydan/nextjs-azuread-auth/blob/main/pages/_app.tsx
There is also some CSS in globals.css to center it all