fix(auth): allow password managers to pre-fill input fields (#9390)

HTML disallows having multiple IDs with the same value.

In reality this is for 1Password's feature where you can create
custom fields named like input IDs and 1Password fill pre-fill that.

Author: sethidden

src/core/components/auth/oauth2.jsx

@@ -196,11 +196,11 @@ export default class Oauth2 extends React.Component {
         {
           ( flow === AUTH_FLOW_APPLICATION || flow === AUTH_FLOW_IMPLICIT || flow === AUTH_FLOW_ACCESS_CODE || flow === AUTH_FLOW_PASSWORD ) &&
           ( !isAuthorized || isAuthorized && this.state.clientId) && <Row>
-            <label htmlFor="client_id">client_id:</label>
+            <label htmlFor={ `client_id_${flow}` }>client_id:</label>
             {
               isAuthorized ? <code> ****** </code>
                            : <Col tablet={10} desktop={10}>
-                               <InitializedInput id="client_id"
+                               <InitializedInput id={`client_id_${flow}`}
                                       type="text"
                                       required={ flow === AUTH_FLOW_PASSWORD }
                                       initialValue={ this.state.clientId }
@@ -213,11 +213,11 @@ export default class Oauth2 extends React.Component {
 
         {
           ( (flow === AUTH_FLOW_APPLICATION || flow === AUTH_FLOW_ACCESS_CODE || flow === AUTH_FLOW_PASSWORD) && <Row>
-            <label htmlFor="client_secret">client_secret:</label>
+            <label htmlFor={ `client_secret_${flow}` }>client_secret:</label>
             {
               isAuthorized ? <code> ****** </code>
                            : <Col tablet={10} desktop={10}>
-                               <InitializedInput id="client_secret"
+                               <InitializedInput id={ `client_secret_${flow}` }
                                       initialValue={ this.state.clientSecret }
                                       type="password"
                                       data-name="clientSecret"

test/e2e-cypress/e2e/features/auth-code-flow-pkce-without-secret.cy.js

@@ -18,7 +18,7 @@ describe("Check client_secret for OAuth2 Authorization Code flow with and withou
       .contains("authorizationCode with PKCE")
       .get(".flow")
       .contains("authorizationCode with PKCE")
-      .get("#client_secret")
+      .get("#client_secret_authorizationCode")
       .should("exist")
   })
 
@@ -41,7 +41,7 @@ describe("Check client_secret for OAuth2 Authorization Code flow with and withou
       .contains("authorizationCode")
       .get(".flow")
       .contains("authorizationCode")
-      .get("#client_secret")
+      .get("#client_secret_authorizationCode")
       .should("exist")
   })
 })

test/e2e-cypress/e2e/features/oauth2-flows/application.cy.js

@@ -30,11 +30,11 @@ describe("OAuth2 Application flow", function() {
       .click()
 
       .get("div.modal-ux-content > div:nth-child(2)").within(() => {
-        cy.get("#client_id")
+        cy.get("#client_id_application")
           .clear()
           .type("confidentialApplication")
 
-          .get("#client_secret")
+          .get("#client_secret_application")
           .clear()
           .type("topSecret")
 

test/e2e-cypress/e2e/features/oauth2-flows/password.cy.js

@@ -18,11 +18,11 @@ describe("OAuth2 Password flow", function() {
       .get("#password_type")
       .select("basic")
 
-      .get("#client_id")
+      .get("#client_id_password")
       .clear()
       .type("application")
 
-      .get("#client_secret")
+      .get("#client_secret_password")
       .clear()
       .type("secret")
 
@@ -75,11 +75,11 @@ describe("OAuth2 Password flow", function() {
       .get("#password_type")
       .select("request-body")
 
-      .get("#client_id")
+      .get("#client_id_password")
       .clear()
       .type("application")
 
-      .get("#client_secret")
+      .get("#client_secret_password")
       .clear()
       .type("secret")
 

test/e2e-cypress/e2e/security/sequential-import-chaining.cy.js

@@ -20,7 +20,7 @@ describe("Security: CSS Sequential Import Chaining", () => {
         cy.visit("/?url=/documents/petstore-expanded.openapi.yaml")
           .get(".scheme-container > .schemes > .auth-wrapper > .btn > span")
           .click()
-          .get("div > div > .wrapper > .block-tablet > #client_id")
+          .get("div > div > .wrapper > .block-tablet > #client_id_implicit")
           .clear()
           .type("abc")
           .should("not.have.attr", "value", "abc")
@@ -48,7 +48,7 @@ describe("Security: CSS Sequential Import Chaining", () => {
         cy.visit("/?url=/documents/petstore.swagger.yaml")
           .get(".scheme-container > .schemes > .auth-wrapper > .btn > span")
           .click()
-          .get("div > div > .wrapper > .block-tablet > #client_id")
+          .get("div > div > .wrapper > .block-tablet > #client_id_implicit")
           .clear()
           .type("abc")
           .should("not.have.attr", "value", "abc")