React with Neon Auth UI (UI Components)

1. Enable Auth in your Neon project

   If you don't have a Neon project yet, create one at console.neon.tech.

   Go to the Auth page in your project dashboard and click Enable Neon Auth.

   You can then find your Auth URL on the Configuration tab. Copy this URL - you'll need it in the next step.

   Console

   

2. Create your React app

   Create a React app using Vite with TypeScript.

   Terminal

   npm create vite@latest my-app -- --template react-ts

3. Install packages

   Install the Neon SDK, UI components, and React Router:

   Terminal

   cd my-app
   npm install @neondatabase/neon-js react-router-dom

4. Add your Auth URL

   Create a .env file in your project root and add your Auth URL:

   note

   Replace the URL with your actual Auth URL from the Neon Console.

   .env

   VITE_NEON_AUTH_URL=https://ep-xxx.neonauth.us-east-1.aws.neon.tech/neondb/auth

5. Set up authentication

   Create a src/auth.ts file to configure your auth client:

   src/auth.ts

   import { createAuthClient } from '@neondatabase/neon-js/auth';
   
   export const authClient = createAuthClient(import.meta.env.VITE_NEON_AUTH_URL);

6. Wrap your app with the provider

   Replace the contents of src/main.tsx to wrap your app with React Router and the auth provider. Import the Neon Auth UI CSS - no additional setup needed:

   Pass props to NeonAuthUIProvider for any features you want to use. Only the authClient prop is required.

   Styling options

   To learn more about applying styles to the Auth UI components, including plain CSS and Tailwind CSS v4 options, see UI Component Styles.

   Example: Adding optional props

   <NeonAuthUIProvider
     authClient={authClient}
     social={{ providers: ['google', 'github', 'vercel'] }}
     navigate={navigate}
     credentials={{ forgotPassword: true }}
   >
     {children}
   </NeonAuthUIProvider>

   src/main.tsx

   import { StrictMode } from 'react';
   import { createRoot } from 'react-dom/client';
   import { BrowserRouter } from 'react-router-dom';
   import { NeonAuthUIProvider } from '@neondatabase/neon-js/auth/react';
   import '@neondatabase/neon-js/ui/css';
   import App from './App';
   import { authClient } from './auth';
   
   createRoot(document.getElementById('root')!).render(
     <StrictMode>
       <NeonAuthUIProvider authClient={authClient}>
         <BrowserRouter>
           <App />
         </BrowserRouter>
       </NeonAuthUIProvider>
     </StrictMode>
   );

7. Build your authentication UI

   Replace the contents of src/App.tsx with routes for authentication and account management:

   • The <AuthView> component handles navigation between sign-in and sign-up views.
   • The <AccountView> component provides account-management features such as password resets and session management.

   src/App.tsx

   import { Routes, Route, useParams } from 'react-router-dom';
   import {
     AuthView,
     AccountView,
     SignedIn,
     UserButton,
     RedirectToSignIn,
   } from '@neondatabase/neon-js/auth/react';
   
   function Home() {
     return (
       <>
         <SignedIn>
           <div
             style={{
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'center',
               alignItems: 'center',
               minHeight: '100vh',
               gap: '2rem',
             }}
           >
             <div style={{ textAlign: 'center' }}>
               <h1>Welcome!</h1>
               <p>You're successfully authenticated.</p>
               <UserButton />
             </div>
           </div>
         </SignedIn>
         <RedirectToSignIn />
       </>
     );
   }
   
   function Auth() {
     const { pathname } = useParams();
     return (
       <div
         style={{
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
           minHeight: '100vh',
           padding: '2rem 1rem',
         }}
       >
         <AuthView pathname={pathname} />
       </div>
     );
   }
   
   function Account() {
     const { pathname } = useParams();
     return (
       <div
         style={{
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
           minHeight: '100vh',
           padding: '2rem 1rem',
         }}
       >
         <AccountView pathname={pathname} />
       </div>
     );
   }
   
   export default function App() {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/auth/:pathname" element={<Auth />} />
         <Route path="/account/:pathname" element={<Account />} />
       </Routes>
     );
   }

8. Start your app

   Start the development server, then open http://localhost:5173. You'll be redirected to the sign-in page where you can sign up or sign in.

   Terminal

   npm run dev

9. See your users in the database

   As users sign up, their profiles are synced to your Neon database in the neon_auth.user table.

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

   SQL Editor

   SELECT * FROM neon_auth.user;

Next steps

• Add email verification
• Learn how to branch your auth