reactjsazureazure-active-directoryadalmsal

Azure react sample gives "invalid_request: The provided value for the input parameter 'redirect_uri' is not valid"

I'm looking at the steps mentioned in the sample here. Using my own tenant (11111111-1111-1111-1111-111111111111), I successfully configured everything until this step: Explore the sample. Now when I launch applications and try to login with my gmail account (AD domain %MY_GMAIL_NAME%gmail.onmicrosoft.com), I see the following error (after I've typed my gmail account and clicked proceed):

We're unable to complete your request

invalid_request: The provided value for the input parameter 'redirect_uri' is not valid. The expected value is a URI which matches a redirect URI registered for this client application.

Web API configuration (address https://localhost:44351):

"AzureAd": {
  "Instance": "https://%MY_GMAIL_NAME%gmail.ciamlogin.com/",
  "TenantId": "11111111-1111-1111-1111-111111111111",
  "ClientId": "...WEB_API_APP_REGISTRATION_GUID....",
  "Scopes": {
    "Read": [ "ToDoList.Read", "ToDoList.ReadWrite" ],
    "Write": [ "ToDoList.ReadWrite" ]
  },
  "AppPermissions": {
    "Read": [ "ToDoList.Read.All", "ToDoList.ReadWrite.All" ],
    "Write": [ "ToDoList.ReadWrite.All" ]
  }
},

Web app config (address http://localhost:3000):

export const msalConfig = {
    auth: {
        clientId: '...WEB_APP_APP_REGISTRATION_GUID....', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://%MY_GMAIL_NAME%gmail.ciamlogin.com/', 
        redirectUri: '/', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.origin
        postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
    },
   ...
};

export const protectedResources = {
    toDoListAPI: {
        endpoint: 'https://localhost:44351/api/todolist',
        scopes: {
            read: ['api://...WEB_API_APP_REGISTRATION_GUID..../ToDoList.Read'],
            write: ['api://...WEB_API_APP_REGISTRATION_GUID..../ToDoList.ReadWrite'],
        },
    },
};

In app registration for "ciam-msal-react-spa" and accordingly to the initially mentioned guide, in Authentication tab, I've specified Single-page application platform with these 2 redirect uris:

1. http://localhost:3000
2. http://localhost:3000/redirect

I've specified the rest of the steps too, so not sure where I've done mistake.

UPDATE1: I saw similar but not exactly the same issue here. The solution there is to use authority url like this https://login.microsoftonline.com/ (instead https://%MY_GMAIL_NAME%gmail.ciamlogin.com/). When I did this, I started to see error immediately when I click SignIn on the index page (so I even don't see a window where I can type my email).

@azure/msal-browser@2.38.3 : Info - Emitting event: msal:loginFailure authConfig.js:40
ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientAuthError: openid_config_error: Could not retrieve endpoints. Check your authority and verify the .well-known/openid-configuration endpoint returns the required endpoints. Attempted to retrieve endpoints from: https://login.microsoftonline.com/v2.0/.well-known/openid-configuration
    AuthError AuthError.ts:49
    ClientAuthError ClientAuthError.ts:222
    ..

UPDATE2: as suggested, please see the full list of steps I took here:

===========API:=================
1. Regiser app: "ciam-msal-dotnet-api" (`...WEB_API_APP_REGISTRATION_GUID....`)
2. In Expose API:
2.1. Add Scope: ToDoList.Read/ReadWrite
3.In Manifest: 
3.1. "accessTokenAcceptedVersion": 2,
4.In App Roles:
4.1. Add App role: ToDoList.(Read|ReadWrite).All/  (Allowed member types => applications)
5. In Token configuration:
5.1. Add optional claim: "idtyp"

Fill appsettings.json:

    "AzureAd": {
      "Instance": "https://%MY_GMAIL_NAME%gmail.ciamlogin.com/",
      "TenantId": "11111111-1111-1111-1111-111111111111",
      "ClientId": "...WEB_API_APP_REGISTRATION_GUID....",
      "Scopes": {
        "Read": [ "ToDoList.Read", "ToDoList.ReadWrite" ],
        "Write": [ "ToDoList.ReadWrite" ]
      },
      "AppPermissions": {
        "Read": [ "ToDoList.Read.All", "ToDoList.ReadWrite.All" ],
        "Write": [ "ToDoList.ReadWrite.All" ]
      }
    },
===========UI:==================
1. Regiser app: "ciam-msal-react-spa" (`...WEB_APP_APP_REGISTRATION_GUID....`)
2. In Authentication:
2.1. Add platform => Single-page application => set redirect urls: [http://localhost:3000, http://localhost:3000/redirect]
3. In API permissions:
3.1. API permission => Add permission =>Microsoft Graph => delegated permissions => openId permissions (openid, offline_access)
3.2. API permission => Add permission (My APIs) => Add registed API => Delegated permission => ToDoList.Read/ReadWrite
3.3. API permission => Grant admin consent for defaul directory

Fill authConfig.js:

    export const msalConfig = {
        auth: {
            clientId: '...WEB_APP_APP_REGISTRATION_GUID....', // This is the ONLY mandatory field that you need to supply.
            authority: 'https://%MY_GMAIL_NAME%gmail.ciamlogin.com/', 
            redirectUri: '/', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.origin
            postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
        },
       ...
    };

    export const protectedResources = {
        toDoListAPI: {
            endpoint: 'https://localhost:44351/api/todolist',
            scopes: {
                read: ['api://...WEB_API_APP_REGISTRATION_GUID..../ToDoList.Read'],
                write: ['api://...WEB_API_APP_REGISTRATION_GUID..../ToDoList.ReadWrite'],
            },
        },
    };

UPDATE3: Thanks @Gaurav Mantri, if I use the following authority link https://login.microsoftonline.com/<tenant>, it looks like the issue is gone. However why it's recommended with ciamlogin suffix in a first place? See here.

UPDATE4: As it was pointed by @Gaurav Mantri, there is a github page where some of related details can be found. Diving into the links inside shown me the following paragraph here:

The CIAM authority format is still in the process of standardization. It is determined to be split from AAD and currently supported in the below formats:

Where tenant would mean:

  • tenantName.microsoft.com
  • GUID (tenantId)
  • a verified domain for the tenant

In additional to the previous attempts I did with https://tenantName.ciamlogin.com, I've just tried https://tenantName.ciamlogin.com/<tenant> using guid tenant Id instead <tenant>. It has given the same error as before.

Solution

  • The issue is that https://login.microsoftonline.com/ is not a valid authority URL.

    Here's what the documentation says about the authority URL:

    The authority is a URL that indicates a directory that MSAL can request tokens from.

    Please see the documentation here for valid values of Authority URL: https://learn.microsoft.com/en-us/entra/identity-platform/msal-client-application-configuration#authority.