Initial commit

Author: ivanvs

.gitignore

@@ -0,0 +1,3 @@
+.idea/
+backend/node_modules
+frontend/node_modules

README.md

@@ -1 +1,30 @@
-# react-node-twitter-login
+# react-node-twitter-login
+
+Demo application that shows how implement Twitter login with React on frontend and Node.js/Express on backend that is implementing REST API.
+
+# About
+
+This application was created as material that is described in the blog post.
+For creating React app we have used [crate-react-app](https://github.com/facebookincubator/create-react-app).
+
+# What you need to install
+
+* [Node.js](https://nodejs.org/en/)
+* [crate-react-app](https://github.com/facebookincubator/create-react-app)
+* [Gulp](http://gulpjs.com/)
+* [MongoDB](https://www.mongodb.com/)
+
+# How To Start Application?
+
+* Start MongoDB - our application expects that there is `twitter-demo` database in MongoDB
+* Go to [frontend]() folder
+    * `npm install`
+    * `ng serve`
+* Go to [backend]() folder
+    * `npm install`
+    * `gulp develop`
+    
+# License
+
+react-node-twitter-login is released under [MIT License](https://opensource.org/licenses/MIT).
+

backend/gulpfile.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var gulp = require('gulp'),
+  eslint = require('gulp-eslint'),
+  nodemon = require('gulp-nodemon');
+
+
+//test the quality of the code with ESLint
+gulp.task('lint', function () {
+  return gulp.src(['**/*.js', '!node_modules/**'])
+    .pipe(eslint())
+    .pipe(eslint.formatEach())
+    .pipe(eslint.failAfterError());
+});
+
+gulp.task('develop', function () {
+  nodemon({
+    exec: 'node --inspect',
+    script: 'server.js',
+    ext: 'html js',
+    tasks: ['lint'],
+    env: {'NODE_ENV': 'development'}
+  });
+});

backend/mongoose.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var mongoose = require('mongoose'),
+  Schema = mongoose.Schema;
+
+module.exports = function () {
+
+  var db = mongoose.connect('mongodb://localhost:27017/twitter-demo');
+
+  var UserSchema = new Schema({
+    email: {
+      type: String, required: true,
+      trim: true, unique: true,
+      match: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
+    },
+    twitterProvider: {
+      type: {
+        id: String,
+        token: String
+      },
+      select: false
+    }
+  });
+
+  UserSchema.set('toJSON', {getters: true, virtuals: true});
+
+  UserSchema.statics.upsertTwitterUser = function(token, tokenSecret, profile, cb) {
+    var that = this;
+    return this.findOne({
+      'twitterProvider.id': profile.id
+    }, function(err, user) {
+      // no user was found, lets create a new one
+      if (!user) {
+        var newUser = new that({
+          email: profile.emails[0].value,
+          twitterProvider: {
+            id: profile.id,
+            token: token,
+            tokenSecret: tokenSecret
+          }
+        });
+
+        newUser.save(function(error, savedUser) {
+          if (error) {
+            console.log(error);
+          }
+          return cb(error, savedUser);
+        });
+      } else {
+        return cb(err, user);
+      }
+    });
+  };
+
+  mongoose.model('User', UserSchema);
+
+  return db;
+};

backend/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "twitter-demo",
+  "version": "0.0.1",
+  "description": "Demo application that shows how to enable Twitter login on Express/Node.js backend when creating REST API",
+  "keywords": [
+    "node.js",
+    "express.js",
+    "twitter-login"
+  ],
+  "author": "Ivan Vasiljevic",
+  "license": "MIT",
+  "devDependencies": {
+    "gulp": "~3.9.1",
+    "gulp-eslint": "^2.0.0",
+    "gulp-nodemon": "^2.2.1"
+  },
+  "dependencies": {
+    "body-parser": "^1.17.1",
+    "cors": "^2.8.1",
+    "express": "^4.15.2",
+    "express-jwt": "^5.1.0",
+    "jsonwebtoken": "^7.3.0",
+    "mongoose": "^4.9.0",
+    "passport": "^0.3.2",
+    "passport-twitter-token": "^1.3.0",
+    "request": "^2.81.0"
+  }
+}

backend/passport.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var passport = require('passport'),
+  TwitterTokenStrategy = require('passport-twitter-token'),
+  User = require('mongoose').model('User');
+
+module.exports = function () {
+
+  passport.use(new TwitterTokenStrategy({
+      consumerKey: 'KEY',
+      consumerSecret: 'SECRET',
+      includeEmail: true
+    },
+    function (token, tokenSecret, profile, done) {
+      User.upsertTwitterUser(token, tokenSecret, profile, function(err, user) {
+        return done(err, user);
+      });
+    }));
+
+};

backend/server.js

@@ -0,0 +1,162 @@
+'use strict';
+
+//mongoose file must be loaded before all other files in order to provide
+// models to other modules
+var mongoose = require('./mongoose'),
+  passport = require('passport'),
+  express = require('express'),
+  jwt = require('jsonwebtoken'),
+  expressJwt = require('express-jwt'),
+  router = express.Router(),
+  cors = require('cors'),
+  bodyParser = require('body-parser'),
+  request = require('request');
+
+mongoose();
+
+var User = require('mongoose').model('User');
+var passportConfig = require('./passport');
+
+//setup configuration for facebook login
+passportConfig();
+
+var app = express();
+
+// enable cors
+var corsOption = {
+  origin: true,
+  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
+  credentials: true,
+  exposedHeaders: ['x-auth-token']
+};
+app.use(cors(corsOption));
+
+//rest API requirements
+app.use(bodyParser.urlencoded({
+  extended: true
+}));
+app.use(bodyParser.json());
+
+router.route('/health-check').get(function(req, res) {
+  res.status(200);
+  res.send('Hello World');
+});
+
+var createToken = function(auth) {
+  return jwt.sign({
+    id: auth.id
+  }, 'my-secret',
+  {
+    expiresIn: 60 * 120
+  });
+};
+
+var generateToken = function (req, res, next) {
+  req.token = createToken(req.auth);
+  return next();
+};
+
+var sendToken = function (req, res) {
+  res.setHeader('x-auth-token', req.token);
+  return res.status(200).send(JSON.stringify(req.user));
+};
+
+router.route('/auth/twitter/reverse')
+  .post(function(req, res) {
+    request.post({
+      url: 'https://api.twitter.com/oauth/request_token',
+      oauth: {
+        oauth_callback: "http%3A%2F%2Flocalhost%3A3000%2Ftwitter-callback",
+        consumer_key: 'KEY',
+        consumer_secret: 'SECRET'
+      }
+    }, function (err, r, body) {
+      if (err) {
+        return res.send(500, { message: e.message });
+      }
+
+
+      var jsonStr = '{ "' + body.replace(/&/g, '", "').replace(/=/g, '": "') + '"}';
+      res.send(JSON.parse(jsonStr));
+    });
+  });
+
+router.route('/auth/twitter')
+  .post((req, res, next) => {
+    request.post({
+      url: `https://api.twitter.com/oauth/access_token?oauth_verifier`,
+      oauth: {
+        consumer_key: 'KEY',
+        consumer_secret: 'SECRET',
+        token: req.query.oauth_token
+      },
+      form: { oauth_verifier: req.query.oauth_verifier }
+    }, function (err, r, body) {
+      if (err) {
+        return res.send(500, { message: e.message });
+      }
+
+      console.log(body);
+      const bodyString = '{ "' + body.replace(/&/g, '", "').replace(/=/g, '": "') + '"}';
+      const parsedBody = JSON.parse(bodyString);
+
+      req.body['oauth_token'] = parsedBody.oauth_token;
+      req.body['oauth_token_secret'] = parsedBody.oauth_token_secret;
+      req.body['user_id'] = parsedBody.user_id;
+
+      next();
+    });
+  }, passport.authenticate('twitter-token', {session: false}), function(req, res, next) {
+      if (!req.user) {
+        return res.send(401, 'User Not Authenticated');
+      }
+
+      // prepare token for API
+      req.auth = {
+        id: req.user.id
+      };
+
+      return next();
+    }, generateToken, sendToken);
+
+//token handling middleware
+var authenticate = expressJwt({
+  secret: 'my-secret',
+  requestProperty: 'auth',
+  getToken: function(req) {
+    if (req.headers['x-auth-token']) {
+      return req.headers['x-auth-token'];
+    }
+    return null;
+  }
+});
+
+var getCurrentUser = function(req, res, next) {
+  User.findById(req.auth.id, function(err, user) {
+    if (err) {
+      next(err);
+    } else {
+      req.user = user;
+      next();
+    }
+  });
+};
+
+var getOne = function (req, res) {
+  var user = req.user.toObject();
+
+  delete user['twitterProvider'];
+  delete user['__v'];
+
+  res.json(user);
+};
+
+router.route('/auth/me')
+  .get(authenticate, getCurrentUser, getOne);
+
+app.use('/api/v1', router);
+
+app.listen(4000);
+module.exports = app;
+
+console.log('Server running at http://localhost:4000/');

docker/docker-compose.yml

@@ -0,0 +1,7 @@
+version: '2'
+services:
+ twitter-demo-db:
+  image: mongo:3.4.2
+  ports:
+    - "27017:27017"
+

frontend/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*