# Source: https://neon.com/llms/neon-auth-quick-start-react.txt

# Neon Auth for React

> The "Neon Auth for React" documentation guides users on integrating Neon's authentication features into React applications, detailing setup, configuration, and implementation steps for seamless user authentication.

## Source

- [Neon Auth for React HTML](https://neon.com/docs/neon-auth/quick-start/react): The original HTML version of this documentation

Other frameworks:
- [Neon Auth for Next.js](https://neon.com/docs/neon-auth/quick-start/nextjs)
- [Neon Auth for JavaScript](https://neon.com/docs/neon-auth/quick-start/javascript)
  Sample project:
- [React Template](https://github.com/neondatabase-labs/neon-auth-react-template)

**Note** Beta: **Neon Auth** is in beta and ready to use. We're actively improving it based on feedback from developers like you. Share your experience in our [Discord](https://discord.gg/92vNTzKDGp) or via the [Neon Console](https://console.neon.tech/app/projects?modal=feedback).

Neon Auth lets you add authentication to your app in seconds — user data is synced directly to your Neon Postgres database, so you can query and join it just like any other table.

## Add Neon Auth to a project

Go to [pg.new](https://pg.new) to create a new Neon project.

Once your project is ready, open your project's **Auth** page and click **Enable Neon Auth** to get started.



## Get your Neon Auth keys

On the **Configuration** tab, select your framework to get the **Environment variables** you need to integrate Neon Auth and connect to your database.

You can use these keys right away to get started, or [skip ahead](https://neon.com/docs/neon-auth/quick-start/react#create-users-in-the-console-optional) to try out **user creation** in the Neon Console.

```bash
# Neon Auth environment variables for React (Vite)

VITE_STACK_PROJECT_ID=YOUR_NEON_AUTH_PROJECT_ID
VITE_STACK_PUBLISHABLE_CLIENT_KEY=YOUR_NEON_AUTH_PUBLISHABLE_KEY
STACK_SECRET_SERVER_KEY=YOUR_NEON_AUTH_SECRET_KEY

# Your Neon connection string

DATABASE_URL=YOUR_NEON_CONNECTION_STRING

```

 **Note** Are you a Vercel user?: If you're using the [Vercel-Managed Integration](https://vercel.com/marketplace/neon), the integration automatically sets these environment variables for you in Vercel when you connect a Vercel project to a Neon database. [Learn more](https://neon.com/docs/guides/vercel-managed-integration#environment-variables-set-by-the-integration).

## Set up your app

**Clone our template** for the fastest way to see Neon Auth in action.

```bash
git clone https://github.com/neondatabase-labs/neon-auth-react-template.git
```

Or **add Neon Auth** to an existing project.

### Install the React SDK

Make sure you have a [React project](https://react.dev/learn/creating-a-react-app) set up. We show an example here of a Vite React project with React Router.

```bash
npm install @stackframe/react
```

### Use your environment variables

Paste the Neon Auth environment variables from the [Get your Neon Auth keys](https://neon.com/docs/neon-auth/quick-start/react#get-your-neon-auth-keys) section into your `.env.local` file.

## Configure Neon Auth client

A basic example of how to set up the Neon Auth client in `stack.ts` in your `src` directory:

```tsx
import { StackClientApp } from '@stackframe/react';
import { useNavigate } from 'react-router-dom';

export const stackClientApp = new StackClientApp({
projectId: import.meta.env.VITE_STACK_PROJECT_ID,
publishableClientKey: import.meta.env.VITE_STACK_PUBLISHABLE_CLIENT_KEY,
tokenStore: 'cookie',
redirectMethod: { useNavigate },
});
```

## Update your app to use the provider and handler

In your `src/App.tsx`:

```tsx
import { StackHandler, StackProvider, StackTheme } from '@stackframe/react';
import { Suspense } from 'react';
import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom';
import { stackClientApp } from './stack';

function HandlerRoutes() {
const location = useLocation();

return (
<StackHandler app={stackClientApp} location={location.pathname} fullPage /\>
);
}

export default function App() {
return (
<Suspense fallback={null}>
<BrowserRouter>
<StackProvider app={stackClientApp}>
<StackTheme>
<Routes>
<Route path=

## Create users in the Console (optional)

You can create test users directly from the Neon Console — no app integration required. This is useful for development or testing.



Now you can [see your users in the database](https://neon.com/docs/neon-auth/quick-start/react#see-your-users-in-the-database).

## See your users in the database

As users sign up or log in — through your app or by creating test users in the Console — their profiles are synced to your Neon database in the `neon_auth.users_sync` table.

Query your users table in the SQL Editor to see your new user:

```sql
SELECT * FROM neon_auth.users_sync;
```

| id | name | email | created_at | updated_at | deleted_at | raw_json |
| ----------- | --------- | --------------- | ------------------- | ------------------- | ---------- | ---------------------------- |
| 51e491df... | Sam Patel | sam@startup.dev | 2025-02-12 19:43... | 2025-02-12 19:46... | null | `{"id": "51e491df...", ...}` |

## Next Steps

Want to learn more or go deeper?

- [How Neon Auth works](https://neon.com/docs/guides/neon-auth-how-it-works) — See a before and after showing the benefits of having your user data right in your database
- [Neon Auth tutorial](https://neon.com/docs/guides/neon-auth-demo) — Walk through our demo app for more examples of how Neon Auth can simplify your code
- [Best Practices & FAQ](https://neon.com/docs/guides/neon-auth-best-practices) — Tips, patterns, and troubleshooting
- [Neon Auth API Reference](https://neon.com/docs/guides/neon-auth-api) — Automate and manage Neon Auth via the API