{"id":24274073,"url":"https://github.com/designyourcode/payload-clerk-auth","last_synced_at":"2026-04-23T03:33:02.690Z","repository":{"id":271758067,"uuid":"905677194","full_name":"DesignyourCode/payload-clerk-auth","owner":"DesignyourCode","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-12T13:26:22.000Z","size":1711,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T08:20:54.256Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/DesignyourCode.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-12-19T10:00:18.000Z","updated_at":"2025-01-14T00:05:49.000Z","dependencies_parsed_at":"2025-01-09T18:27:57.420Z","dependency_job_id":"97fa7dc0-9a2d-44ae-9539-eb4da584eee6","html_url":"https://github.com/DesignyourCode/payload-clerk-auth","commit_stats":null,"previous_names":["designyourcode/payload-clerk-auth"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DesignyourCode/payload-clerk-auth","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fpayload-clerk-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fpayload-clerk-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fpayload-clerk-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fpayload-clerk-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DesignyourCode","download_url":"https://codeload.github.com/DesignyourCode/payload-clerk-auth/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fpayload-clerk-auth/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32165047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-23T02:19:40.750Z","status":"ssl_error","status_checked_at":"2026-04-23T02:17:55.737Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-01-15T20:11:05.076Z","updated_at":"2026-04-23T03:33:02.677Z","avatar_url":"https://github.com/DesignyourCode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Payload Website Template\n\nThis project is using the official [Payload Website Template](https://github.com/payloadcms/payload/blob/main/templates/website).\n\nThe goal here is to implement Clerk authentication with user profiles and a protected dashboard without customising the core website template so it is easily comparable. All changes are to be documented in this readme below:\n\n- [x] Updated readme\n- [x] Add `.nvmrc` file for consitent Node version setting\n- [x] Created a frontend `/dashboard` area\n- [x] Add Clerk provider and middleware to protect dashboard\n- [x] Add Clerk sign up/in routes\n- [x] Create a customer collection\n- [x] Create and push user data into the customer collection on registration\n- [x] Create membership tiers\n- [ ] Create a collection for content that is protected based on the users tier\n- [ ] Create a Stripe flow for recurring payments based on the membership tier settings\n- [ ] Create area in dashboard to show selected membership tier information with change option\n\n## Example ENV\n\n```\n# Added by Payload\n\n# jdbc:\nDATABASE_URL=postgresql://xxx:@localhost:5432/payload-clerk-auth\n\nDATABASE_URI=${DATABASE_URL}\n# Used to encrypt JWT tokens\nPAYLOAD_SECRET=xxxxxxxxx\n# Used to configure CORS, format links and more. No trailing slash\nNEXT_PUBLIC_SERVER_URL=http://localhost:3000\n\nNEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxx\nCLERK_SECRET_KEY=sk_test_xxxxx\nCLERK_WEBHOOK_SECRET=xxx_xxxxx\n\n```\n\n## Documentation\n\n### Adding Clerk\n\nIn order to add Clerk, we can just follow the standard Clerk integration for NextJS and adjust the `middleware.ts` file as necessary. In our case, we are protecting the `/dashboard` route.\n\n#### Setting up Clerk webhook\n\nWe want to make sure that when a user is created we store their data as a custom in the system so we can save their choices later down the line. In our case we can use a Clerk webhook and hit an endpoint that will handle this logic.\n\nWe have an endpoint called `/api/create-customer` which will do the heavy lifting for this flow.\n\nCreate a webhook is created in Clerk (using the following guide: https://clerk.com/blog/webhooks-getting-started) and you have the public URL added to the webhook you can then test and check the webhook works. Once this is confirmed as working, you can register within the application and ensure you as a user is added as a customer (tier is defaulted to a free tier).\n\nIn order for Clerk webhook to access your local I am using Pinggy to expose my local to a public URL: https://pinggy.io/docs/ but NGROK etc would also work:\n\n- Run `ssh -p 443 -R0:localhost:3000 a.pinggy.io`\n- Add the URL provided as the webhook URL above `\u003curl\u003e/api/create-customer`\n\n\u003e Note: Keep in mind, Pinggy has a 1 hour time-out unless you opt for a paid tier, so you would need to update the webhook URL when restarting this URL timesout\n\nClerk sign up should redirect the user to the tiers selection page. This makes a call to an API endpoint which updates the user to the correct tier. This is the part where you would add a payment gateway\n\n### Protecting Content\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignyourcode%2Fpayload-clerk-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdesignyourcode%2Fpayload-clerk-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignyourcode%2Fpayload-clerk-auth/lists"}