{"library":"remix-auth-github","title":"GitHub Authentication Strategy for Remix Auth","description":"remix-auth-github is a strategy for `remix-auth` that facilitates implementing login with GitHub in Remix applications. The current stable version is 3.0.2, and the package sees active maintenance with recent updates focused on bug fixes and dependency management. Key differentiators include its tight integration with the `remix-auth` ecosystem, providing a streamlined OAuth2 flow for GitHub. Since version 3.0.0, it relies on `arctic.js` for OAuth2 client functionality and has shifted its responsibility to primarily provide access tokens, requiring developers to explicitly fetch user profile data from GitHub's API if needed. It supports both Node.js and Cloudflare runtimes, making it versatile for various Remix deployment targets. This strategy focuses on providing the necessary tokens, allowing developers full control over how user data is retrieved and managed post-authentication.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install remix-auth-github"],"cli":null},"imports":["import { GitHubStrategy } from 'remix-auth-github';","import { Authenticator } from 'remix-auth';","import type { GitHubProfile } from 'remix-auth-github';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { Authenticator } from 'remix-auth';\nimport { GitHubStrategy } from 'remix-auth-github';\nimport { createCookieSessionStorage } from '@remix-run/node'; // or '@remix-run/cloudflare/sessions'\nimport type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node'; // or '@remix-run/cloudflare'\n\n// 1. Define your User type (to be stored in session)\ninterface User {\n  id: string;\n  name: string;\n  accessToken: string;\n  refreshToken: string | null;\n  // Potentially other GitHub profile data\n}\n\n// 2. Setup session storage\nconst sessionStorage = createCookieSessionStorage({\n  cookie: {\n    name: \"_session\",\n    sameSite: \"lax\",\n    path: \"/\",\n    httpOnly: true,\n    secrets: [process.env.SESSION_SECRET ?? 's3cr3t-dev-key'], // IMPORTANT: Use a strong secret in production\n    secure: process.env.NODE_ENV === \"production\",\n  },\n});\n\n// 3. Setup Authenticator instance\nexport const authenticator = new Authenticator<User>(sessionStorage);\n\n// 4. Configure GitHub Strategy\nconst GITHUB_CLIENT_ID = process.env.GITHUB_CLIENT_ID ?? '';\nconst GITHUB_CLIENT_SECRET = process.env.GITHUB_CLIENT_SECRET ?? '';\nconst GITHUB_REDIRECT_URI = process.env.GITHUB_REDIRECT_URI ?? 'http://localhost:3000/auth/github/callback'; // Must match your GitHub App's callback URL\n\nauthenticator.use(\n  new GitHubStrategy(\n    {\n      clientId: GITHUB_CLIENT_ID,\n      clientSecret: GITHUB_CLIENT_SECRET,\n      redirectURI: GITHUB_REDIRECT_URI,\n      scopes: [\"user:email\", \"read:user\"], // Optional scopes\n    },\n    async ({ tokens, request }) => {\n      // In this function, you receive the OAuth tokens.\n      // Since v3.0.0, you must manually fetch user profile data if needed.\n      console.log('Received GitHub Tokens:', tokens);\n\n      const githubProfileResponse = await fetch('https://api.github.com/user', {\n        headers: {\n          Authorization: `token ${tokens.accessToken()}`,\n        },\n      });\n      const githubProfile = await githubProfileResponse.json();\n      console.log('GitHub Profile:', githubProfile);\n\n      // This is where you would lookup/create a user in your database\n      // based on the GitHub profile ID or email, and return your internal 'User' object.\n      return {\n        id: githubProfile.id.toString(),\n        name: githubProfile.name || githubProfile.login,\n        accessToken: tokens.accessToken(),\n        refreshToken: tokens.hasRefreshToken() ? tokens.refreshToken() : null,\n      };\n    }\n  ),\n  \"github\" // This is the strategy name used in `authenticator.authenticate`\n);\n\n// 5. Example Route: Initiate GitHub Login (e.g., app/routes/auth.github.tsx action)\n/*\nexport async function action({ request }: ActionFunctionArgs) {\n  await authenticator.authenticate(\"github\", request, {\n    successRedirect: \"/dashboard\",\n    failureRedirect: \"/login\",\n  });\n}\n*/\n\n// 6. Example Route: Handle GitHub Callback (e.g., app/routes/auth.github.callback.tsx loader)\n/*\nexport async function loader({ request }: LoaderFunctionArgs) {\n  const user = await authenticator.authenticate(\"github\", request, {\n    successRedirect: \"/dashboard\",\n    failureRedirect: \"/login\",\n  });\n  // User object is now in the session\n  return user; \n}\n*/","lang":"typescript","description":"This quickstart demonstrates the full setup of `remix-auth-github`. It includes creating session storage, instantiating the `Authenticator`, configuring `GitHubStrategy` with environment variables, and illustrating how to handle the `verify` callback to manually fetch user profile data from the GitHub API using the obtained tokens, as required since v3.0.0.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}