Twitter Oauth & API Usage

Author: Reuven Chachashvili

Install and Run

Please run on node version 6.9.0+, npm version 3+

1. Clone the repository: git clone https://github.com/Reuvenc/twitter-oauth-api-usage.git.
2. Install dependencies by running npm install.
3. Paste the provided tweeter credentials into twitter-credentials.json.
4. Run npm run build - will build the client side application bundle.
5. Run npm start - at the end of the process the application will be available through http://localhost:3000/.

Implementation

In order to achieve the requirements described in the home assignment, I used the following:

• Frontend - React application, generated by create-react-app library, and Material-UI components.
• Backend - Node.js, using Express.js framework.

The application provides two main abilities:

• Sign in using twitter oAuth.
• When logged in, Fetch #ai related latest tweets (the values are predefined for the demonstration).

Frontend

The frontend application is composed of the following:

Components:

• App - Top level component.
• Header - Header at the top the page.
• TweetsList - A wrapper for a collection of received tweets.
• Tweet - Component that treats single tweet.
• Login - A minimal login component that has 'sign in with twitter' button.

Services:

• Api - A wrapper for communication against the server. fetch library is used in order to perform ajax calls in a convenient way.

For state management, redux is used. The state is composed of two main entities:

1. user - user information, whether the user is logged in or not, and user name.
2. tweets - holds the list of the fetched tweets, and an indication of whether the tweets were already fetched or not.

Backend

As mentioned, the server side is built using Express.js framework.

The application consists of the following:

1. Express application (app.js) - the main server application.
2. Configuration (config.js) - a configuration file which holds shared configuration values.
3. Routes (routes.js) - Given express application, the method in routes will attach the required routes:
   • / - Application entry point, will serve index.html template.
   • /twitter/tweets - Using Twitter api described below, returns #ai related latest tweets.
   • /login - Begins login process
   • /logout - Logs out the user
   • Static content path is also configured.
4. Twitter API wrapper (twitter.js) - A wrapper to tweeter api, which provides methods that are required across the application.
5. Authentication Middleware (middleware/authentication.js) - Provides authentication related middleware methods:
   • Verify user logged in
   • Applying user info to a request.
   • Getting request token for beginning login process in front of Twitter API.

Using twitter oAuth to sign in

**Although there are existing packages, such as passport.js, for handling authentication, for demonstration purposes I chose to implement it by myself.

The server implements twitter oauth sign in flow as described in their docs. Twitter api wrapper provides the methods required for the three steps of the authentication. The flow is as follows:

When /login endpoint is accessed:

1. AuthMiddleware.getRequestToken() middleware is triggered, resulting in request token and the corresponding secret (step 1).
2. The response is redirected to twitter sign in page, using the request token granted from the previous step (step 2)
3. After user signs in /auth/callback route is triggered by Twitter, providing user credentials (step 3)
4. User information is saved in cookies, and the server redirects the response back to the page.

When /logout is accessed, all the user information stored in httpOnly cookies is deleted, and the user considered as logged out.