DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Kauress
Kauress

Posted on

2 Minute Self Signed SSL Certificate for localhost

This weekend I was tasked with building a login system using passport.js's facebook strategy. Sure it was going to be easy...

Issue was that Facebook dev now enforces 'HTTPS' so you need a self signed SSL certificate for localhost:3000 or whatever port you're using.

Pretty easy.... (till you're in production mode and you realize why your pet has a happier life than you)πŸ˜‚πŸΆπŸ˜ΉβŒ¨οΈ

In Express v.4 The bin directory serves is where you define your startup scripts. The 'www' file contains code to start your express app as a web server. So 'app' is passed as a handler to your web server. If using express generator with "$ npm install express-generator -g" a template with the bin directory and 'www' file is created for you.

In your terminal:

//Note: you will be presented with lots of options. Be sure to fill the Common Name option as localhost

 $ openssl req -nodes -new -x509 -keyout server.key -out server.cert

//convert cert and key to PEM Files

 $ openssl x509 -in server.cert -out cert.pem -outform PEM
 $cat server.cert server.key > key.pem

Enter fullscreen mode Exit fullscreen mode

copy both cert.pem and key.pem in project directory. And then in 'www' within your bin directory, you will need to reference your certificate

/**
 * Module dependencies.
 */

const app = require('../app');
const debug = require('debug')('node-passport-social:server');
const http = require('https');
const fs = require("fs");

/**
 * Get port from environment and store in Express.
 */

const port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTPS server.
 */

const privateKey = fs.readFileSync('./key.pem');
const certificate = fs.readFileSync('./cert.pem');

const server = http.createServer({
  key: privateKey,
  cert: certificate
}, app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

 const bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  const addr = server.address();
 const bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

Enter fullscreen mode Exit fullscreen mode

And then in your browser open https:localhost:3000

Top comments (2)

Collapse
 
weirdmayo profile image
Daniel Mayovsky

Please add javascript code highlighting to the code above.
with

   ` ` `javascript
   ` ` `
Collapse
 
a777med profile image
a777med

I love you

🌚 Life is too short to browse without dark mode