Remix Auth Socials

3.0.0 · maintenance · verified Wed Apr 22

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.

Common errors

Warnings

Install

Imports

Quickstart

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.

import { Authenticator } from 'remix-auth';
import { createCookieSessionStorage } from '@remix-run/node';
import { GoogleStrategy } from 'remix-auth-google'; // Install via 'npm install remix-auth-google'
import { Form } from '@remix-run/react';
import { SocialsProvider } from 'remix-auth-socials';
import type { ActionArgs, LoaderArgs } from '@remix-run/node';

// app/server/auth.server.ts
const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: '__session',
    httpOnly: true,
    path: '/',
    sameSite: 'lax',
    secrets: [process.env.SESSION_SECRET ?? 's3cr3t'],
    secure: process.env.NODE_ENV === 'production',
  },
});

export const authenticator = new Authenticator<string>(sessionStorage);

// Add Google Strategy (example: ensure remix-auth-google is installed)
authenticator.use(
  new GoogleStrategy(
    {
      clientID: process.env.GOOGLE_CLIENT_ID ?? '',
      clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? '',
      callbackURL: 'http://localhost:3000/auth/google/callback',
    },
    async ({ profile }) => {
      // Here you can return the user info from your database or create a new user
      return profile.emails[0].value;
    }
  ),
  SocialsProvider.GOOGLE // Use the enum for consistency
);

// app/routes/auth/$provider.tsx
export let loader = () => new Response('Login via social provider', { status: 404 });

export let action = ({ request, params }: ActionArgs) => {
  if (!params.provider) throw new Response('Provider missing', { status: 400 });
  return authenticator.authenticate(params.provider, request);
};

// app/routes/auth/$provider.callback.tsx
export let callbackLoader = ({ request, params }: LoaderArgs) => {
  if (!params.provider) throw new Response('Provider missing', { status: 400 });
  return authenticator.authenticate(params.provider, request, {
    successRedirect: '/dashboard',
    failureRedirect: '/login',
  });
};

// app/routes/login.tsx
interface SocialButtonProps {
  provider: SocialsProvider;
  label: string;
}

const SocialButton: React.FC<SocialButtonProps> = ({ provider, label }) => (
  <Form action={`/auth/${provider}`} method="post">
    <button type="submit">{label}</button>
  </Form>
);

export default function Login() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>
      <h1>Login</h1>
      <SocialButton
        provider={SocialsProvider.GOOGLE}
        label="Login with Google"
      />
      {/* Add other available social buttons here, e.g., GitHub, Facebook */}
      <Form action="/logout" method="post">
        <button type="submit">Logout</button>
      </Form>
    </div>
  );
}

// app/routes/logout.tsx
export let logoutAction = async ({ request }: ActionArgs) => {
  return authenticator.logout(request, { redirectTo: '/login' });
};

view raw JSON →