Shopify / Shopify/shopify-app-template-node
Oauth creation bug in template
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1k
- Forks
- 434
- PR merge metrics
- No merged PRs in 30d
Description
Issue summary
Basically I was using the "auth/callback" endpoint to run some webhook creation functions and I was being constantly thrown this error
Cannot complete OAuth process. Could not find an OAuth cookie for shop url ...
So I gave my app a fresh install to check if the OAuth was being properly installed and this error was thrown right after I installed it in my store:
Could not find OAuth cookie | ...
Failed to complete OAuth with error: Error: Cannot complete OAuth process. Could not find an OAuth cookie for shop url: ...
Thinking it was some sort of weird bug since I converted the template shopify provides us to Typescript, I cloned the base JS template again and gave it another go.
Lo and behold, the same error is being thrown. Which is weird since the app is installed normally in my stores, but everything that uses the OAuth cookie throws this error and ends up breaking the development process.
I've seen similar issues like mine in #639 and here.
I think this can be quite serious since this is popping up in the base template and can be very difficult to fix to any new users that are trying to get into app development.
Here is my template for reference. It is basically the same as the original one, just converted it to TS, installed eslint and prettier and put the backend code in a different folder. I also used the original node-template Shopify provides us.
Here it the code that I've been trying to run to create an HTTP webhook
console.log('start webhook creation');
try {
shopify.api.webhooks.addHandlers({
PRODUCTS_DATA_UPDATE: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: '/api/webhooks',
callback: async (
topic: any,
shop: any,
body: string,
webhookId: any
) => {
const payload = JSON.parse(body);
console.log(`products update feedback: ${payload}`);
},
},
});
console.log('webhook handle registered!');
} catch (error) {
console.error(error); // in practice these should be handled more gracefully
}
try {
const callbackResponse = await shopify.api.auth.callback({
rawRequest: _req,
rawResponse: res,
});
const response = await shopify.api.webhooks.register({
session: callbackResponse.session,
});
if (!response.PRODUCTS_DATA_UPDATE[0].success) {
console.log(
`Failed to register PRODUCTS_DATA_UPDATE webhook: ${response.PRODUCTS_DATA_UPDATE[0].result}`
);
} else {
console.log(
`Registered PRODUCTS_DATA_UPDATE webhook: ${response.PRODUCTS_DATA_UPDATE[0].result}`
);
}
} catch (error) {
console.log(error);
}
console.log('finished webhook creation');
@shopify/shopify-app-expressversion: ^2.1.3- Node version: 16.19.1
- Operating system: Windows 11
`Cannot complete OAuth process. Could not find an OAuth cookie for shop url ...`
`Could not find OAuth cookie | ...`
`Failed to complete OAuth with error: Error: Cannot complete OAuth process. Could not find an OAuth cookie for shop url: ...`
Expected behavior
App should install and detect OAuth cookies normally.
Actual behavior
App throws said errors. It works normally but any OAuth related logic, like webhook creation, breaks completely.
Steps to reproduce the problem
- Clone the template
- Run yarn or npm install in the root directory
- Run yarn dev or npm dev to start the development tunel
- Install in any development store and watch the logs to check for the mentioned errors. Also try copying and pasting the mentioned code to check for OAuth errors when creating/registering webhooks.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the OAuth auth/callback entry point and the shopifyApp settings in web/shopify.js, then reproduce the fresh-install flow using the listed template steps and logging configuration. Compare the OAuth cookie errors with the webhook registration code; done means a development-store install completes OAuth and webhook registration without those errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, node.js
- Domain
- api, authentication, backend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100