MelvynFaith
4fe9ff1d7e
- add /auth/login and /auth/callback (rewritten to pages/api/auth/*) for the GitHub Authorization Code flow, with a state cookie against login CSRF - issue a 1h JWT after the code exchange and verify it (HS256) in the Apollo context; createProduct, updateProduct and deleteProduct require it - set products.created_by from the logged-in GitHub user (upsert into users) - preset the Authorization header in the embedded Sandbox - add jsonwebtoken, drop unused cors, rename package to week-7
59 lines
1.3 KiB
JavaScript
59 lines
1.3 KiB
JavaScript
const React = require('react');
|
|
const Head = require('next/head');
|
|
|
|
function Home() {
|
|
const sandboxRef = React.useRef(null);
|
|
|
|
React.useEffect(() => {
|
|
const script = document.createElement('script');
|
|
script.src =
|
|
'https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js';
|
|
script.async = true;
|
|
|
|
script.onload = () => {
|
|
sandboxRef.current = new window.EmbeddedSandbox({
|
|
target: '#embedded-sandbox',
|
|
initialEndpoint: `${window.location.origin}/api/graphql`,
|
|
initialState: {
|
|
// Ganti <paste-token-here> dengan JWT dari /auth/login supaya mutation diizinkan.
|
|
headers: { Authorization: 'Bearer <paste-token-here>' },
|
|
document: `query TestCategoriesWithProducts {
|
|
categories {
|
|
id
|
|
name
|
|
products {
|
|
id
|
|
title
|
|
price
|
|
}
|
|
}
|
|
}`,
|
|
},
|
|
});
|
|
};
|
|
|
|
document.body.appendChild(script);
|
|
|
|
return () => {
|
|
sandboxRef.current?.dispose?.();
|
|
script.remove();
|
|
};
|
|
}, []);
|
|
|
|
return React.createElement(
|
|
React.Fragment,
|
|
null,
|
|
React.createElement(
|
|
Head,
|
|
null,
|
|
React.createElement('title', null, 'GraphQL Sandbox')
|
|
),
|
|
React.createElement('div', {
|
|
id: 'embedded-sandbox',
|
|
style: { width: '100vw', height: '100vh' },
|
|
})
|
|
);
|
|
}
|
|
|
|
module.exports = Home;
|