{"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.","language":"javascript","status":"maintenance","last_verified":"Wed Apr 22","install":{"commands":["npm install remix-auth-socials"],"cli":null},"imports":["import { SocialsProvider } from 'remix-auth-socials';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}