GitHubStrategy

GitHub 策略用于针对 GitHub 账户对用户进行身份验证。它扩展了 OAuth2Strategy。

支持的运行时环境

运行时环境	是否支持
Node.js	✅
Cloudflare	✅

使用

创建 OAuth 应用

按照 GitHub 文档中的步骤创建一个新的应用，并获取客户端 ID 和密钥。

创建策略实例

import { GitHubStrategy } from "remix-auth-github";

let gitHubStrategy = new GitHubStrategy(
  {
    clientId: "YOUR_CLIENT_ID",
    clientSecret: "YOUR_CLIENT_SECRET",
    redirectURI: "https://example.com/auth/github/callback",
  },
  async ({ profile, tokens, request, context }) => {
    // Get the user data from your DB or API using the tokens and profile
    return User.findOrCreate({ email: profile.emails[0].value });
  }
);

authenticator.use(gitHubStrategy);

设置路由

// app/routes/login.tsx
export default function Login() {
  return (
    <Form action="/auth/github" method="post">
      <button>Login with GitHub</button>
    </Form>
  );
}

// app/routes/auth/github.tsx
import type { ActionFunctionArgs } from "@remix-run/node";
import { redirect } from "@remix-run/node";
import { authenticator } from "~/auth.server";

export async function loader() {
  return redirect("/login");
}

export async function action({ request }: ActionFunctionArgs) {
  return authenticator.authenticate("github", request);
};

// app/routes/auth/github/callback.tsx
import type { LoaderFunctionArgs } from "@remix-run/node";
import { authenticator } from "~/auth.server";

export async function loader({ request }: LoaderFunctionArgs) {
  return authenticator.authenticate("github", request, {
    successRedirect: "/dashboard",
    failureRedirect: "/login",
  });
};