> This page location: Backend > Neon Auth > Quickstarts > Next.js > Full Neon documentation index: https://neon.com/docs/llms.txt # Use Neon Auth with Next.js (UI Components) Set up authentication in Next.js using pre-built UI components **Note: Beta** The **Neon Auth with Better Auth** is in Beta. Share your feedback on [Discord](https://discord.gg/92vNTzKDGp) or via the [Neon Console](https://console.neon.tech/app/projects?modal=feedback). **Note:** Upgrading from Neon Auth SDK v0.1? See the [migration guide](https://neon.com/docs/auth/migrate/from-auth-v0.1) for step-by-step instructions. ## Enable Auth in your Neon project Enable Auth in your [Neon project](https://console.neon.tech) and copy your Auth URL from Configuration. **Console path:** Project → Branch → Auth → Configuration ## Install the Neon Auth SDK Install the Neon SDK into your Next.js app.

_If you don't have a Next.js project_

```bash npx create-next-app@latest my-app --yes cd my-app ```

Run in terminal: ```bash npm install @neondatabase/auth ``` ## Set up environment variables Create a `.env` file in your project root and add your Auth URL and a cookie secret: **Note:** Replace the Auth URL with your actual Auth URL from the Neon Console. Generate a secure cookie secret with `openssl rand -base64 32`. In `.env`: ```bash NEON_AUTH_BASE_URL=https://ep-xxx.neonauth.us-east-1.aws.neon.tech/neondb/auth NEON_AUTH_COOKIE_SECRET=your-secret-at-least-32-characters-long ``` ## Create auth server instance Create a unified auth instance in `lib/auth/server.ts`. This single instance provides all server-side auth functionality: - `.handler()` for API routes - `.middleware()` for route protection - `.getSession()` and all Better Auth server methods See the [Next.js Server SDK reference](https://neon.com/docs/auth/reference/nextjs-server) for complete API documentation. In `lib/auth/server.ts`: ```typescript import { createNeonAuth } from '@neondatabase/auth/next/server'; export const auth = createNeonAuth({ baseUrl: process.env.NEON_AUTH_BASE_URL!, cookies: { secret: process.env.NEON_AUTH_COOKIE_SECRET!, }, }); ``` ## Set up auth API routes Create an API route handler that proxies auth requests. All Neon Auth APIs will be routed through this handler. Create a route file inside `/api/auth/[...path]` directory: In `app/api/auth/[...path]/route.ts`: ```typescript import { auth } from '@/lib/auth/server'; export const { GET, POST } = auth.handler(); ``` ## Add authentication middleware The middleware ensures users are authenticated before accessing protected routes. Create `proxy.ts` file in your project root: In `proxy.ts`: ```typescript import { auth } from '@/lib/auth/server'; export default auth.middleware({ // Redirects unauthenticated users to sign-in page loginUrl: '/auth/sign-in', }); export const config = { matcher: [ // Protected routes requiring authentication '/account/:path*', ], }; ``` **Note:** Your Next.js project is now fully configured to use Neon Auth. Now, lets proceed with setting up the Auth UI Provider and wrap your layout with auth context. ## Configure the auth client The Auth UI components need access to auth APIs. Create the auth client in `lib/auth/client.ts` file, which you'll pass to `NeonAuthUIProvider`. **Note:** The server-side `auth` instance was already created in a previous step. The client is separate and handles browser-side auth operations. In `lib/auth/client.ts`: ```tsx 'use client'; import { createAuthClient } from '@neondatabase/auth/next'; export const authClient = createAuthClient(); ``` ## Wrap app layout with auth provider The `NeonAuthUIProvider` component wraps your application with authentication context and provides essential hooks and auth methods required by auth components throughout your app. To make authentication globally accessible, wrap your entire app with `NeonAuthUIProvider`. **Important: Hydration Warning** Add `suppressHydrationWarning` to the `` tag to prevent React hydration errors caused by `next-themes` client-side theme switching. This property only applies one level deep, so it won't block hydration warnings on other elements. Copy and paste the following code into your `app/layout.tsx` file. The `NeonAuthUIProvider` can be fully customized with settings you have configured in Neon Console. For example: - Add social providers like Google, Github, and Vercel on sign-in page - Allow your users to create and manage organizations in `/account/organizations` - Localization support

Example: Adding optional props

```tsx {children} ```

