Invalid Grant Error with MSAL in Next.js - Insufficient Permissions (AADB2C90205)

I am implementing login functionality in my Next.js application using Azure AD B2C and the MSAL library. However, I am encountering the following error when attempting to log in:
{
"error": "invalid_grant",
"error_description": "AADB2C90205:This application does not have sufficient permissions
against this web resource to perform the operation.
\r\nCorrelation ID: 425d0c39-3bf7-48be-9b81-8bc5cd5abc02\r\nTimestamp: 2024-09-06 12:41:31Z\r\n"
}



Here are the relevant details:
@azure/msal-browser: ^3.23.0
@azure/msal-react: ^2.0.13



I am using Azure AD B2C to handle user authentication.


Steps Taken:


I registered the application in Azure AD B2C.
Configured the necessary redirect URIs and API permissions.
Set up the MSAL configuration in my Next.js app using the MSAL React library.


Troubleshooting Attempts:


Checked API permissions and made sure they were granted admin consent.
Verified that the redirect URIs and scopes in my MSAL configuration match those in Azure AD B2C.
Question: What might be causing this "insufficient permissions" error, and how can I resolve it? Is there something specific I need to configure in Azure AD B2C for MSAL to successfully authenticate users?


Any help would be appreciated!