Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 29 days 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 (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-15T01:38:52.000Z (5 months ago)
- Last Synced: 2024-11-13T08:08:34.809Z (about 1 month ago)
- Language: TypeScript
- Size: 359 KB
- Stars: 122
- Watchers: 2
- Forks: 11
- Open Issues: 0
-
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
> 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 (
);
}
```