Remix Auth Socials

WARNING: V3 Drops outdated packages that dont work with RR7. So V3 is considered broken / beta / use at your own risk

I have started the process of updating some and moving them temporarily into the package to provide access to RR7. I dont maintain this super often but if you want to PR one of the others feel free.

Currently Unavailable in V3: ❌ Discord ❌ Linkedin ❌ X / Twitter

Facebook and Google are untested as of yet

A collection of Remix Auth strategies for Oauth2 Social logins.

It's rare to see only one social login button, and no one likes a big package.json so here we are 👀

Remix auth socials collates community Oauth packages in a way that allows you to set up multiple social logins with ease.

The Collection:

Please visit the repo's of each package to understand the specifics on their usage, and raise issues.

remix-auth-discord - By Jonny

remix-auth-facebook - By Manos

remix-auth-github - By Sergio

remix-auth-google - By Bhanu

remix-auth-microsoft - By Juhana

remix-auth-twitter - By na2hiro

remix-auth-linkedin - By Lzok

Supported runtimes

All strategies will support cloudflare

Runtime	Has Support
Node.js	✅
Cloudflare	✅

How to use

Setup your routes

To begin we will set up a dynamic route, that can handle each social on the fly

// app/routes/auth/$provider.tsx
import { ActionArgs, redirect } from '@remix-run/node';
import { authenticator } from '~/server/auth.server';

export let loader = () => redirect('/login');

export let action = ({ request, params }: ActionArgs) => {
	return authenticator.authenticate(params.provider, request);
};

// app/routes/auth/$provider.callback.tsx
import { LoaderArgs } from '@remix-run/node';
import { authenticator } from '~/server/auth.server';

export let loader = ({ request, params }: LoaderArgs) => {
	return authenticator.authenticate(params.provider, request, {
		successRedirect: '/dashboard',
		failureRedirect: '/login',
	});
};

Now you are free to include social buttons on the login page however you like

// app/routes/login.tsx
import { Form } from '@remix-run/react';
import { SocialsProvider } from 'remix-auth-socials';

interface SocialButtonProps {
	provider: SocialsProvider;
	label: string;
}

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

export default function Login() {
	return (
		<>
			<SocialButton
				provider={SocialsProvider.DISCORD}
				label="Login with Discord"
			/>
			<SocialButton
				provider={SocialsProvider.GITHUB}
				label="Login with Github"
			/>
			<SocialButton
				provider={SocialsProvider.GOOGLE}
				label="Login with Google"
			/>
			<SocialButton
				provider={SocialsProvider.FACEBOOK}
				label="Login with Facebook"
			/>
			<SocialButton
				provider={SocialsProvider.MICROSOFT}
				label="Login with Microsoft"
			/>
			<SocialButton
				provider={SocialsProvider.LINKEDIN}
				label="Login with LinkedIn"
			/>
		</>
	);
}

You will also need a logout route

// app/routes/logout.tsx
import { ActionArgs } from '@remix-run/node';
import { authenticator } from '~/server/auth.server';

export let action = async ({ request, params }: ActionArgs) => {
	await authenticator.logout(request, { redirectTo: '/' });
};

Create the strategy instance

For each social you want to use, you must initialise it in your auth.server.ts file.

// app/server/auth.server.ts
import { Authenticator } from 'remix-auth';
import {
	GoogleStrategy,
	FacebookStrategy,
	SocialsProvider,
} from 'remix-auth-socials';
import { sessionStorage } from '~/services/session.server';

// Create an instance of the authenticator
export let authenticator = new Authenticator(sessionStorage, {
	sessionKey: '_session',
});
// You may specify a <User> type which the strategies will return (this will be stored in the session)
// export let authenticator = new Authenticator<User>(sessionStorage, { sessionKey: '_session' });

const getCallback = (provider: SocialsProvider) => {
	return `http://localhost:3333/auth/${provider}/callback`;
};

authenticator.use(
	new GoogleStrategy(
		{
			clientID: 'YOUR_CLIENT_ID',
			clientSecret: 'YOUR_CLIENT_SECRET',
			callbackURL: getCallback(SocialsProvider.GOOGLE),
		},
		async ({ profile }) => {
			// here you would find or create a user in your database
			return profile;
		},
	),
);

authenticator.use(
	new FacebookStrategy(
		{
			clientID: 'YOUR_CLIENT_ID',
			clientSecret: 'YOUR_CLIENT_SECRET',
			callbackURL: getCallback(SocialsProvider.FACEBOOK),
		},
		async ({ profile }) => {},
	),
);

Add a protected route and an automatic success redirect

Here's an example of a protected route

// app/routes/dashboard.tsx
import { useLoaderData, Form } from '@remix-run/react';
import { LoaderArgs } from '@remix-run/node';
import { authenticator } from '~/server/auth.server';

export let loader = async ({ request, params }: LoaderArgs) => {
	const user = await authenticator.isAuthenticated(request, {
		failureRedirect: '/',
	});

	return { user };
};

export default function Dashboard() {
	const { user } = useLoaderData<typeof loader>();

	return (
		<div>
			<h1>Welcome {user.displayName}!</h1>
			<p>This is a protected page</p>
			<Form action="/logout" method="post">
				<button>Logout</button>
			</Form>
		</div>
	);
}

You might also want your index route to redirect to the dashboard for logged in users.

// app/routes/index.tsx
import { useLoaderData } from '@remix-run/react';
import { LoaderArgs } from '@remix-run/node';
import { authenticator } from '~/server/auth.server';

export let loader = async ({ request, params }: LoaderArgs) => {
	const user = await authenticator.isAuthenticated(request, {
		successRedirect: '/dashboard',
	});
	return user;
};

export default function Index() {
	return (
		<div>
			<h1>Welcome!</h1>
			<p>
				<a href="/login">Please log in</a>
			</p>
		</div>
	);
}