CODEWITHSUNDEEP
reactjsapinext.jsmicrosoft-graph-api
stayfrosty
stayfrosty

Reputation: 1

Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type

I am trying to fetch an access token from the ms graph api in a nextjs app. It works fine in postman but when I do it in my app I get "AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type." I have even done it the same way before but in an Azure Function and that worked..

Here's the code for the nextjs app

var url = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`;

const { post, data, error, loading } = useFetch<any>(url);
const requestParams = new FormData();
requestParams.append('grant_type', 'client_credentials');
requestParams.append('client_id', clientId);
requestParams.append('client_secret', clientSecret);
requestParams.append('scope', 'https://graph.microsoft.com/.default');
useEffect(() => {
  const timeoutId = setTimeout(() => void post(requestParams), 200);
  return () => clearTimeout(timeoutId);
}, []);

const accessToken = data?.access_Token || "key not found";

return { post, data, accessToken, error, loading };

I have both tried to set my authentication in azure to both SPA and Web but still no success.

I could really use some tips for when doing this in a nextjs app.

Upvotes: 0

Views: 2719

Answers (1)

vicky kumar
vicky kumar

Reputation: 738

This error can occur when the "Origin" header is missing from the request , please check comments on git ,similar issue - https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2482#issuecomment-717576089

Try adding the header:

Origin: http://localhost

hope this helps

Thanks

Upvotes: -1

Related Questions