Use case

Add auth and email to React + Vite

AscendKit's client SDK and React components work in a Vite-based React app, paired with an AscendKit-authenticated backend. You get drop-in auth components and transactional email from one project, with a single user record spanning both.

How it works

1. Add the client SDK
Install the AscendKit SDK in your React + Vite app and configure the public key.
2. Drop in components
Use the auth-card, login, and user-button components for sign-in and account UI.
3. Connect email
Send onboarding and lifecycle email from the same project keyed to the user record.

What works in Vite, and what does not?

The React hooks and components work. The server-side auth runtime does not — it requires Next.js. That single distinction determines your whole architecture, so settle it before writing code.

A Vite app is a static bundle with no server of its own, so there is nowhere for the auth runtime to run. You need a backend that owns the auth routes. In practice that means one of two shapes: a small Next.js app alongside your Vite frontend that handles auth and issues access tokens, or your existing API server verifying AscendKit tokens directly.

The client components are identical either way. AscendKitProvider, the sign-in surfaces, and the session hooks behave the same as they do in a Next.js app — it is only the token issuance that has to live somewhere with a server.

Where each piece runs in a Vite setup.
Piece	Runs in Vite app	Needs a server
AscendKitProvider and hooks	Yes	No
Sign-in components	Yes	No
Auth route handlers	No	Yes — Next.js
Access token issuance	No	Yes — Next.js
Token verification	No	Any backend, via JWKS
Sending email	No	Any backend, secret key

How do you wire the provider in a Vite app?

Wrap your root in AscendKitProvider and point it at the backend that owns your auth routes. Vite exposes environment variables through import.meta.env with a VITE_ prefix rather than process.env, which is the most common thing to get wrong when porting a Next.js example.

Only the public key belongs in the browser bundle. The secret key must never appear in a Vite app — everything in the bundle is public, so any secret there is published the moment you deploy.

src/main.tsx

import { AscendKitProvider } from "@ascendkit/nextjs";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <AscendKitProvider
    publicKey={import.meta.env.VITE_ASCENDKIT_ENV_KEY}
    apiUrl={import.meta.env.VITE_ASCENDKIT_API_URL}
  >
    <App />
  </AscendKitProvider>,
);

Should you use Vite or move to Next.js?

If auth is the only reason you are considering the move, do not move. Pairing a Vite frontend with a small auth backend is a normal architecture and costs less than a framework migration.

The case for Next.js is stronger when you also want server-side rendering for SEO, server components, or you are already running a Node backend you would rather consolidate. Auth alone is not that case.

The honest trade is one extra deployable. A Vite frontend plus an auth-owning backend is two things to deploy instead of one. If that is unacceptable and you have no backend today, Next.js removes the second piece.

Troubleshooting

Environment variables are undefined at runtime

Cause: Vite only exposes variables prefixed with VITE_, and only through import.meta.env. Copying a Next.js example that reads process.env.NEXT_PUBLIC_* silently yields undefined.

Fix: Rename to VITE_ASCENDKIT_ENV_KEY and read via import.meta.env. Restart the dev server — Vite reads .env at startup only.

CORS errors calling the auth backend

Cause: The Vite dev server and your auth backend are on different origins, so the browser blocks credentialed requests unless the backend allows that origin explicitly.

Fix: Configure the backend to allow your Vite origin with credentials, or proxy /api through Vite's dev server so both share an origin.

FAQ

Can I use AscendKit without Next.js?

The client components and SDK work in React apps including Vite, paired with an AscendKit-authenticated backend. The deepest integration is on Next.js today.

Do the React components require a specific router?

No. The components are framework-level React and do not require a specific router to render sign-in and account UI.

Related guides

Add auth and email to Remix — the same constraint, but with a server of your own to verify tokens in.
Add auth and email to Next.js — the single-deployable version, if you are not committed to Vite.
Add auth to an Express API — the token-verification side, for the backend a Vite app pairs with.
Python SDK — verifying the same tokens if your backend is Python rather than Node.

Start with one API key

Auth, email, surveys, and journeys share one user record, so you ship this without stitching vendors together.

Start free