I am trying to integrate Active Directory ADAL plugin within my Reactjs app but I am getting error 401 (Unauthorized)
when fetching results.
I was following React ADAL package steps till I found a SO question which helped me a lot, but still I am getting a CORS error while fetching Dynamics CRM data.
When I click on the protected route I am redirected to https://login.microsoftonline.com/<someid>/oauth2/authorize?response_type=id_token&client_id=...
and then I am redirected back to the page.
This is part of my MyComponent component:
import React, { Component } from 'react';
import { adalApiFetch } from '../../../adalConfig';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { APIResponse: '' };
this.getLeads = this.getLeads.bind(this);
}
componentDidMount() {
this.getLeads();
}
getLeads() {
let result;
adalApiFetch(fetch, 'https://myorg.api.crm.dynamics/api/', options)
.then(response => response.json())
.then(data => {
this.setState(Object.assign(this.state, { APIResponse: data }));
console.log(data);
}).catch(error => console.error('SERVER ERROR:', error));
}
render() {
return (
<div>
<h2>My Component</h2>
</div>
);
}
}
export default MyComponent;
I am getting this 401 (Unauthorized)
error on the DevTools:
Server error:
SERVER ERROR: SyntaxError: Unexpected end of JSON input
Edit 1:
This is my adalConfig.js
code:
import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';
export const adalConfig = {
tenant: 'tenantid',
clientId: 'apiid',
endpoints: {
api: 'apiid'
},
cacheLocation: 'localStorage',
};
export const authContext = new AuthenticationContext(adalConfig);
export const adalApiFetch = (fetch, url, options) => adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);
export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);
Any ideas on what is wrong here? Thanks in advance.