Remix Auth Socials 最佳实践教程

2025-05-17 11:50:20作者：江焘钦

1. 项目介绍

Remix Auth Socials 是一个开源项目，旨在帮助开发者轻松设置多个社交登录方式。该项目基于 Remix Auth，为开发者提供了各种社交登录策略，如 Discord、Facebook、Google、X平台、Microsoft 和 LinkedIn 等。通过使用 Remix Auth Socials，开发者可以方便地为应用添加社交登录功能，提高用户体验。

2. 项目快速启动

以下是一个快速启动指南，帮助您开始使用 Remix Auth Socials：

1. 设置动态路由

首先，您需要在 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);
};

2. 设置回调路由

接下来，在 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',
  });
};

3. 添加社交按钮

在登录页面（例如 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" />
    </>
  );
}

4. 创建策略实例

在 auth.server.ts 文件中为每个社交平台创建策略实例。以下是一个示例代码：

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

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 }) => {
      // 在此处查找或创建用户
      return profile;
    }
  )
);

authenticator.use(
  new FacebookStrategy(
    {
      clientID: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
      callbackURL: getCallback(SocialsProvider.FACEBOOK),
    },
    async ({ profile }) => {
      // 在此处查找或创建用户
    }
  )
);

5. 添加注销路由

最后，在 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: '/' });
};

3. 应用案例和最佳实践

1. 保护路由

在应用中添加保护路由，确保只有登录用户才能访问特定页面。以下是一个示例代码：

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, {
    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>
  );
}

2. 自动重定向

在首页（例如 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>
  );
}