Add custom URL query parameters to component path

Manifest and add-ons
1

Hello,
I’m currently working on a Clockify add-on that interacts with an API. I want the page to be able to load the API Key I’ve set in my add-on’s settings, through the URL query parameters, so my custom page can use the user’s API key for authenticated API requests.

Here is my current schema:

{
    schemaVersion: '1.3',
    key: 'addon-test',
    name: 'Addon Test',
    baseUrl: 'https://MY_API_URL',
    minimalSubscriptionPlan: 'FREE',
    components: [
      {
        type: 'team.tab',
        label: 'My component',
        path: '/clockify/edit_page?my_api_key=${apiKey}',
        accessLevel: 'ADMINS'
      }
    ],
    settings: {
      tabs: [
        {
          id: 'settings',
          name: 'Settings',
          settings: [
            {
              id: 'apiKey',
              name: 'API key',
              placeholder: 'API key',
              description: 'Enter your API key here.',
              value: 'ENTER_YOUR_API_KEY_HERE',
              type: 'TXT',
              required: true,
              copyable: false,
              readOnly: false,
              accessLevel: 'ADMINS'
            }
          ]
        }
      ]
    }
  }

With this schema, when I load the iframe, the URL has a malformed query string that looks like this: https://MY_API_URL/clockify/edit_page?my_api_key=ENTER_YOUR_API_KEY_HERE?auth_token=clockify_auth_token&userId=clockify_user_id&initialUrl=/teams.

I could pass the API key in the URL directly (/clockify/edit_page/${apiKey}), however this makes it more difficult to update my app if I have to add more parameters in my component, and even harder if the app becomes used by other Clockify users.

Is there another way to properly insert custom query parameters in the components URL ? Or should I stick to passing my own API Key directly in the URL ?

Thanks in advance,
Rémi

1 Like
2

Hi Rémi,

Currently, when you provide a component URL, we are appending some default query parameters like userId and current user auth token… The issue occurs when parameters are also defined in component URL so the complete URL is malformed because the url contains two query parameter delimiters (?). This is an issue that we will be working on and hopefully the fix will be live soon. As I understand that is the problem in your case.

Are you using the API KEY to communicate with your own api, or with the Clockify api on behalf of the user?
If you are using it to communicate with Clockify API than the auth_token would do the job since the token we provide you with, can be used to communicate with Clockify API on behalf of the currently logged in user.

3

Hi Filip,

This is an issue that we will be working on and hopefully the fix will be live soon. As I understand that is the problem in your case.

Yes, the URL malformation issue is the problem I encountered. Thanks for your response about the issue!

Are you using the API KEY to communicate with your own api, or with the Clockify api on behalf of the user?

I want to be able to communicate with both APIs: I need informations from the Clockify API (using auth_token) in order to update the configuration of objects I store in my own API (which I interact with using my_api_key). This is why I needed to pass my API key from the settings to my page, which led to this issue.

Thanks again!
Best regards,
Rémi