oauth2 client credentials auth style improvement

Author: yesoreyeram

.changeset/curvy-waves-switch.md

@@ -0,0 +1,5 @@
+---
+'grafana-infinity-datasource': minor
+---
+
+🚀 **OAuth2**: Added ability to set auth style in client credentials

pkg/infinity/oauth.go

@@ -23,6 +23,7 @@ func ApplyOAuthClientCredentials(httpClient *http.Client, settings models.Infini
 			TokenURL:       settings.OAuth2Settings.TokenURL,
 			Scopes:         []string{},
 			EndpointParams: url.Values{},
+			AuthStyle:      settings.OAuth2Settings.AuthStyle,
 		}
 		for _, scope := range settings.OAuth2Settings.Scopes {
 			if scope != "" {

pkg/models/settings.go

@@ -8,6 +8,7 @@ import (
 	"strings"
 
 	"github.com/grafana/grafana-plugin-sdk-go/backend"
+	"golang.org/x/oauth2"
 )
 
 const (
@@ -33,13 +34,14 @@ const (
 )
 
 type OAuth2Settings struct {
-	OAuth2Type     string   `json:"oauth2_type,omitempty"`
-	ClientID       string   `json:"client_id,omitempty"`
-	TokenURL       string   `json:"token_url,omitempty"`
-	Email          string   `json:"email,omitempty"`
-	PrivateKeyID   string   `json:"private_key_id,omitempty"`
-	Subject        string   `json:"subject,omitempty"`
-	Scopes         []string `json:"scopes,omitempty"`
+	OAuth2Type     string           `json:"oauth2_type,omitempty"`
+	ClientID       string           `json:"client_id,omitempty"`
+	TokenURL       string           `json:"token_url,omitempty"`
+	Email          string           `json:"email,omitempty"`
+	PrivateKeyID   string           `json:"private_key_id,omitempty"`
+	Subject        string           `json:"subject,omitempty"`
+	Scopes         []string         `json:"scopes,omitempty"`
+	AuthStyle      oauth2.AuthStyle `json:"authStyle,omitempty"`
 	ClientSecret   string
 	PrivateKey     string
 	EndpointParams map[string]string

src/editors/config/OAuthInput.tsx

@@ -44,6 +44,34 @@ export const OAuthInputsEditor = (props: DataSourcePluginOptionsEditorProps<Infi
       </div>
       {oauth2.oauth2_type === 'client_credentials' && (
         <>
+          <div className="gf-form">
+            <InlineFormLabel
+              width={10}
+              tooltip={
+                <>
+                  {`AuthStyleAutoDetect means to auto-detect which authentication style the provider wants by trying both ways and caching the successful way for the future.`}
+                  <br />
+                  <br />
+                  {`AuthStyleInParams sends the "client_id" and "client_secret" in the POST body as application/x-www-form-urlencoded parameters.`}
+                  <br />
+                  <br />
+                  {`AuthStyleInHeader sends the client_id and client_password using HTTP Basic Authorization. This is an optional style described in the OAuth2 RFC 6749 section 2.3.1.`}
+                </>
+              }
+              {...{ interactive: true }}
+            >
+              Auth Style
+            </InlineFormLabel>
+            <RadioButtonGroup
+              options={[
+                { value: 0, label: 'Auto' },
+                { value: 1, label: 'In Params' },
+                { value: 2, label: 'In Header' },
+              ]}
+              onChange={(v) => onOAuth2PropsChange('authStyle', v || 0)}
+              value={oauth2.authStyle || 0}
+            ></RadioButtonGroup>
+          </div>
           <div className="gf-form">
             <InlineFormLabel width={10}>Client ID</InlineFormLabel>
             <Input onChange={(v) => onOAuth2PropsChange('client_id', v.currentTarget.value)} value={oauth2.client_id} width={30} placeholder={'Client ID'} />

src/types/config.types.ts

@@ -18,6 +18,7 @@ export type OAuth2Props = {
   subject?: string;
   token_url?: string;
   scopes?: string[];
+  authStyle?: number;
 };
 export type AWSAuthProps = {
   authType?: 'keys';