Help with connecting Wix to Retool resource

Hey gang, has anyone been able to connect to Wix via OAuth2? I’m struggling to build the resource using the OAuth2 flow.

Wix API Auth docs for context:

Thanks!

Hey @Decimal-Guy!

Are you running into any particular issues getting things set up? It can be really helpful to see specific error messages and what your configuration is so far (i.e. the resource setup page as well as your Wix OAuth2 setup).

Sensitive information redacted of course!

Hey @Kabirdas,

Here are some photo's of my resources setup (there is no sensitive data exposed).

The "Authentication" flow for Wix's API seemed pretty confusing but I know its possible to connect to it via HTTP client as I can connect to it via Make (No-code automation platform).



Thanks for that! Did some playing around with it and it looks like this one's a bit tricky. Usually for OAuth2 flows endpoints expect you to send a client id which Retool passes in the client_id URL parameter. Wix is expecting it to come in the appId URL parameter though which does not send with the default OAuth2 flow so we'll need to build it out ourselves using custom auth!

Following along with the doc you posted you'll first need to make a request to https://www.wix.com/installer/install that includes a redirect URL to Retool as well as that appId I mentioned. This will be the actual SSO part of the auth flow so we can use a "Redirect to SSO" step for it. Doing so provides us with the redirect URL we need (described as the "Callback url"). Both the redirectUrl and appId URL parameters need to be manually added to the "URL to redirect you to" field. So you'll end up with something like:

https://www.wix.com/installer/install?redirectUrl=https://<YOUR_DOMAIN>/oauth/user/redirectCallback&appId=<YOUR_APP_ID>

Note here that the redirect's URL parameters are exported as variables we can access.

For the next step, Wix requires a client_secret which will correlate with your app's secret key, a client_id this time :sweat_smile: which is still just your app id, as well as a code that's returned in the previous step's URL parameters. The first two can be found in your Wix app while the last we'll need to grab with a "Define a variable" step:

Then we can make the necessary POST request to https://www.wixapis.com/oauth/access with an "API request" step:

This step returns the necessary auth token! We'll just need to define it as a new variable:

That can then be sent along with each request:

Finally, Wix's access tokens expire in 5 minutes it's important to refresh it using their associated endpoint. This requires first adding one more "Define a variable" step to the initial auth flow to save the refresh token:

Which can then be used in the following refresh flow:

Once you've authenticated the resource you should be able to hit their endpoints (like this empty blog):

Let me know if that helps!

1 Like

Wow, that’s more complex for sure! Glad I was on the right path, I’ll work on this today and get back with you. Thanks so much!!

Hi Kabirdas, I am really trying as h.ll but untfortunately I only get error messages, as shown below. After 1 week of trial and error I run out of options. Is there any way you know what could go wrong went receiving this message?

  "message": "  <!--  -->\n\n<!doctype html>\n<!--\n        -->\n<html ng-app=\"wixErrorPagesApp\">\n<head>\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no\">\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <title ng-bind=\"'page_title' | translate\"></title>\n  <meta name=\"description\" content=\"\">\n  <meta name=\"viewport\" content=\"width=device-width\">\n  <meta name=\"robots\" content=\"noindex, nofollow\">\n  <!--  -->\n    <link type=\"image/png\" href=\"//www.wix.com/favicon.ico\" rel=\"shortcut icon\">\n  <!--  -->\n  <link href=\"//static.parastorage.com/services/third-party/fonts/Helvetica/fontFace.css\" rel=\"stylesheet\" type=\"text/css\" />\n  <!--  -->\n  <link rel=\"stylesheet\" href=\"//static.parastorage.com/services/wix-public/1.299.0//styles/error-pages/styles.css\">\n  <!--  -->\n</head>\n<body lang=\"en\" ng-controller=\"ErrorPageController as errorPageCtrl\" class=\"error-page-app\" ng-class=\"{'secondary-background': isSecondaryBackground}\">\n<!--[if lt IE 9]>\n<script src=\"//static.parastorage.com/services/third-party/es5-shim/2.1.0/es5-shim.min.js\"></script>\n<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>\n<![endif]-->\n<!--[if gte IE 9]><!-->\n<script src=\"//static.parastorage.com/services/third-party/jquery/2.0.3/jquery.min.js\"></script>\n<!--<![endif]-->\n\n<script src=\"//static.parastorage.com/services/third-party/angularjs/1.2.28/angular.min.js\"></script>\n  <!--  -->\n<script src=\"//static.parastorage.com/services/third-party/angularjs/1.2.28/i18n/angular-locale_en.js\"></script>\n<script src=\"//static.parastorage.com/services/third-party/angular-translate/1.1.1/angular-translate.min.js\"></script>\n\n<script src=\"//static.parastorage.com/services/wix-public/1.299.0//scripts/error-pages/locale/messages_en.js\"></script>\n  <!--  -->\n<script src=\"//static.parastorage.com/services/wix-public/1.299.0//scripts/error-pages/app.js\"></script>\n  <!--  -->\n\n<script>\n  angular.module('wixErrorPagesApp').constant('staticsUrl', '//static.parastorage.com/services/wix-public/1.299.0//');\n  angular.module('wixErrorPagesApp').constant('baseDomain', 'wix.com');\n  angular.module('wixErrorPagesApp').constant('language', 'en');\n  angular.module('wixErrorPagesApp').constant('errorCode', {code: '403'});\n  angular.module('wixErrorPagesApp').constant('data', {});\n  angular.module('wixErrorPagesApp').constant('exceptionName', 'null');\n  angular.module('wixErrorPagesApp').constant('serverErrorCode', '-100');\n  angular.module('wixErrorPagesApp').constant('requestId', '1713018400.19821658162087828449');\n</script>\n<div ng-cloak ng-include=\"errorPageCtrl.errorPageUrl\">\n  <div class=\"non-angular-supported-browser-wrapper\">\n    <h1 class=\"non-angular-supported-browser-header\">Error 403 occurred</h1>\n    <div class=\"non-angular-supported-browser-link\">\n      <span>Regardless, we recommend you to <a href=\"http://browsehappy.com/\">update your browser.</a></span>\n    </div>\n  </div>\n</div>\n<!-- verification -->\n<!-- end verification -->\n</body>\n</html>\n"
}

Hey @Jan_van_der_Heide, would you please share screenshots of how you have this set up? It's difficult to say exactly what is going wrong but looks like you are being redirected to an error page by Wix. Happy to take a look if you can share. Thanks!

Hi @joeBumbaca don't get mad after posting that many images but unfortunately it's needed at wix to use that much steps to connect. the redirection goes to app, it might go wrong their because an app at wix is for their app (widgets) in stead of a mobile app.

I'm apreciate your help already!

See images below, hopefully the upload ordered by time :slight_smile: :grinning:




Hey @Jan_van_der_Heide, not mad about the images at all, I expected it!

  1. Can you send me the full url in the URL to redirect you to field from the Redirect to SSO step. Feel free to DM that to me if you prefer.

  2. Looks like you are missing a couple of steps. Namely defining the Access Token step and placing that variable in the headers of the request sent to the bae url. Also missing the refresh step as well, but you can add that later as it shouldn't be necessary to make a successful request.

  3. Can you share when you are getting the above error? Is it when you are testing the auth flow? Or when you are sending a request?

Thanks!

@Jan_van_der_Heide Posting this here for continuation of the thread.
image

Looks like you are getting an app_id_not_found error. Didn't see much on their site about that error unfortunately. I'd double check that your app id is correct in both places (the redirect url that you manually updated, and in the value of the client_id field in the access token api request).