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/[email protected] : 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.
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.