{"library":"remix-auth","title":"Remix Auth","description":"remix-auth is a TypeScript-first, strategy-based authentication library designed for Remix and React Router applications. Inspired by Passport.js, it provides full server-side authentication capabilities built on the Web Fetch API, ensuring compatibility with modern web standards. The library is currently stable at version 4.2.0 and maintains an active release cadence, frequently introducing new features, bug fixes, and documentation improvements. Key differentiators include its robust TypeScript support, extensible strategy pattern (with separate npm packages for various authentication flows like Form, OAuth2, etc.), and seamless integration with Remix's server-side action and loader functions, allowing developers to implement custom authentication logic. It dropped direct React Router requirements in v4.0.0, simplifying its core and making it more adaptable.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install remix-auth"],"cli":null},"imports":["import { Authenticator } from 'remix-auth';","import { FormStrategy } from 'remix-auth-form';","import type { ActionArgs } from '@remix-run/node';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { Form } from '@remix-run/react';\nimport { Authenticator } from 'remix-auth';\nimport { FormStrategy } from 'remix-auth-form';\nimport { createCookieSessionStorage, redirect } from '@remix-run/node';\nimport type { ActionArgs, LoaderArgs } from '@remix-run/node';\n\n// 1. Define your User type\ninterface User { id: string; email: string; name: string; }\n\n// 2. Setup session storage\nconst sessionStorage = createCookieSessionStorage({\n  cookie: {\n    name: '__session',\n    httpOnly: true,\n    path: '/',\n    sameSite: 'lax',\n    secrets: [process.env.SESSION_SECRET ?? 's3cr3t'], // Use an environment variable for secrets\n    secure: process.env.NODE_ENV === 'production',\n  },\n});\n\n// 3. Create Authenticator instance\nexport let authenticator = new Authenticator<User>(sessionStorage);\n\n// 4. Register a strategy (e.g., FormStrategy)\nauthenticator.use(\n  new FormStrategy(async ({ form }) => {\n    let email = form.get('email') as string;\n    let password = form.get('password') as string;\n\n    // Simulate user login\n    if (email === 'test@example.com' && password === 'password') {\n      return { id: '123', email, name: 'Test User' };\n    }\n    throw new Error('Invalid credentials');\n  }),\n  'user-pass' // Name of the strategy\n);\n\n// 5. Create a Login route (app/routes/login.tsx)\nexport default function Screen() {\n  return (\n    <Form method='post'>\n      <input type='email' name='email' required placeholder='Email' />\n      <input\n        type='password'\n        name='password'\n        autoComplete='current-password'\n        required\n        placeholder='Password'\n      />\n      <button type='submit'>Sign In</button>\n    </Form>\n  );\n}\n\n// 6. Handle authentication in the action function\nexport async function action({ request }: ActionArgs) {\n  try {\n    let user = await authenticator.authenticate('user-pass', request, {\n      successRedirect: '/',\n      failureRedirect: '/login?error=true',\n    });\n    return user; // Should not reach here if redirects work\n  } catch (error) {\n    // This catch block handles redirect responses thrown by authenticate\n    // or other errors. Remix will re-throw the response.\n    throw error;\n  }\n}\n\n// 7. Example loader to check authentication\nexport async function loader({ request }: LoaderArgs) {\n  let user = await authenticator.isAuthenticated(request);\n  if (!user) {\n    throw redirect('/login');\n  }\n  return { user };\n}","lang":"typescript","description":"This quickstart demonstrates the core setup of `remix-auth` with `FormStrategy`, including session storage configuration, `Authenticator` instantiation, strategy registration, and integration into Remix `action` and `loader` functions for user login and authentication checks.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}