Web Authentication NOT WORKING AADSTS50011: The redirect URI 'http://localhost:37997/' specified in the request does not match the redirect URIs configured for the application

[tratum]

When i do Web Authentication for my flutter Web App and i try to Sign-in a Microsoft Account after filling in the details i am getting the Error

Request Id: c4d7149e-859b-447f-a0aa-4dacca5b7a00
Correlation Id: bd3a33bd-0450-4f56-8a4b-dc8173c48c45
Timestamp: 2024-06-09T14:01:39Z
Message: AADSTS50011: The redirect URI 'https://localhost:37997/' specified in the request does not match the redirect URIs configured for the application 'APPLICATION_ID'. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

@loetsphi @josemiguelvarela can you help

[tratum]

Currently testing in local environment

[loetsphi]

The redirectUri we use for the example is: redirectUri: 'https://login.microsoftonline.com/common/oauth2/nativeclient'.

Have you tried troubleshooting with ChatGPT?

[tratum]

Yes I tried troubleshooting with ChatGPT and it gave me the response

The error message you received, `AADSTS50011`, indicates a mismatch between the redirect URI specified in your OAuth request and the redirect URIs configured in your Azure AD application. This error commonly occurs when the redirect URI used in the authentication request does not match any of the redirect URIs registered in the Azure AD portal for the specified application.

### Step-by-Step Solution

1. **Identify the Redirect URI**:
   - In your Flutter application, determine the redirect URI being used by the `aad_oauth` package. This is usually specified in your app's configuration files or in the code where the OAuth request is made.

2. **Update Azure AD Application Registration**:
   - Log in to the [Azure portal](https://portal.azure.com/).
   - Navigate to `Azure Active Directory` > `App registrations`.
   - Select your application (with the ID `16d5719f-86d1-47a2-848d-e9f63d07a968`).
   - Go to the `Authentication` section.
   - Under `Redirect URIs`, add the redirect URI that your Flutter app is using (e.g., `http://localhost:34989/`).

3. **Update Your Flutter App Configuration**:
   - Ensure that the redirect URI in your Flutter app's configuration matches exactly with one of the URIs registered in the Azure portal.

### Example Configuration for aad_oauth

Below is an example of how you might configure the `aad_oauth` package in your Flutter application. Ensure the redirect URI matches what you registered in the Azure portal.

    ```dart
    import 'package:aad_oauth/aad_oauth.dart';
    import 'package:aad_oauth/model/config.dart';
    
    final Config config = Config(
      tenant: 'your-tenant-id',
      clientId: '16d5719f-86d1-47a2-848d-e9f63d07a968',
      scope: 'openid profile offline_access',
      redirectUri: 'http://localhost:34989/', // Ensure this matches with Azure AD
    );
    
    final AadOAuth oauth = AadOAuth(config);
    ```

### Additional Steps

- **Check for Typo and Exact Match**:
  - Ensure there are no typos and that the URI in your app's configuration matches exactly (including the trailing slash) with the one in Azure AD.

- **Update Localhost URI**:
  - If using `http://localhost`, ensure your development environment is correctly configured to handle OAuth redirects at this address.

### Testing

1. **Run your Flutter application** and initiate the OAuth flow to verify if the issue is resolved.
2. **Check Logs**: If the error persists, check the logs to ensure the redirect URI being used is correct and matches with Azure AD registration.

### Reference

- You can also refer to the official [Azure documentation on redirect URI mismatch errors](https://aka.ms/redirectUriMismatchError) for more details.

**Next Steps**:
**a.** Ensure the redirect URI in your Azure AD application matches exactly with your Flutter application's configuration.
**b.** Test the OAuth flow in your Flutter application to confirm the fix.

and aren't we using https://login.live.com/oauth20_desktop.srf(live sdk)

I tried adding an additional redirectUri and when i did that

i got redirected to a blank white page having the url
https://prod_web_app_url/#code=0.code&client_info=client_info&state=state&session_state=22319420-dd50-40d9-a640-7b12608ae843

I have obfuscated the information for the given highlighted words in the url

[tratum]

The redirectUri we use for the example is: redirectUri: 'https://login.microsoftonline.com/common/oauth2/nativeclient'.

Have you tried troubleshooting with ChatGPT?

is this present in the readme if it is then sorry it's my bad i didn't check

[tratum]

Just a quick check in i changed the redirect url but i am getting the same error AADSTS50011

[tigloo]

Can you show your AadOauth config object?

The redirectUri property there needs match the one you put into Azure AD and needs to match your currently running app.

Note that config changes in Azure AD can take 10-20 minutes to activate, so changing the redirect url in Azure requires a bit of patience before testing.

[tratum]

Here is my AadOauth config object and when i use it i sign-in to my account and then nothing happens only a blank white screen appears

static final Config _config = Config(
tenant: "organizations",
 clientId: microsoftClientID,
 scope: "openid profile email offline_access User.Read",
 navigatorKey: navigatorKey,
 loader: const SizedBox(),
 webUseRedirect: true,
 redirectUri: "https://login.microsoftonline.com/common/oauth2/nativeclient",
 responseType: "code",
 ),
 );

[tigloo]

In your original post you mention you are developing a Flutter Web application and you are using the redirect flow. In that case your redirectUri proper needs to point to the URL where you are hosting the application (http://localhost:5000 usually if you are in the debugger or the public url).

Note that the redirect URL needs to be configured as valid redirect URL in Azure B2C and the route needs to be able to handle the auth token.

[tratum]

@tigloo You are Absolutely Right and i have tried that by changing the redirectUri to my prod web app url and as you have seen below i have added an Additional url in the Azure AD portal but i have no idea how to configure the redirect URL as valid redirect URL in Azure B2C and how to make this redirect url to be able to handle the auth token

I tried adding an additional redirectUri and when i did that

i got redirected to a blank white page having the url https://prod_web_app_url/#code=0.code&client_info=client_info&state=state&session_state=22319420-dd50-40d9-a640-7b12608ae843

I have obfuscated the information for the given highlighted words in the url

[tigloo]

The redirect url you entered above has been entered for a mobile/desktop app. You need to configure an SPA app for Flutter web to work. Also make sure that your are starting with the claims " offline_access" first.