React

SerenDB Auth for Next.js SerenDB Auth for JavaScript React Template

<GetStarted framework="React" envVars={`

SerenDB 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 SerenDB connection string

DATABASE_URL=YOUR_NEON_CONNECTION_STRING } templateRepo="seren-auth-react-template" setupSteps={

Install the React SDK

Make sure you have a React project 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 SerenDB Auth environment variables from the Get your SerenDB Auth keys section into your `.env.local` file.

Configure SerenDB Auth client

A basic example of how to set up the SerenDB 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 ( <Route path="/handler/*" element={} /> <Route path="/" element={

hello world} /> ); } ```

Start and test your app

```bash npm start ```

Go to http://localhost:3000/handler/sign-up in your browser. Create a user or two, and you can see them show up immediately in the database. `} />