npm package: @fluido/dreno-nextjs
Description: Dreno library
Author: Renato Rodrigues
Latest version: 0.8.1-alpha

<p align="center">
  <a href="https://dreno.fluido.design?utm_source=github&utm_medium=dreno_nextjs" target="_blank" rel="noopener noreferrer">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://images.dreno.fluido.design/static/logo-dark-mode-400x400.png">
      <img src="https://images.dreno.fluido.design/static/logo-light-mode-400x400.png" height="64">
    </picture>
  </a>
  <br />
</p>

# @fluido/dreno-nextjs

<div align="center">

[![Chat on Discord](https://img.shields.io/discord/1161323987792572436.svg?logo=discord)](https://dreno.fluido.design/discord)
[![Dreno documentation](https://img.shields.io/badge/documentation-dreno-green.svg)](https://dreno.fluido.design/docs?utm_source=github&utm_medium=dreno_nextjs)

<!-- [![Follow on Twitter](https://img.shields.io/twitter/follow/FluidoDesign?style=social)](https://twitter.com/intent/follow?screen_name=FluidoDesign) -->

[Changelog](https://github.com/clerkinc/javascript/blob/main/packages/nextjs/CHANGELOG.md)
·
[Report a Bug](https://github.com/clerkinc/javascript/issues/new?assignees=&labels=needs-triage&projects=&template=BUG_REPORT.yml)
·
[Request a Feature](https://github.com/clerkinc/javascript/issues/new?assignees=&labels=feature-request&projects=&template=FEATURE_REQUEST.yml)
·
[Ask a Question](https://github.com/clerkinc/javascript/discussions)

</div>

---

## Overview

Dreno 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.

## Getting Started

### Prerequisites

- Next.js v13+
- Node.js v16+

### Installation

```sh
npm install @fluido/dreno-nextjs
```

### Build

To build the package locally with the TypeScript compiler, run:

```sh
npm run build
```

To build the package in watch mode, run the following:

```sh
npm run dev
```

## Usage

Dreno only requires your application to export a `middleware`.

### Get your `DRENO_KEY`

Get your `DRENO_KEY` at [dreno.fluido.design](https://dreno.fluido.design).

### Add Environment Variable

Set `DRENO_KEY` to your `.env.local` file.

```sh
DRENO_KEY=[projectId]:•••••••••••
```

### Create `middleware.ts`

At the root of your Next.js project, create a file named `middleware.ts` like the following:

```ts
import { drenoMiddleware } from '@fluido/dreno-nextjs/server'

export const middleware = drenoMiddleware()

export const config = {
  matcher: [
    /*
     * Standard Next.js matcher config.
     * Read more at Next's Documentation:
     * https://nextjs.org/docs/app/building-your-application/routing/middleware#matching-paths
     *
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}
```

### Access Info on Server Components

With async Server Components the `getAuth` function returns a **Promise** that you can await to get auth info.

```tsx
import { getAuth } from '@fluido/dreno-nextjs/server'
import { notFound } from 'next/navigation'

export default async function Page() {
  const auth = await getAuth()

  if (!auth.isAuthorized) notFound()

  return <h1>Hello {auth.user.name}!</h1>
}
```

### Access Info on Client Components

With Client Components the `useAuth` hook returns an auth info object.

```tsx
'use client'

import { useAuth } from '@fluido/dreno-nextjs'

export function LogoutButton() {
  const auth = useAuth()

  return <button onClick={() => auth?.logout()}>Logout</button>
}
```

This 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.

_For further details on how to create your own login roudes, examples, and more, please refer to
our [Documentation](https://dreno-docs.fluido.design/?utm_source=github&utm_medium=dreno_nextjs)._

## Support

You can get in touch with us in any of the following ways:

- Join our official community [Discord server](https://dreno.fluido.design/discord)
- Create a [GitHub Discussion](https://github.com/fluidodesign/dreno-next/discussions)
- Contact options listed on [our Support page](https://dreno.fluido.design/support?utm_source=github&utm_medium=dreno_nextjs)

## Contributing

We'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).

## Security

`@fluido/dreno-nextjs` follows good practices of security, but 100% security cannot be assured.

`@fluido/dreno-nextjs` is provided **"as is"** without any **warranty**. Use at your own risk.

_For more information and to report security issues, please refer to
our [security documentation](https://github.com/fluidodesign/dreno-next/blob/main/docs/SECURITY.md)._

## License

This project is licensed under the **MIT license**.

See [LICENSE](https://github.com/fluidodesign/dreno-next/blob/main/packages/nextjs/LICENSE) for more information.