Add auth example (#196)

examples/with-auth/README.md

@@ -0,0 +1,10 @@
+# Local passport auth example
+
+This example shows how to secure your bull-board using local passport strategy.
+
+### Notes
+1. It will work with any **cookie** based auth, since the browser will attach 
+   the `session` cookie automatically to **each** request.
+
+
+Based on: https://github.com/passport/express-4.x-local-example/blob/master/server.js

examples/with-auth/index.js

@@ -0,0 +1,118 @@
+const { setQueues, router, BullMQAdapter } = require('bull-board');
+const { Queue: QueueMQ, Worker, QueueScheduler } = require('bullmq');
+const session = require('express-session');
+const bodyParser = require('body-parser');
+const passport = require('passport');
+const LocalStrategy = require('passport-local').Strategy;
+const { ensureLoggedIn } = require('connect-ensure-login');
+
+const app = require('express')();
+
+// Configure the local strategy for use by Passport.
+//
+// The local strategy require a `verify` function which receives the credentials
+// (`username` and `password`) submitted by the user.  The function must verify
+// that the password is correct and then invoke `cb` with a user object, which
+// will be set at `req.user` in route handlers after authentication.
+passport.use(new LocalStrategy(
+  function (username, password, cb) {
+    if (username === 'bull' && password === 'board') {
+      return cb(null, { user: 'bull-board' });
+    }
+    return cb(null, false);
+  }));
+
+// Configure Passport authenticated session persistence.
+//
+// In order to restore authentication state across HTTP requests, Passport needs
+// to serialize users into and deserialize users out of the session.  The
+// typical implementation of this is as simple as supplying the user ID when
+// serializing, and querying the user record by ID from the database when
+// deserializing.
+passport.serializeUser((user, cb) => {
+  cb(null, user);
+});
+
+passport.deserializeUser((user, cb) => {
+  cb(null, user);
+});
+
+// Configure view engine to render EJS templates.
+app.set('views', __dirname + '/views');
+app.set('view engine', 'ejs');
+
+const sleep = (t) => new Promise((resolve) => setTimeout(resolve, t * 1000));
+
+const redisOptions = {
+  port: 6379,
+  host: 'localhost',
+  password: '',
+  tls: false,
+};
+
+const createQueueMQ = (name) => new QueueMQ(name, { connection: redisOptions });
+
+const run = async () => {
+  const exampleBullMqName = 'ExampleBullMQ';
+  const exampleBullMq = createQueueMQ(exampleBullMqName);
+
+  setQueues([new BullMQAdapter(exampleBullMq)]);
+
+  const queueScheduler = new QueueScheduler(exampleBullMqName, {
+    connection: redisOptions,
+  });
+  await queueScheduler.waitUntilReady();
+
+  new Worker(exampleBullMqName, async (job) => {
+    for (let i = 0; i <= 100; i++) {
+      await sleep(Math.random());
+      await job.updateProgress(i);
+
+      if (Math.random() * 200 < 1) throw new Error(`Random error ${i}`);
+
+      return { jobId: `This is the return value of job (${job.id})` };
+    }
+  });
+
+  app.use(session({ secret: 'keyboard cat' }));
+  app.use(bodyParser.urlencoded({ extended: false }));
+
+  // Initialize Passport and restore authentication state, if any, from the session.
+  app.use(passport.initialize({}));
+  app.use(passport.session({}));
+
+  app.get('/ui/login',
+    (req, res) => {
+      res.render('login');
+    });
+
+  app.post('/ui/login',
+    passport.authenticate('local', { failureRedirect: '/ui/login' }),
+    (req, res) => {
+      res.redirect('/ui');
+    });
+
+  app.use('/add', (req, res) => {
+    const opts = req.query.opts || {};
+
+    exampleBullMq.add('Add', { title: req.query.title }, opts);
+
+    res.json({
+      ok: true,
+    });
+  });
+
+  app.use('/ui', ensureLoggedIn({ redirectTo: '/ui/login' }), router);
+
+  app.listen(3000, () => {
+    console.log('Running on 3000...');
+    console.log('For the UI, open http://localhost:3000/ui');
+    console.log('Make sure Redis is running on port 6379 by default');
+    console.log('To populate the queue, run:');
+    console.log('  curl http://localhost:3000/add?title=Example');
+    console.log('To populate the queue with custom options (opts), run:');
+    console.log('  curl http://localhost:3000/add?title=Test&opts[delay]=900');
+  });
+};
+
+run();

examples/with-auth/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "bull-board-auth-example",
+  "version": "1.0.0",
+  "description": "Example of how to use passport.js & custom login page with bull-board",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "felixmosh",
+  "license": "ISC",
+  "dependencies": {
+    "body-parser": "^1.19.0",
+    "bull-board": "^1.1.2",
+    "bullmq": "^1.11.0",
+    "connect-ensure-login": "^0.1.1",
+    "express": "^4.17.1",
+    "express-session": "^1.17.1",
+    "passport": "^0.4.1",
+    "passport-local": "^1.0.0"
+  }
+}

