How to use DataSourceHttpSettings to make auth query

Grafana Plugin Development
1

Hello,
I am building a backend plugin in which I use DataSourceHttpSettings in my ConfigEditor.

export function ConfigEditor(props: Props) {
  const { onOptionsChange, options } = props;
  return (
    <>
      <DataSourceHttpSettings
        defaultUrl="https://demo.akvorado.net"
        dataSourceConfig={options}
        onChange={onOptionsChange}
        sigV4AuthToggleEnabled={true}
      />
    </>
  );

}

Now I want to be able to use the auth header to do query in my datasource but I do not find any documentation on how to use the component.

Does some one already did that ?
Thx

2

Hi @punetworkobservabili the DataSourceHttpSettings already offer options to the user to add any header including an Authentication one.

image
image741×850 42 KB

It is important to notice you can’t access these headers values directly in javascript (e.g. to make a fetch request) because they are considered secrets and are encrypted.

To use them you have to use the data proxy. You can find more information about how to use the data proxy in this documentation page

or if you are developing a backend plugin you can see this documentation

3

Indeed I did not understood the proxy component.
I managed to make it works.
Thx :slight_smile: