I'm trying to connect to the Etsy v3 API using Oauth 2.0. I've followed a couple of other help documents and filled out the relevant fields, but the connection fails as it requires a code_challenge when setting up the initial connection (see the screenshots).
I'm currently including these fields in the url parameters initially - is there somewhere else they should live before clicking the Connect with OAuth button?
Hi @sportschord! Just to double check, have you been able to get this work in another service like Postman? If so, it would be super helpful to see screenshots of that so we can try to replicate it in Retool!
And have you added Retool's URI to Etsy's approved URI list?
https://stackoverflow.com/questions/68353440/making-etsy-oauth2-0-call-via-postman
\
Hi Victoria, thanks for your help on this!
I've got it working in a python script using details in this blog
the Retool URI part seems to be working okay, I've copied this from Retool and entered it into the app page on the etsy side: https://oauth.retool.com/oauth/user/oauthcallback
the issue seems to be with the code-challenge. In the stack overflow page there is a space underneath client secret for code-challenge method - think this is what I'm looking for an equivalent of on the Retool side?
Hi @victoria, don't suppose there is anyone that can help on the code challenge part here - much appreciated!?
I had a quick look on this. It seems Retool's authentication method doesn't support PKCE. It would be interesting to know if this support is coming at some point?
On the meanwhile, if the authentication flow can be done via workflows the code challenge script can be done manually.
Guide on Etsy's page: Quick Start Tutorial | Etsy Open API v3
Unfortunately running node in the browser doesn't allow access to those specific crypto functions so a little modification is needed.
function dec2hex(dec) {
return ("0" + dec.toString(16)).substr(-2);
}
function generateCodeVerifier() {
var array = new Uint32Array(56 / 2);
window.crypto.getRandomValues(array);
return Array.from(array, dec2hex).join("");
}
function sha256(plain) {
// returns promise ArrayBuffer
const encoder = new TextEncoder();
const data = encoder.encode(plain);
return window.crypto.subtle.digest("SHA-256", data);
}
function base64urlencode(a) {
var str = "";
var bytes = new Uint8Array(a);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
str += String.fromCharCode(bytes[i]);
}
return btoa(str)
.replace(/\+/g, "-")
.replace(/\//g, "_")
.replace(/=+$/, "");
}
async function generateCodeChallengeFromVerifier(v) {
var hashed = await sha256(v);
var base64encoded = base64urlencode(hashed);
return base64encoded;
}
const codeVerifier = generateCodeVerifier()
const codeChallenge = await generateCodeChallengeFromVerifier(codeVerifier)
console.log(codeVerifier)
console.log(codeChallenge)
return {challenge: codeChallenge, verifier: codeVerifier}
Those return values can then be used in the API call that follows.
Hope this helps and let me know if you get the authentication working via workflows!
thanks @joonas, have managed to get the refresh & access tokens working separately in a workflow but that was having received the initial tokens from a separate process - was hoping to be able to use the built in resource connector in retool for all etsy api queries so looks like il have to wait for the PKCE functionality to be added - would also be interested to know if and when this arrives but not sure who would be able to notify us!
@victoria FYI same issue for the Airtable API which also uses PKCE and is deprecating API tokens in January 2024 so will be forced to use OAUTH.
Thank you for the heads up, Alex! Are there any specific challenges you're expecting there? I want to make sure I'm sharing as full of a picture as possible with our eng teams!