Remix Auth Twitter

Remix Auth plugin for Twitter OAuth 1.0a.

Supported runtimes

Runtime	Has Support
Node.js	✅
Cloudflare	✅

Demo

Try out live demo (source code)

Installation

Install remix-auth-twitter npm module along with remix-auth:

npm install remix-auth-twitter remix-auth

How to use

Prerequisites

Your app is registered to Twitter and has consumer key and secret issued https://developer.twitter.com/en/docs/authentication/oauth-1-0a/api-key-and-secret

Your app has remix-auth set up and authenticator is provided:

// app/services/auth.server.ts
export let authenticator = ...;

Tell the Authenticator to use the Twitter strategy

// app/services/auth.server.ts
import { Authenticator } from "remix-auth";
import { sessionStorage } from "~/services/session.server";
import { TwitterStrategy } from 'remix-auth-twitter';

export let authenticator = new Authenticator<User>(sessionStorage);

const clientID = process.env.TWITTER_CONSUMER_KEY;
const clientSecret = process.env.TWITTER_CONSUMER_SECRET;
if (!clientID || !clientSecret) {
  throw new Error("TWITTER_CONSUMER_KEY and TWITTER_CONSUMER_SECRET must be provided");
}

authenticator.use(
  new TwitterStrategy(
    {
      clientID,
      clientSecret,
      callbackURL: "https://my-app/login/callback",
      // In order to get user's email address, you need to configure your app permission.
      // See https://developer.twitter.com/en/docs/twitter-api/v1/accounts-and-users/manage-account-settings/api-reference/get-account-verify_credentials.
      includeEmail: true // Optional parameter. Default: false.
    },
    // Define what to do when the user is authenticated
    async ({ accessToken, accessTokenSecret, profile }) => {
      // profile contains all the info from `account/verify_credentials`
      // https://developer.twitter.com/en/docs/twitter-api/v1/accounts-and-users/manage-account-settings/api-reference/get-account-verify_credentials

      // Return a user object to store in sessionStorage.
      // You can also throw Error to reject the login
      return await registerUser(
        accessToken,
        accessTokenSecret,
        profile
      );
    }
  ),
  // each strategy has a name and can be changed to use another one
  // same strategy multiple times, especially useful for the OAuth2 strategy.
  "twitter"
);

Set up login/logout flow

Follow the remix-auth docs to set up logout flow and isAuthenticated.

The log in flow would look like this:

User comes to "login" page (e.g. /login).
The app will redirect user to Twitter's auth page.
Once user finishes auth, Twitter will redirect user back to your app (e.g. /login/callback).
The app will verify the user and let the user login.

To set up the login flow, follow the code below:

// app/routes/login.tsx
import {ActionFunction} from "remix";
import {authenticator} from "~/services/auth.server";

// Normally this will redirect user to twitter auth page
export let action: ActionFunction = async ({request}) => {
  await authenticator.authenticate("twitter", request, {
    successRedirect: "/dashboard", // Destination in case the user is already logged in
  });
};

// app/routes/login.callback.tsx
import {LoaderFunction} from "remix";
import {authenticator} from "~/services/auth.server";

// This will be called after twitter auth page 
export let loader: LoaderFunction = async ({request}) => {
  await authenticator.authenticate("twitter", request, {
    successRedirect: "/dashboard",
    failureRedirect: "/login/failure"
  });
};

Then let the user do POST /login:

<Form method="post" action="/login">
  <button>Login</button>
</Form>

TheRealFlyingCoder/remix-auth-twitter

README