https://github.com/TheRealFlyingCoder/remix-auth-socials
A collection of social media strategies for remix-auth
https://github.com/TheRealFlyingCoder/remix-auth-socials
Last synced: about 13 hours ago
JSON representation
A collection of social media strategies for remix-auth
- Host: GitHub
- URL: https://github.com/TheRealFlyingCoder/remix-auth-socials
- Owner: TheRealFlyingCoder
- License: mit
- Created: 2021-12-22T07:08:43.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-15T01:38:52.000Z (10 months ago)
- Last Synced: 2025-05-04T23:37:57.266Z (4 days ago)
- Language: TypeScript
- Size: 359 KB
- Stars: 125
- Watchers: 2
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-Remix - remix-auth-socials - auth` (miscellaneous)
README
# 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](https://github.com/JonnyBnator/remix-auth-discord) - By [Jonny](https://github.com/JonnyBnator)
[remix-auth-facebook](https://github.com/manosim/remix-auth-facebook) - By [Manos](https://github.com/manosim)
[remix-auth-github](https://github.com/sergiodxa/remix-auth-github) - By [Sergio](https://github.com/sergiodxa)
[remix-auth-google](https://github.com/pbteja1998/remix-auth-google) - By [Bhanu](https://github.com/pbteja1998)
[remix-auth-microsoft](https://github.com/juhanakristian/remix-auth-microsoft) - By [Juhana](https://github.com/juhanakristian)
[remix-auth-twitter](https://github.com/na2hiro/remix-auth-twitter) - By [na2hiro](https://github.com/na2hiro)
[remix-auth-linkedin](https://github.com/Lzok/remix-auth-linkedin) - By [Lzok](https://github.com/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
```tsx
// 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);
};
```
```tsx
// 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
```tsx
// 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 = ({ provider, label }) => (
{label}
);
export default function Login() {
return (
<>
>
);
}
```
You will also need a logout route
```ts
// 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.
```ts
// 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 type which the strategies will return (this will be stored in the session)
// export let authenticator = new Authenticator(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
```tsx
// 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();
return (
Welcome {user.displayName}!
This is a protected page
Logout
);
}
```
You might also want your index route to redirect to the dashboard for logged in users.
```tsx
// 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 (
);
}
```