{"id":16678,"library":"remix-auth-socials","title":"Remix Auth Socials","description":"Remix Auth Socials is a utility package designed to simplify the integration of multiple OAuth2 social login strategies with `remix-auth`. Instead of managing various social provider strategies internally, it collates and re-exports existing community-developed `remix-auth-*-strategy` packages, providing a unified `SocialsProvider` enum for easier dynamic routing and button rendering. The current stable version is 3.0.0, though the README marks it as 'broken / beta / use at your own risk' due to ongoing updates for Remix Router v7 compatibility and dropping support for some previously included strategies. The release cadence is irregular, largely driven by updates to the underlying community packages it aggregates. Its key differentiator is providing a single point of reference and a consistent enum for managing a suite of social authentication options within a Remix application, aiming to reduce `package.json` bloat from individual strategy installations while centralizing the usage pattern.","status":"maintenance","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/TheRealFlyingCoder/remix-auth-socials","tags":["javascript","remix","remix-auth","auth","authentication","strategy","oauth","socials"],"install":[{"cmd":"npm install remix-auth-socials","lang":"bash","label":"npm"},{"cmd":"yarn add remix-auth-socials","lang":"bash","label":"yarn"},{"cmd":"pnpm add remix-auth-socials","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core authentication library that this package extends with social strategies.","package":"remix-auth","optional":false},{"reason":"Specific social authentication strategy; currently unavailable in v3.","package":"remix-auth-discord","optional":true},{"reason":"Specific social authentication strategy.","package":"remix-auth-facebook","optional":true},{"reason":"Specific social authentication strategy.","package":"remix-auth-github","optional":true},{"reason":"Specific social authentication strategy.","package":"remix-auth-google","optional":true},{"reason":"Specific social authentication strategy.","package":"remix-auth-microsoft","optional":true},{"reason":"Specific social authentication strategy; currently unavailable in v3 (OAuth1 & 2 updates in v2.1.0, but dropped in v3).","package":"remix-auth-twitter","optional":true},{"reason":"Specific social authentication strategy; currently unavailable in v3.","package":"remix-auth-linkedin","optional":true}],"imports":[{"note":"This package is designed for ESM environments, typical in Remix projects. 'SocialsProvider' is an enum used to identify social login types.","wrong":"const SocialsProvider = require('remix-auth-socials').SocialsProvider;","symbol":"SocialsProvider","correct":"import { SocialsProvider } from 'remix-auth-socials';"}],"quickstart":{"code":"import { Authenticator } from 'remix-auth';\nimport { createCookieSessionStorage } from '@remix-run/node';\nimport { GoogleStrategy } from 'remix-auth-google'; // Install via 'npm install remix-auth-google'\nimport { Form } from '@remix-run/react';\nimport { SocialsProvider } from 'remix-auth-socials';\nimport type { ActionArgs, LoaderArgs } from '@remix-run/node';\n\n// app/server/auth.server.ts\nconst 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\nexport const authenticator = new Authenticator<string>(sessionStorage);\n\n// Add Google Strategy (example: ensure remix-auth-google is installed)\nauthenticator.use(\n  new GoogleStrategy(\n    {\n      clientID: process.env.GOOGLE_CLIENT_ID ?? '',\n      clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? '',\n      callbackURL: 'http://localhost:3000/auth/google/callback',\n    },\n    async ({ profile }) => {\n      // Here you can return the user info from your database or create a new user\n      return profile.emails[0].value;\n    }\n  ),\n  SocialsProvider.GOOGLE // Use the enum for consistency\n);\n\n// app/routes/auth/$provider.tsx\nexport let loader = () => new Response('Login via social provider', { status: 404 });\n\nexport let action = ({ request, params }: ActionArgs) => {\n  if (!params.provider) throw new Response('Provider missing', { status: 400 });\n  return authenticator.authenticate(params.provider, request);\n};\n\n// app/routes/auth/$provider.callback.tsx\nexport let callbackLoader = ({ request, params }: LoaderArgs) => {\n  if (!params.provider) throw new Response('Provider missing', { status: 400 });\n  return authenticator.authenticate(params.provider, request, {\n    successRedirect: '/dashboard',\n    failureRedirect: '/login',\n  });\n};\n\n// app/routes/login.tsx\ninterface SocialButtonProps {\n  provider: SocialsProvider;\n  label: string;\n}\n\nconst SocialButton: React.FC<SocialButtonProps> = ({ provider, label }) => (\n  <Form action={`/auth/${provider}`} method=\"post\">\n    <button type=\"submit\">{label}</button>\n  </Form>\n);\n\nexport default function Login() {\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>\n      <h1>Login</h1>\n      <SocialButton\n        provider={SocialsProvider.GOOGLE}\n        label=\"Login with Google\"\n      />\n      {/* Add other available social buttons here, e.g., GitHub, Facebook */}\n      <Form action=\"/logout\" method=\"post\">\n        <button type=\"submit\">Logout</button>\n      </Form>\n    </div>\n  );\n}\n\n// app/routes/logout.tsx\nexport let logoutAction = async ({ request }: ActionArgs) => {\n  return authenticator.logout(request, { redirectTo: '/login' });\n};","lang":"typescript","description":"This quickstart demonstrates setting up `remix-auth` with a `GoogleStrategy` using `remix-auth-socials`' `SocialsProvider` enum for consistent dynamic routing. It includes an `authenticator` instance, dynamic auth routes (`$provider.tsx`, `$provider.callback.tsx`), a login page with a social button, and a logout action."},"warnings":[{"fix":"Review the 'Currently Unavailable in V3' list in the README. For dropped strategies, consider implementing them directly with `remix-auth` using their respective individual packages (if updated for RR7) or explore other authentication methods. For included strategies, ensure they are compatible with your Remix Router version.","message":"Version 3.0.0 of `remix-auth-socials` introduces significant breaking changes by dropping several social authentication strategies (Discord, LinkedIn, X/Twitter) that are incompatible with Remix Router v7. If you relied on these providers, you must either downgrade or find alternative implementations.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Exercise caution when deploying V3 to production. Thoroughly test all integrated social strategies, especially Google and Facebook. Monitor the GitHub repository for updates and bug fixes, or consider contributing to stability efforts if critical for your application.","message":"The package owner states that V3 is 'considered broken / beta / use at your own risk' and that 'Facebook and Google are untested as of yet'. This indicates potential instability and lack of full verification for critical features.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Be prepared to manage or contribute to the package yourself for critical issues or to keep up with ecosystem changes. For long-term projects requiring highly stable and actively maintained social authentication, consider integrating individual `remix-auth-*-strategy` packages directly or building custom strategies.","message":"Maintenance of `remix-auth-socials` is described as infrequent ('I dont maintain this super often'). This may lead to slower bug fixes, delayed updates for new Remix versions, or lack of support for new social provider features.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure that for every social provider you intend to use, you have explicitly installed its corresponding `remix-auth-*-strategy` package (e.g., `npm install remix-auth-google`) in addition to `remix-auth-socials` itself. Refer to the 'The Collection' section of the `remix-auth-socials` README for links to the individual strategy packages.","message":"`remix-auth-socials` primarily acts as a collator and provides the `SocialsProvider` enum. The actual social authentication strategies (e.g., `GoogleStrategy`) are sourced from independent community packages. You must install these individual `remix-auth-*-strategy` packages separately.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure that every `SocialsProvider` enum value used in your frontend buttons has a corresponding `authenticator.use()` call in your `auth.server.ts` (or equivalent file), properly instantiating the relevant `remix-auth-*-strategy` package.","cause":"You are attempting to authenticate with a social provider using `params.provider` (e.g., `SocialsProvider.DISCORD`) that has not been added to your `Authenticator` instance via `authenticator.use(new DiscordStrategy(...), SocialsProvider.DISCORD);` in `auth.server.ts`.","error":"Error: Strategy 'YOUR_PROVIDER_NAME' is not defined. Did you forget to add it to the authenticator?"},{"fix":"Install the required individual strategy package for each social provider you intend to use. For example, for Google, run `npm install remix-auth-google`. Remember that `remix-auth-socials` itself does not bundle these strategies.","cause":"You are trying to import a specific social strategy (e.g., `GoogleStrategy`) in your `auth.server.ts` without having installed its dedicated package.","error":"Error: Cannot find module 'remix-auth-google' or its corresponding type declarations."},{"fix":"Access enum members directly, e.g., `SocialsProvider.GOOGLE` or `SocialsProvider.GITHUB`. Ensure you are not trying to instantiate it or call it like `SocialsProvider()`.","cause":"This error typically occurs when trying to use `SocialsProvider` as if it were a function or class constructor. `SocialsProvider` is an enum (an object with string values), not a callable entity.","error":"TypeError: (0 , remix_auth_socials__WEBPACK_IMPORTED_MODULE_1__.SocialsProvider) is not a function"}],"ecosystem":"npm"}