{"id":16674,"library":"remix-auth-facebook","title":"Remix Auth Facebook Strategy","description":"remix-auth-facebook provides a robust authentication strategy for integrating Facebook Login into Remix applications, built upon the `remix-auth` library. It enables developers to easily authenticate users using Facebook's OAuth 2.0 flow, handling token exchange and user profile retrieval. The current stable version is 1.0.1, indicating recent maintenance. The package follows a stable release cadence, with updates primarily focusing on minor fixes and improvements, as seen in the recent 1.0.1 release. Its key differentiator is its seamless integration with the Remix Auth ecosystem, offering a standardized approach for various authentication providers within Remix projects, supporting both Node.js and Cloudflare runtimes. It simplifies the setup required for external OAuth providers by abstracting the complex interactions with the Facebook API.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/manosim/remix-auth-facebook","tags":["javascript","remix","remix-auth","auth","authentication","strategy","typescript"],"install":[{"cmd":"npm install remix-auth-facebook","lang":"bash","label":"npm"},{"cmd":"yarn add remix-auth-facebook","lang":"bash","label":"yarn"},{"cmd":"pnpm add remix-auth-facebook","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Remix server environment utilities and types.","package":"@remix-run/server-runtime","optional":false},{"reason":"This package is a strategy for the core remix-auth library, which provides the Authenticator and session management.","package":"remix-auth","optional":false}],"imports":[{"note":"Remix projects are primarily ESM. CommonJS 'require' syntax is not officially supported and may lead to module resolution issues.","wrong":"const FacebookStrategy = require('remix-auth-facebook');","symbol":"FacebookStrategy","correct":"import { FacebookStrategy } from 'remix-auth-facebook';"},{"note":"Authenticator is a named export from the parent `remix-auth` library, not a default export.","wrong":"import Authenticator from 'remix-auth';","symbol":"Authenticator","correct":"import { Authenticator } from 'remix-auth';"},{"note":"The `Profile` type, representing the authenticated user's profile data, is exported from `remix-auth` and is useful for typing the `verify` callback function.","symbol":"Profile","correct":"import type { Profile } from 'remix-auth';"}],"quickstart":{"code":"import { Authenticator } from 'remix-auth';\nimport { FacebookStrategy } from 'remix-auth-facebook';\nimport { createCookieSessionStorage } from '@remix-run/node';\n\n// 1. Create a session storage (e.g., cookie based)\n//    Ensure SESSION_SECRET is set in your .env\nexport const sessionStorage = createCookieSessionStorage({\n  cookie: {\n    name: '__session',\n    httpOnly: true,\n    path: '/',\n    sameSite: 'lax',\n    secrets: [process.env.SESSION_SECRET ?? 's3cr3t'],\n    secure: process.env.NODE_ENV === 'production',\n  },\n});\n\n// 2. Create an Authenticator instance\n//    Replace `User` with your actual user type\nexport type User = { id: string; name: string; email: string; };\nexport const authenticator = new Authenticator<User>(sessionStorage);\n\n// 3. Configure the Facebook Strategy\n//    Ensure FACEBOOK_CLIENT_ID, FACEBOOK_CLIENT_SECRET, and FACEBOOK_CALLBACK_URL are set in your .env\nauthenticator.use(\n  new FacebookStrategy(\n    {\n      clientID: process.env.FACEBOOK_CLIENT_ID ?? '',\n      clientSecret: process.env.FACEBOOK_CLIENT_SECRET ?? '',\n      callbackURL: process.env.FACEBOOK_CALLBACK_URL ?? 'http://localhost:3000/auth/facebook/callback',\n    },\n    async ({ profile }) => {\n      // This is where you find or create the user in your database\n      // using the profile data provided by Facebook.\n      // For demonstration, we'll just return a mock user.\n      return {\n        id: profile.id,\n        name: profile.displayName,\n        email: profile.emails?.[0]?.value || `${profile.id}@example.com`,\n      };\n    }\n  ),\n  'facebook' // Name of the strategy\n);\n\n// Example routes (in app/routes/auth/facebook.tsx and app/routes/auth/facebook/callback.tsx)\n// app/routes/auth/facebook.tsx (for initiating login)\n// export async function loader({ request }: LoaderFunction) {\n//   return authenticator.authenticate('facebook', request);\n// }\n\n// app/routes/auth/facebook/callback.tsx (for handling the callback)\n// export async function loader({ request }: LoaderFunction) {\n//   return authenticator.authenticate('facebook', request, {\n//     successRedirect: '/dashboard',\n//     failureRedirect: '/login',\n//   });\n// }\n","lang":"typescript","description":"This quickstart demonstrates how to initialize `remix-auth` with `FacebookStrategy`, define a user type, and configure the session storage using environment variables."},"warnings":[{"fix":"Verify that the `callbackURL` passed to `FacebookStrategy` is identical to an entry in your Facebook App's 'Basic Settings' -> 'Products' -> 'Facebook Login' -> 'Settings' -> 'Valid OAuth Redirect URIs'. Include protocol (http/https), hostname, port, and path.","message":"The `callbackURL` configured in the FacebookStrategy must exactly match one of the 'Valid OAuth Redirect URIs' configured in your Facebook App settings. A mismatch will cause Facebook to reject the authentication attempt.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use environment variables (e.g., `.env` file, server configuration) for all secrets. Access them via `process.env.VAR_NAME` and provide fallback values or strict validation.","message":"All sensitive credentials (like `FACEBOOK_CLIENT_ID`, `FACEBOOK_CLIENT_SECRET`, and `SESSION_SECRET`) must be stored as environment variables and never hardcoded in your application.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `auth.server.ts` or similar server-only files containing `Authenticator` and strategy configurations are only imported in Remix `loader` or `action` functions, or other server-side contexts (`.server.ts` files).","message":"Remix Auth strategies, including `FacebookStrategy`, typically run on the server. Do not attempt to import or use these strategies in client-side code, as it can expose secrets or lead to runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review your `verify` callback function and any custom types extending `FacebookStrategy` or related `remix-auth` interfaces when upgrading to v1.0.0 or later to ensure compatibility with updated typings. Test thoroughly.","message":"The v1.0.0 release introduced 'better typing and extensibility'. While no explicit breaking changes for typical usage were documented, custom implementations or reliance on internal types might require adjustments.","severity":"breaking","affected_versions":"=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `FACEBOOK_CLIENT_ID`, `FACEBOOK_CLIENT_SECRET`, and `FACEBOOK_CALLBACK_URL` environment variables are correctly set and accessible to your Remix application when initializing `FacebookStrategy`.","cause":"One or more required configuration options (clientID, clientSecret, callbackURL) for the FacebookStrategy were not provided during its instantiation.","error":"Error: FacebookStrategy requires a clientID, clientSecret and callbackURL."},{"fix":"Add an asynchronous `verify` function as the second argument to `new FacebookStrategy(...)`. This function receives the `profile` and other data from Facebook and is responsible for finding or creating a user in your database and returning a user object for the session.","cause":"The `FacebookStrategy` (which extends `OAuth2Strategy`) was instantiated without providing a `verify` callback function as its second argument.","error":"Error: OAuth2Strategy requires a `verify` function."},{"fix":"Ensure your `FACEBOOK_CALLBACK_URL` environment variable, or the `callbackURL` string directly, is a fully qualified URL including the protocol (e.g., `https://yourdomain.com/auth/facebook/callback`).","cause":"The `callbackURL` provided to `FacebookStrategy` is not a complete, absolute URL (e.g., missing 'https://' or the full domain).","error":"The redirect_uri URL must be an absolute URL"}],"ecosystem":"npm"}