Package Exports

remix-auth-twitter
remix-auth-twitter/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (remix-auth-twitter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Remix Auth Twitter

Remix Auth plugin for Twitter OAuth 1.0a.

Supported runtimes

Runtime	Has Support
Node.js	✅
Cloudflare	✅

Demo

Try out ~~live demo~~ Currently it doesn't work due to updates on Twitter APIs. You could try cloning the 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",
      alwaysReauthorize: false // otherwise, ask for permission every time
    },
    // Define what to do when the user is authenticated
    async ({ accessToken, accessTokenSecret, profile }) => {
      // profile contains userId and screenName

      // 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>