In `app/layout.tsx`: ```tsx import { authClient } from '@/lib/auth/client'; import { NeonAuthUIProvider, UserButton } from '@neondatabase/auth/react'; import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: 'My Neon App', description: 'A Next.js application with Neon Auth', }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return (

{children} ); } ``` ## Add Neon Auth styles Import the Neon Auth UI styles in your `app/globals.css` file. Add this line at the top of the file: **Tip: Not using Tailwind?** See [UI Component Styles](https://neon.com/docs/auth/reference/ui-components#styling) for alternative setup options. In `app/globals.css`: ```css @import "tailwindcss"; @import "@neondatabase/auth/ui/tailwind"; ``` **Note:** Now that the Auth provider and styles are set up, let's build the pages for signing up and signing in ## Create the Auth & Account pages Create a dynamic route segment for authentication and account views in `app/auth/[path]/page.tsx` and `app/account/[path]/page.tsx` respectively. - `AuthView` - with dynamic route segment covers the following paths: - `/auth/sign-in` - Sign in with email/password and social providers - `/auth/sign-up` New account registration - `/auth/sign-out` Sign the user out of the applications - `AccountView` - with dynamic route segment covers the following paths: - `/account/settings` - User can manage their profile details - `/account/security` - Change password and list active session **create app & account page:** Tab: Auth Page Create a new page in `app/auth/[path]/page.tsx` and copy-paste following code: ```tsx import { AuthView } from '@neondatabase/auth/react'; export const dynamicParams = false; export default async function AuthPage({ params }: { params: Promise<{ path: string }> }) { const { path } = await params; return (

); } ``` Tab: Account Page Create a new page in `app/account/[path]/page.tsx` and copy-paste following code: ```tsx import { AccountView } from '@neondatabase/auth/react'; import { accountViewPaths } from '@neondatabase/auth/react/ui/server'; export const dynamicParams = false; export function generateStaticParams() { return Object.values(accountViewPaths).map((path) => ({ path })); } export default async function AccountPage({ params }: { params: Promise<{ path: string }> }) { const { path } = await params; return (

); } ``` ## Access user data on server and client **Server Components:** - Use the `auth` instance from `lib/auth/server.ts` to access session data and call auth methods in server components and server actions. **Client Components:** - Use the `authClient` from `lib/auth/client.ts` to access session data and call auth methods in client components. **Access user data:** Tab: Server Component Create a new page at `app/server-rendered-page/page.tsx` and add the following code: ```tsx import { auth } from '@/lib/auth/server'; // Server components using auth methods must be rendered dynamically export const dynamic = 'force-dynamic'; export default async function ServerRenderedPage() { const { data: session } = await auth.getSession(); return (

Server Rendered Page

Authenticated:{' '} {session ? 'Yes' : 'No'}

{session?.user &&

User ID: {session.user.id}

}

Session and User Data:

        {JSON.stringify({ session: session?.session, user: session?.user }, null, 2)}

); } ``` Tab: Client Component Create a new page at `app/client-rendered-page/page.tsx` and add the following code: ```tsx 'use client'; import { authClient } from '@/lib/auth/client'; export default function ClientRenderedPage() { const { data } = authClient.useSession(); return (

Client Rendered Page

Authenticated:{' '} {data?.session ? 'Yes' : 'No'}

{data?.user &&

User ID: {data.user.id}

}

Session and User Data:

        {JSON.stringify({ session: data?.session, user: data?.user }, null, 2)}

); } ``` Tab: API Route Create a new API route at `app/api/secure-api-route/route.ts` and add the following code: ```tsx import { auth } from '@/lib/auth/server'; export async function GET() { const { data: session } = await auth.getSession(); if (!session?.user) { return Response.json({ error: 'Unauthenticated' }, { status: 401 }); } return Response.json({ session: session.session, user: session.user }); } ``` ## Start your app Start the development server, and then open [http://localhost:3000/](http://localhost:3000/) - Visit `/auth/sign-in` to sign in or sign up - Visit `/account/settings` to view account settings - Visit `/server-rendered-page` to see user data on server - Visit `/client-rendered-page` to see user data on client - Visit `/api/secure-api-route` to see user data from API route **Note: Safari users** Safari blocks third-party cookies on non-HTTPS connections. Use `npm run dev -- --experimental-https` and open `https://localhost:3000` instead. Run in terminal: ```bash npm run dev ``` ## Next steps - [Add email verification](https://neon.com/docs/auth/guides/email-verification) - [Learn how to branch your auth](https://neon.com/docs/auth/branching-authentication) --- ## Related docs (Quickstarts) - [React](https://neon.com/docs/auth/quick-start/react) - [TanStack Router](https://neon.com/docs/auth/quick-start/tanstack-router)