remix-auth-facebook

import { Authenticator } from 'remix-auth'; import { FacebookStrategy } from 'remix-auth-facebook'; import { createCookieSessionStorage } from '@remix-run/node'; // 1. Create a session storage (e.g., cookie based) // Ensure SESSION_SECRET is set in your .env export const sessionStorage = createCookieSessionStorage({ cookie: { name: '__session', httpOnly: true, path: '/', sameSite: 'lax', secrets: [process.env.SESSION_SECRET ?? 's3cr3t'], secure: process.env.NODE_ENV === 'production', }, }); // 2. Create an Authenticator instance // Replace `User` with your actual user type export type User = { id: string; name: string; email: string; }; export const authenticator = new Authenticator<User>(sessionStorage); // 3. Configure the Facebook Strategy // Ensure FACEBOOK_CLIENT_ID, FACEBOOK_CLIENT_SECRET, and FACEBOOK_CALLBACK_URL are set in your .env authenticator.use( new FacebookStrategy( { clientID: process.env.FACEBOOK_CLIENT_ID ?? '', clientSecret: process.env.FACEBOOK_CLIENT_SECRET ?? '', callbackURL: process.env.FACEBOOK_CALLBACK_URL ?? 'http://localhost:3000/auth/facebook/callback', }, async ({ profile }) => { // This is where you find or create the user in your database // using the profile data provided by Facebook. // For demonstration, we'll just return a mock user. return { id: profile.id, name: profile.displayName, email: profile.emails?.[0]?.value || `${profile.id}@example.com`, }; } ), 'facebook' // Name of the strategy ); // Example routes (in app/routes/auth/facebook.tsx and app/routes/auth/facebook/callback.tsx) // app/routes/auth/facebook.tsx (for initiating login) // export async function loader({ request }: LoaderFunction) { // return authenticator.authenticate('facebook', request); // } // app/routes/auth/facebook/callback.tsx (for handling the callback) // export async function loader({ request }: LoaderFunction) { // return authenticator.authenticate('facebook', request, { // successRedirect: '/dashboard', // failureRedirect: '/login', // }); // }