examples/with-auth/views/login.ejs

@@ -0,0 +1,114 @@
+<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap" rel="stylesheet"/>
+<style>
+    body {
+        background: #f5f8fa;
+        font-family: 'Ubuntu', sans-serif;
+        font-weight: 400;
+        line-height: 1.25em;
+        margin: 0;
+        font-size: 16px;
+        color: #454b52;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .login-page {
+        width: 360px;
+        padding: 8% 0 0;
+        margin: auto;
+    }
+    .form {
+        position: relative;
+        z-index: 1;
+        background: #FFFFFF;
+        max-width: 360px;
+        margin: 0 auto 100px;
+        padding: 45px;
+        text-align: center;
+        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+    }
+    .form input {
+        font-family: inherit;
+        outline: 0;
+        background: #f2f2f2;
+        width: 100%;
+        border: 0;
+        margin: 0 0 15px;
+        padding: 15px;
+        box-sizing: border-box;
+        font-size: 14px;
+    }
+    .form button {
+        font-family: inherit;
+        text-transform: uppercase;
+        outline: 0;
+        background: hsl(217, 22%, 24%);
+        width: 100%;
+        border: 0;
+        padding: 15px;
+        color: #FFFFFF;
+        font-size: 14px;
+        -webkit-transition: all 0.3 ease;
+        transition: all 0.3 ease;
+        cursor: pointer;
+    }
+    .form button:hover,.form button:active,.form button:focus {
+        background: hsl(217, 22%, 28%);
+    }
+    .form .message {
+        margin: 15px 0 0;
+        color: #b3b3b3;
+        font-size: 12px;
+    }
+    .form .message a {
+        color: hsl(217, 22%, 24%);
+        text-decoration: none;
+    }
+
+    .container {
+        position: relative;
+        z-index: 1;
+        max-width: 300px;
+        margin: 0 auto;
+    }
+    .container:before, .container:after {
+        content: "";
+        display: block;
+        clear: both;
+    }
+    .container .info {
+        margin: 50px auto;
+        text-align: center;
+    }
+    .container .info h1 {
+        margin: 0 0 15px;
+        padding: 0;
+        font-size: 36px;
+        font-weight: 300;
+        color: #1a1a1a;
+    }
+    .container .info span {
+        color: #4d4d4d;
+        font-size: 12px;
+    }
+    .container .info span a {
+        color: #000000;
+        text-decoration: none;
+    }
+    .container .info span .fa {
+        color: #EF3B3A;
+    }
+
+</style>
+
+<div class="login-page">
+    <div class="form">
+        <form class="login-form" method="post" action="/ui/login">
+            <input type="text" name="username" placeholder="Username"/>
+            <input type="password" name="password" placeholder="Password"/>
+            <button>Login</button>
+
+            <p class="message">Username: bull, Password: board</p>
+        </form>
+    </div>
+</div>