add new recipe showing basic authentication in action (#655)

Author: bahmutov

README.md

@@ -45,6 +45,7 @@ Recipe | Description
 
 Recipe | Description
 --- | ---
+[Basic Auth](./examples/logging-in__basic-auth) | Log in using Basic Authentication
 [Single Sign On](./examples/logging-in__single-sign-on) | Log in across multiple servers or providers
 [HTML Web Forms](./examples/logging-in__html-web-forms) | Log in with a basic HTML form
 [XHR Web Forms](./examples/logging-in__xhr-web-forms) | Log in using an XHR

circle.yml

@@ -237,6 +237,8 @@ jobs:
     <<: *defaults
   logging-in__using-app-code:
     <<: *defaults
+  logging-in__basic-auth:
+    <<: *defaults
   preprocessors__grep:
     <<: *defaults
     # in this particular example we want to grep tests
@@ -440,6 +442,9 @@ all_jobs: &all_jobs
   - fundamentals__cy-events:
       requires:
         - build
+  - logging-in__basic-auth:
+      requires:
+        - build
   - logging-in__csrf-tokens:
       requires:
         - build
@@ -634,6 +639,7 @@ all_jobs: &all_jobs
         - logging-in__xhr-web-forms
         - logging-in__jwt
         - logging-in__using-app-code
+        - logging-in__basic-auth
         - preprocessors__grep
         - preprocessors__flow-browserify
         - preprocessors__typescript-browserify

examples/logging-in__basic-auth/README.md

@@ -0,0 +1,6 @@
+# logging-in__basic-auth
+Shows how to visit the page protected by the [Basic Authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication)
+
+The static site from [public folder](./public) is protected by the basic authentication, see [server.js](./server.js).
+
+The [cypress/integration/spec.js](./cypress/integration/spec.js) shows how to pass the username and the password when calling [cy.visit](https://on.cypress.io/visit) and [cy.request](https://on.cypress.io/request) commands.

examples/logging-in__basic-auth/cypress.json

@@ -0,0 +1,8 @@
+{
+  "baseUrl": "http://localhost:7065",
+  "fixturesFolder": false,
+  "pluginsFile": false,
+  "supportFile": false,
+  "viewportHeight": 200,
+  "viewportWidth": 200
+}

examples/logging-in__basic-auth/cypress/integration/spec.js

@@ -0,0 +1,65 @@
+/// <reference types="cypress" />
+
+describe('Logging In - Basic Auth', function () {
+  // we can use these values to log in
+  const username = 'jane.lane'
+  const password = 'password123'
+
+  context('cy.request', () => {
+    // https://on.cypress.io/request
+
+    it('without authorization gets 401', () => {
+      cy.request({
+        url: '/',
+        failOnStatusCode: false,
+      }).its('status').should('equal', 401)
+    })
+
+    it('with authorization', () => {
+      cy.request({
+        url: '/',
+        auth: {
+          username, password,
+        },
+      }).its('status').should('equal', 200)
+    })
+
+    it('can post', () => {
+      cy.request({
+        url: '/echo',
+        method: 'POST',
+        auth: {
+          username, password,
+        },
+        body: {
+          text: 'ping!',
+        },
+      }).then((response) => {
+        expect(response.status, 'status').to.equal(200)
+        expect(response.body).to.deep.equal({
+          text: 'ping!',
+        })
+      })
+    })
+  })
+
+  context('cy.visit', () => {
+    // https://on.cypress.io/visit
+
+    it('loads the page using basic auth', () => {
+      cy.visit('/', {
+        auth: {
+          username,
+          password,
+        },
+      })
+
+      // confirm that all static resources have loaded
+      cy.get('#app-message').should('not.be.empty')
+      cy.log('app.js loaded')
+
+      cy.contains('h1', 'Red').should('have.css', 'color', 'rgb(255, 0, 0)')
+      cy.log('app.css loaded')
+    })
+  })
+})

examples/logging-in__basic-auth/images/login.png

@@ -0,0 +1,19 @@
+{
+  "name": "logging-in__basic-auth",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "cypress:open": "../../node_modules/.bin/cypress open",
+    "cypress:run": "../../node_modules/.bin/cypress run",
+    "cypress:run:chrome": "../../node_modules/.bin/cypress run --browser chrome",
+    "cypress:run:firefox": "../../node_modules/.bin/cypress run --browser firefox",
+    "cypress:run:record": "../../node_modules/.bin/cypress run --record",
+    "dev": "../../node_modules/.bin/start-test 7065 cypress:open",
+    "start": "node server.js --port 7065",
+    "test:ci": "../../node_modules/.bin/start-test 7065 cypress:run",
+    "test:ci:chrome": "../../node_modules/.bin/start-test 7065 cypress:run:chrome",
+    "test:ci:firefox": "../../node_modules/.bin/start-test 7065 cypress:run:firefox",
+    "test:ci:record": "../../node_modules/.bin/start-test 7065 cypress:run:record"
+  }
+}

examples/logging-in__basic-auth/package.json

@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}

examples/logging-in__basic-auth/public/app.css

@@ -0,0 +1,2 @@
+/* global document */
+document.getElementById('app-message').innerText = 'app.js loaded'

examples/logging-in__basic-auth/public/app.js

@@ -0,0 +1,8 @@
+<head>
+  <link rel="stylesheet" type="text/css" href="app.css" />
+</head>
+<body>
+  <h1>Red</h1>
+  <div id="app-message"></div>
+  <script src="app.js"></script>
+</body>

examples/logging-in__basic-auth/public/index.html

@@ -0,0 +1,29 @@
+/* eslint-disable no-console */
+const minimist = require('minimist')
+const morgan = require('morgan')
+const express = require('express')
+const bodyParser = require('body-parser')
+const basicAuth = require('express-basic-auth')
+
+const app = express()
+
+// get port from passed in args from scripts/start.js
+const port = minimist(process.argv.slice(2)).port
+
+// an endpoint replying to HEAD requests
+// used by start-server-and-test utility to know when the server is ready
+app.head('/', (req, res) => res.send(''))
+
+app.use(morgan('dev'))
+// protect all resources with basic authentication
+app.use(basicAuth({
+  users: { 'jane.lane': 'password123' },
+}))
+
+app.post('/echo', bodyParser.json(), (req, res) => {
+  console.log('/echo received', req.body)
+  res.json(req.body)
+})
+
+app.use(express.static('public'))
+app.listen(port)

examples/logging-in__basic-auth/server.js

@@ -49,6 +49,7 @@
     "enzyme-adapter-react-16": "1.1.1",
     "execa": "2.0.4",
     "express": "4.16.2",
+    "express-basic-auth": "1.2.0",
     "express-jwt": "5.3.1",
     "express-session": "1.15.6",
     "graphql": "14.5.8",