improve: OAuth2 UI and test suite (via swagger-api#5066)

* create `features` folder

* add base oauth2 server

* continue implementing OAuth tests

* WIP

* add password flow tests

* modify Password flow credential types

* remove query string credential type

* add test case for Authorization flow

* add specific Authorization value for Password flow test

* WIP

* fix linter issues

package.json

@@ -95,9 +95,11 @@
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-0": "^6.22.0",
     "babel-runtime": "^6.23.0",
+    "body-parser": "^1.18.3",
     "bundlesize": "^0.17.0",
     "chromedriver": "^2.38.3",
     "copy-webpack-plugin": "^4.0.1",
+    "cors": "^2.8.4",
     "css-loader": "^0.28.11",
     "cypress": "^3.1.0",
     "dedent": "^0.7.0",
@@ -108,6 +110,7 @@
     "eslint-plugin-mocha": "^4.11.0",
     "eslint-plugin-react": "^7.10.0",
     "expect": "^1.20.2",
+    "express": "^4.16.4",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.11",
     "git-describe": "^4.0.1",
@@ -124,6 +127,7 @@
     "npm-run-all": "^4.1.2",
     "null-loader": "0.1.1",
     "nyc": "^11.3.0",
+    "oauth2-server": "^2.4.1",
     "open": "0.0.5",
     "postcss-loader": "^2.1.5",
     "raw-loader": "0.5.1",

src/core/components/auth/oauth2.jsx

@@ -24,7 +24,7 @@ export default class Oauth2 extends React.Component {
     let username = auth && auth.get("username") || ""
     let clientId = auth && auth.get("clientId") || authConfigs.clientId || ""
     let clientSecret = auth && auth.get("clientSecret") || authConfigs.clientSecret || ""
-    let passwordType = auth && auth.get("passwordType") || "request-body"
+    let passwordType = auth && auth.get("passwordType") || "basic"
 
     this.state = {
       appName: authConfigs.appName,
@@ -150,22 +150,21 @@ export default class Oauth2 extends React.Component {
                 }
               </Row>
               <Row>
-                <label htmlFor="password_type">type:</label>
+                <label htmlFor="password_type">Client credentials location:</label>
                 {
                   isAuthorized ? <code> { this.state.passwordType } </code>
                     : <Col tablet={10} desktop={10}>
                       <select id="password_type" data-name="passwordType" onChange={ this.onInputChange }>
+                        <option value="basic">Authorization header</option>
                         <option value="request-body">Request body</option>
-                        <option value="basic">Basic auth</option>
-                        <option value="query">Query parameters</option>
                       </select>
                     </Col>
                 }
               </Row>
             </Row>
         }
         {
-          ( flow === APPLICATION || flow === IMPLICIT || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "basic") ) &&
+          ( flow === APPLICATION || flow === IMPLICIT || flow === ACCESS_CODE || flow === PASSWORD ) &&
           ( !isAuthorized || isAuthorized && this.state.clientId) && <Row>
             <label htmlFor="client_id">client_id:</label>
             {
@@ -183,7 +182,7 @@ export default class Oauth2 extends React.Component {
         }
 
         {
-          ( flow === APPLICATION || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "basic") ) && <Row>
+          ( (flow === APPLICATION || flow === ACCESS_CODE || flow === PASSWORD) && <Row>
             <label htmlFor="client_secret">client_secret:</label>
             {
               isAuthorized ? <code> ****** </code>
@@ -197,7 +196,7 @@ export default class Oauth2 extends React.Component {
             }
 
           </Row>
-        }
+        )}
 
         {
           !isAuthorized && scopes && scopes.size ? <div className="scopes">

src/core/components/live-response.jsx

@@ -80,7 +80,7 @@ export default class LiveResponse extends React.Component {
           </div>
         }
         <h4>Server response</h4>
-        <table className="responses-table">
+        <table className="responses-table live-responses-table">
           <thead>
           <tr className="responses-header">
             <td className="col col_header response-col_status">Code</td>

src/core/plugins/auth/actions.js

@@ -74,28 +74,23 @@ export const authorizePassword = ( auth ) => ( { authActions } ) => {
   let { schema, name, username, password, passwordType, clientId, clientSecret } = auth
   let form = {
     grant_type: "password",
-    scope: auth.scopes.join(scopeSeparator)
+    scope: auth.scopes.join(scopeSeparator),
+    username,
+    password
   }
   let query = {}
   let headers = {}
 
-  if ( passwordType === "basic") {
-    headers.Authorization = "Basic " + btoa(username + ":" + password)
-  } else {
-    Object.assign(form, {username}, {password})
-
-    switch ( passwordType ) {
-      case "query":
-        setClientIdAndSecret(query, clientId, clientSecret)
-        break
+  switch (passwordType) {
+    case "request-body":
+      setClientIdAndSecret(form, clientId, clientSecret)
+      break
 
-      case "request-body":
-        setClientIdAndSecret(form, clientId, clientSecret)
-        break
-
-      default:
-        headers.Authorization = "Basic " + btoa(clientId + ":" + clientSecret)
-    }
+    case "basic":
+      headers.Authorization = "Basic " + btoa(clientId + ":" + clientSecret)
+      break
+    default:
+      console.warn(`Warning: invalid passwordType ${passwordType} was passed, not including client id and secret`)
   }
 
   return authActions.authorizeRequest({ body: buildFormData(form), url: schema.get("tokenUrl"), name, headers, query, auth})

test/e2e-cypress/helpers/oauth2-server/index.js

@@ -0,0 +1,50 @@
+// from https://github.com/pedroetb/node-oauth2-server-example
+
+var Http = require("http")
+var path = require("path")
+var express = require("express")
+var bodyParser = require("body-parser")
+var oauthserver = require("oauth2-server")
+var cors = require("cors")
+
+var app = express()
+
+app.use(cors())
+
+app.use(bodyParser.urlencoded({ extended: true }))
+
+app.use(bodyParser.json())
+
+app.oauth = oauthserver({
+  model: require("./model.js"),
+  grants: ["password", "client_credentials", "implicit"],
+  debug: true
+})
+
+app.all("/oauth/token", app.oauth.grant())
+
+app.get("/swagger.yaml", function (req, res) {
+  res.sendFile(path.join(__dirname, "swagger.yaml"))
+})
+
+app.get("*", app.oauth.authorise(), function (req, res) {
+  res.send("Secret secrets are no fun, secret secrets hurt someone.")
+})
+
+app.use(app.oauth.errorHandler())
+
+function startServer() {
+  var httpServer = Http.createServer(app)
+  httpServer.listen("3231")
+
+  return function stopServer() {
+    httpServer.close()
+  }
+}
+
+module.exports = startServer
+
+if (require.main === module) {
+  // for debugging
+  startServer()
+}