{"id":20049032,"url":"https://github.com/unlock-protocol/unlock-with-next","last_synced_at":"2025-05-05T11:30:35.706Z","repository":{"id":41983553,"uuid":"469193091","full_name":"unlock-protocol/unlock-with-next","owner":"unlock-protocol","description":"Unlock with nextjs template for building full stack token gated applications","archived":false,"fork":false,"pushed_at":"2022-10-26T07:33:49.000Z","size":148,"stargazers_count":10,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-03-04T14:58:48.165Z","etag":null,"topics":["nextjs","unlock","unlock-protocol","unlockjs"],"latest_commit_sha":null,"homepage":"https://unlock-with-next.vercel.app","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/unlock-protocol.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}},"created_at":"2022-03-12T20:29:33.000Z","updated_at":"2022-11-14T11:40:39.000Z","dependencies_parsed_at":"2023-01-20T02:04:15.442Z","dependency_job_id":null,"html_url":"https://github.com/unlock-protocol/unlock-with-next","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlock-protocol%2Funlock-with-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlock-protocol%2Funlock-with-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlock-protocol%2Funlock-with-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlock-protocol%2Funlock-with-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unlock-protocol","download_url":"https://codeload.github.com/unlock-protocol/unlock-with-next/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224444089,"owners_count":17312126,"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":["nextjs","unlock","unlock-protocol","unlockjs"],"created_at":"2024-11-13T11:48:02.428Z","updated_at":"2024-11-13T11:48:02.880Z","avatar_url":"https://github.com/unlock-protocol.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Unlock with Next\n\nThis is an example using Unlock to tokengate application using NFTs both server and client side.\n\n## Developing\n\n### Configuration\n\nTo get started, you need to fill in the configuration files inside `config/` folder.\n\n1. `unlock.ts` holds configuration for paywall checkout and networks.\n\nCheck out the schema and tutorial on the unlock docs [paywall page](https://docs.unlock-protocol.com/unlock/developers/paywall/configuring-checkout#the-paywallconfig-object)\n\nYou will need to provide network provider and the address of the unlock contract for each network you support on your locks. See the selection of networks in the [smart contracts docs page](https://docs.unlock-protocol.com/unlock/developers/smart-contracts#production-networks)\n\n2. `session.ts` holds configuration for how session will be created and managed.\n\n3. Set the following environment variables. You can put them all inside `.env.local` file in development. Nextjs will load them automatically.\n\n   - `NEXT_PUBLIC_BASE_URL` - the base url of your site. For example, if your site is deployed to https://example.com/my-site, then the base url is `https://example.com`. If you are in development mode, it is set to http://localhost:3000 by default.\n\n   - `SECRET_COOKIE_PASSWORD` - the secret password used to sign \u0026 encrypt cookies.\n\n### Client Side Locking\n\nYou can lock content on the client side by using the `useUser` hook.\n\n```tsx\nimport { NextPage } from \"next\";\nimport { useUser } from \"~/hooks/useUser\";\n\nconst Page: NextPage = () =\u003e {\n  const { user } = useUser();\n\n  return (\n    \u003cdiv\u003e\n      {user?.isLoggedIn ? `Hello, ${user.walletAddress}` : `You need to login`}\n    \u003c/div\u003e\n  );\n};\n\nexport default Page;\n```\n\n### Server Side Locking\n\n#### Lock a page\n\nTo lock a page generated server side, you can use the `withIronSessionSsr` middleware in the page file to pass different server side props based on whether the user is logged in or not.\n\n```tsx\nimport { withIronSessionSsr } from \"iron-session/next\";\nimport { NextPage } from \"next\";\n\ninterface Props {\n  data: {\n    values: number[],\n  } | null;\n}\n\nconst Page: NextPage\u003cProps\u003e = ({ data }) =\u003e {\n  if (!data) {\n    return \u003cdiv\u003e You don\u0026apos;t have access \u003c/div\u003e;\n  }\n  return (\n    \u003cdiv\u003e\n      data.values.map((value) =\u003e \u003cdiv\u003e{value}\u003c/div\u003e)\n    \u003c/div\u003e\n  );\n};\n\nexport default Page\n\nexport const getServerSideProps =\n  withIronSessionSsr \u003c\n  Props \u003e\n  ((ctx) =\u003e {\n    const user = ctx.req.session.user;\n    return user?.isLoggedIn\n      ? {\n          props: {\n            data: {\n              values: [1, 2, 3],\n            },\n          },\n        }\n      : {\n          props: {\n            data: null,\n          },\n        };\n  },\n  sessionOptions);\n```\n\n#### Lock an API endpoint\n\nTo lock an API endpoint server side, you can use the `withIronSessionApiRoute` middleware in the API file to return different responses based on whether the user is logged in or not.\n\n```typescript\nimport { withIronSessionApiRoute } from \"iron-session/next\";\nimport { NextApiRequest, NextApiResponse } from \"next\";\nimport { sessionOptions } from \"~/config/session\";\n\nexport default withIronSessionApiRoute(userRoute, sessionOptions);\n\nasync function userRoute(\n  req: NextApiRequest,\n  res: NextApiResponse\u003c{ locked: boolean }\u003e\n) {\n  if (req.session.user?.isLoggedIn) {\n    res.json({\n      locked: false,\n    });\n  } else {\n    res.json({\n      locked: true,\n    });\n  }\n}\n```\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/user](http://localhost:3000/api/user). This endpoint can be edited in `pages/api/user.ts`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funlock-protocol%2Funlock-with-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funlock-protocol%2Funlock-with-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funlock-protocol%2Funlock-with-next/lists"}