Azure App Service Authentication guide with OAuth 2.0 for React App
I recently switched to Quick question that's been bugging me - Quick question that's been bugging me - I'm working with an scenario with Azure App Service authentication when trying to implement OAuth 2.0 in my React application... I have set up my Azure App Service to require authentication with Azure Active Directory. However, after successful login, I am getting an behavior that says `"redirect_uri_mismatch"`. I've double-checked the redirect URIs configured in Azure AD, and they seem to match the callback URL in my app. My app is running on `http://localhost:3000` during development, and the redirect URI I registered is `http://localhost:3000/auth/callback`. Here’s the part of my React code that handles the authentication using the `msal` library: ```javascript import { PublicClientApplication } from '@azure/msal-browser'; const msalConfig = { auth: { clientId: 'YOUR_CLIENT_ID', authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID', redirectUri: 'http://localhost:3000/auth/callback', }, }; const msalInstance = new PublicClientApplication(msalConfig); const login = async () => { try { await msalInstance.loginPopup(); } catch (behavior) { console.behavior('Login failed: ', behavior); } }; ``` I've also checked the `CORS` settings in the Azure portal, and `localhost:3000` is allowed. The Azure AD App Registration has the necessary permissions, and I have enabled implicit grant for ID tokens. When I trigger the login method, it opens the Microsoft login modal, and after successful authentication, I get redirected back to `http://localhost:3000/auth/callback`, but the behavior occurs there. I suspect it might be related to how I have configured the Azure App Service authentication settings or the way I'm handling the redirect URI in my React app. Can anyone guide to identify what might be going wrong here? I'd really appreciate any guidance on this. For context: I'm using Javascript on Windows. What would be the recommended way to handle this?