react-google-calendar-api

react-google-calendar-api copied to clipboard

Getting this error when the page loads:

Content Security Policy: The page’s settings blocked the loading of a resource at https://apis.google.com/js/api.js (“script-src”).

Here are my meta tags in my index.html

<meta 
    http-equiv="Content-Security-Policy"
    content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://apis.google.com"
/>
<meta
    http-equiv="Content-Security-Policy"
    content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://accounts.google.com"
/>

Here is the code from my component

import ApiCalendar from "react-google-calendar-api";

function Calendar() {
	ApiCalendar.onLoad(() => {
		ApiCalendar.handleAuthClick()
			.then(() => {
				console.log("sign in succesful!");
			})
			.catch((e) => {
				console.error(`sign in failed ${e}`);
			});
	});
	if (ApiCalendar.sign)
		ApiCalendar.listUpcomingEvents(10).then(({ result }) => {
			console.log(result.items);
		});
	return <div>Calendar</div>;
}

export default Calendar;

I'm just trying to console.log the events right now but it's not working. Any help would be appreciated.

Hi does it work without the CSP meta tags ? This looks like more of a CSP issue than the package, but I can try to help you on that (https://stackoverflow.com/questions/37298608/content-security-policy-the-pages-settings-blocked-the-loading-of-a-resource)