\n\n[](https://dreno.fluido.design/discord)\n[](https://dreno.fluido.design/docs?utm_source=github&utm_medium=dreno_nextjs)\n\n\n\n[Changelog](https://github.com/clerkinc/javascript/blob/main/packages/nextjs/CHANGELOG.md)\n·\n[Report a Bug](https://github.com/clerkinc/javascript/issues/new?assignees=&labels=needs-triage&projects=&template=BUG_REPORT.yml)\n·\n[Request a Feature](https://github.com/clerkinc/javascript/issues/new?assignees=&labels=feature-request&projects=&template=FEATURE_REQUEST.yml)\n·\n[Ask a Question](https://github.com/clerkinc/javascript/discussions)\n\n
\n\n---\n\n## Overview\n\nDreno is one of the easiest way to add authentication and user management to your Next.js application. Add sign up, sign in, and profile management to your application in minutes.\n\n## Getting Started\n\n### Prerequisites\n\n- Next.js v13+\n- Node.js v16+\n\n### Installation\n\n```sh\nnpm install @fluido/dreno-nextjs\n```\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## Usage\n\nDreno only requires your application to export a `middleware`.\n\n### Get your `DRENO_KEY`\n\nGet your `DRENO_KEY` at [dreno.fluido.design](https://dreno.fluido.design).\n\n### Add Environment Variable\n\nSet `DRENO_KEY` to your `.env.local` file.\n\n```sh\nDRENO_KEY=[projectId]:•••••••••••\n```\n\n### Create `middleware.ts`\n\nAt the root of your Next.js project, create a file named `middleware.ts` like the following:\n\n```ts\nimport { drenoMiddleware } from '@fluido/dreno-nextjs/server'\n\nexport const middleware = drenoMiddleware()\n\nexport const config = {\n matcher: [\n /*\n * Standard Next.js matcher config.\n * Read more at Next's Documentation:\n * https://nextjs.org/docs/app/building-your-application/routing/middleware#matching-paths\n *\n */\n '/((?!api|_next/static|_next/image|favicon.ico).*)',\n ],\n}\n```\n\n### Access Info on Server Components\n\nWith async Server Components the `getAuth` function returns a **Promise** that you can await to get auth info.\n\n```tsx\nimport { getAuth } from '@fluido/dreno-nextjs/server'\nimport { notFound } from 'next/navigation'\n\nexport default async function Page() {\n const auth = await getAuth()\n\n if (!auth.isAuthorized) notFound()\n\n return
Hello {auth.user.name}!
\n}\n```\n\n### Access Info on Client Components\n\nWith Client Components the `useAuth` hook returns an auth info object.\n\n```tsx\n'use client'\n\nimport { useAuth } from '@fluido/dreno-nextjs'\n\nexport function LogoutButton() {\n const auth = useAuth()\n\n return \n}\n```\n\nThis is a bare minimum example that protects **every route** of your app. When trying to access any route, the visitor will be redirected to a custom domain provided by Fluido.\n\n_For further details on how to create your own login roudes, examples, and more, please refer to\nour [Documentation](https://dreno-docs.fluido.design/?utm_source=github&utm_medium=dreno_nextjs)._\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://dreno.fluido.design/discord)\n- Create a [GitHub Discussion](https://github.com/fluidodesign/dreno-next/discussions)\n- Contact options listed on [our Support page](https://dreno.fluido.design/support?utm_source=github&utm_medium=dreno_nextjs)\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/fluidodesign/dreno-next/blob/main/docs/CONTRIBUTING.md).\n\n## Security\n\n`@fluido/dreno-nextjs` follows good practices of security, but 100% security cannot be assured.\n\n`@fluido/dreno-nextjs` 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\nour [security documentation](https://github.com/fluidodesign/dreno-next/blob/main/docs/SECURITY.md)._\n\n## License\n\nThis project is licensed under the **MIT license**.\n\nSee [LICENSE](https://github.com/fluidodesign/dreno-next/blob/main/packages/nextjs/LICENSE) for more information.\n","readmeFilename":"README.md"}
![](\"https://images.dreno.fluido.design/static/logo-dark-mode-400x400.png\"){kind=logo}
\n