{"id":26462914,"url":"https://github.com/clerk/gatsby-plugin-clerk","last_synced_at":"2025-03-19T06:26:07.638Z","repository":{"id":104053636,"uuid":"384729125","full_name":"clerk/gatsby-plugin-clerk","owner":"clerk","description":"Drop-in Clerk integration for Gatsby sites","archived":false,"fork":false,"pushed_at":"2024-08-01T13:07:00.000Z","size":1068,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-01T14:37:10.785Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/gatsby-plugin-clerk","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clerk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-10T15:23:23.000Z","updated_at":"2024-08-01T14:37:16.176Z","dependencies_parsed_at":null,"dependency_job_id":"ceb825ce-d6bc-49cb-9325-07e52af9f8e1","html_url":"https://github.com/clerk/gatsby-plugin-clerk","commit_stats":null,"previous_names":["clerk/gatsby-plugin-clerk"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fgatsby-plugin-clerk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fgatsby-plugin-clerk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fgatsby-plugin-clerk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fgatsby-plugin-clerk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clerk","download_url":"https://codeload.github.com/clerk/gatsby-plugin-clerk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244367539,"owners_count":20441905,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-19T06:26:07.197Z","updated_at":"2025-03-19T06:26:07.623Z","avatar_url":"https://github.com/clerk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://clerk.com?utm_source=github\u0026utm_medium=gatsby_plugin_clerk\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://images.clerk.com/static/logo-dark-mode-400x400.png\"\u003e\n      \u003cimg src=\"https://images.clerk.com/static/logo-light-mode-400x400.png\" height=\"64\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n\u003c/p\u003e\n\n# gatsby-plugin-clerk\n\n\u003cdiv align=\"center\"\u003e\n\n[![Chat on Discord](https://img.shields.io/discord/856971667393609759.svg?logo=discord)](https://clerk.com/discord)\n[![Clerk documentation](https://img.shields.io/badge/documentation-clerk-green.svg)](https://clerk.com/docs?utm_source=github\u0026utm_medium=gatsby_plugin_clerk)\n[![Follow on Twitter](https://img.shields.io/twitter/follow/ClerkDev?style=social)](https://twitter.com/intent/follow?screen_name=ClerkDev)\n\n[Changelog](https://github.com/clerk/javascript/blob/main/packages/gatsby-plugin-clerk/CHANGELOG.md)\n·\n[Report a Bug](https://github.com/clerk/javascript/issues/new?assignees=\u0026labels=needs-triage\u0026projects=\u0026template=BUG_REPORT.yml)\n·\n[Request a Feature](https://feedback.clerk.com/roadmap)\n·\n[Ask a Question](https://github.com/clerk/javascript/discussions)\n\n\u003c/div\u003e\n\n---\n\n## Overview\n\nClerk is the easiest way to add authentication and user management to your Gatsby application. Add sign up, sign in, and profile management to your application in minutes.\n\n## Getting Started\n\n### Prerequisites\n\n- Gatsby v5+\n- Node.js `\u003e=18.17.0` or later\n\n### Installation\n\n```sh\nnpm install gatsby-plugin-clerk\n```\n\n## Usage\n\nMake sure the following environment variables are set in a `.env` file:\n\n```sh\nGATSBY_CLERK_PUBLISHABLE_KEY=your_publishable_key\nCLERK_SECRET_KEY=your_secret_key\n```\n\nYou can get these from the [API Keys](https://dashboard.clerk.com/last-active?path=api-keys) screen in your Clerk dashboard.\n\nTo initialize Clerk with your Gatsby application, simply register the plugin in your `gatsby-config.ts`/`gatsby-config.js` file.\nAlso, use `dotenv` to access environment variables.\n\n```ts\n// gatsby-config.ts\nimport type { GatsbyConfig } from 'gatsby';\n\nrequire('dotenv').config({\n  path: `.env.${process.env.NODE_ENV}`,\n});\n\nconst config: GatsbyConfig = {\n  // ...the rest of your config object\n  plugins: ['gatsby-plugin-clerk'],\n};\n\nexport default config;\n```\n\n### Client-side\n\nAfter those changes are made, you can use Clerk components in your pages.\n\nFor example, in `src/pages/index.tsx`:\n\n```jsx\nimport { SignedIn, SignedOut, SignInButton, UserButton } from 'gatsby-plugin-clerk';\n\nconst IndexPage = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eHello Clerk!\u003c/h1\u003e\n      \u003cSignedIn\u003e\n        \u003cUserButton /\u003e\n      \u003c/SignedIn\u003e\n      \u003cSignedOut\u003e\n        \u003cSignInButton mode='modal' /\u003e\n      \u003c/SignedOut\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default IndexPage;\n```\n\n### Server-Side Rendering (SSR)\n\nUsing `withServerAuth` from `'gatsby-plugin-clerk/ssr'`. Example file `/pages/ssr.tsx`:\n\n```tsx\nimport * as React from 'react';\nimport { GetServerData } from 'gatsby';\nimport { withServerAuth } from 'gatsby-plugin-clerk/ssr';\n\nexport const getServerData: GetServerData\u003cany\u003e = withServerAuth(\n  async props =\u003e {\n    return { props: { data: '1', auth: props.auth } };\n  },\n  { loadUser: true },\n);\n\nfunction SSRPage({ serverData }: any) {\n  return (\n    \u003cmain\u003e\n      \u003ch1\u003eSSR Page with Clerk\u003c/h1\u003e\n      \u003cpre\u003e{JSON.stringify(serverData, null, 2)}\u003c/pre\u003e\n    \u003c/main\u003e\n  );\n}\n\nexport default SSRPage;\n```\n\n### Server API routes\n\nImporting `'gatsby-plugin-clerk/api'` gives access to all the exports coming from `@clerk/sdk-node`. Example file `/api/hello.ts`:\n\n```ts\nimport { clerkClient, withAuth } from 'gatsby-plugin-clerk/api';\n\nconst handler = withAuth(async (req, res) =\u003e {\n  const { totalCount } = await clerkClient.users.getUserList();\n  res.send({ title: `We have ${totalCount} users`, auth: req.auth });\n});\n\nexport default handler;\n```\n\n_For further details and examples, please refer to our [Documentation](https://clerk.com/docs/get-started/gatsby?utm_source=github\u0026utm_medium=gatsby_plugin_clerk)._\n\n### Build\n\nTo build the package locally with the TypeScript compiler, run:\n\n```sh\nnpm run build\n```\n\nTo build the package in watch mode, run the following:\n\n```sh\nnpm run dev\n```\n\n## Support\n\nYou can get in touch with us in any of the following ways:\n\n- Join our official community [Discord server](https://clerk.com/discord)\n- Create a [GitHub Discussion](https://github.com/clerk/javascript/discussions)\n- Contact options listed on [our Support page](https://clerk.com/support?utm_source=github\u0026utm_medium=gatsby_plugin_clerk)\n\n## Contributing\n\nWe're open to all community contributions! If you'd like to contribute in any way, please read [our contribution guidelines](https://github.com/clerk/javascript/blob/main/docs/CONTRIBUTING.md).\n\n## Security\n\n`gatsby-plugin-clerk` follows good practices of security, but 100% security cannot be assured.\n\n`gatsby-plugin-clerk` is provided **\"as is\"** without any **warranty**. Use at your own risk.\n\n_For more information and to report security issues, please refer to our [security documentation](https://github.com/clerk/javascript/blob/main/docs/SECURITY.md)._\n\n## License\n\nThis project is licensed under the **MIT license**.\n\nSee [LICENSE](https://github.com/clerk/javascript/blob/main/packages/gatsby-plugin-clerk/LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclerk%2Fgatsby-plugin-clerk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclerk%2Fgatsby-plugin-clerk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclerk%2Fgatsby-plugin-clerk/lists"}