remix-auth-socials

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' }); };