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
authenticatoris 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>
![[documentation]](https://avatars.githubusercontent.com/u/10146622?v=4)
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
2 Dec 24, 2022
10 Oct 14, 2022
40 Jan 2, 2023
80 Jan 5, 2023
187 Jan 6, 2023
3 May 7, 2022
4 May 28, 2022
12 Dec 13, 2022
61 Dec 22, 2022
167 Dec 9, 2022
8 Dec 8, 2022
11 Jun 26, 2022
13 Jan 3, 2023
2.9k Jan 8, 2023
1 Jan 20, 2022