QUICKSTART
Get Started in 5 Minutes
Add enterprise-grade authentication to your app with just a few lines of code. Choose your framework below to get started.
1
Create a Zalt Account
Sign up for a free account and create your first realm.
Create Free Account2
Install the SDK
npm install @zalt/next @zalt/react3
Configure Your App
// middleware.ts
import { zaltMiddleware } from '@zalt/next';
export default zaltMiddleware({
publicRoutes: ['/', '/login', '/signup'],
});
export const config = {
matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};4
Add Authentication
// app/layout.tsx
import { ZaltProvider } from '@zalt/react';
export default function RootLayout({ children }) {
return (
<html>
<body>
<ZaltProvider
realmId={process.env.NEXT_PUBLIC_ZALT_REALM_ID!}
clientId={process.env.NEXT_PUBLIC_ZALT_CLIENT_ID!}
>
{children}
</ZaltProvider>
</body>
</html>
);
}
// app/dashboard/page.tsx
'use client';
import { useAuth, UserButton } from '@zalt/react';
export default function Dashboard() {
const { user, isLoaded } = useAuth();
if (!isLoaded) return <div>Loading...</div>;
if (!user) return <div>Please sign in</div>;
return (
<div>
<UserButton />
<h1>Welcome, {user.email}</h1>
</div>
);
}Environment Variables
Add these to your .env.local file:
ZALT_REALM_ID=your-realm-id ZALT_CLIENT_ID=your-client-id ZALT_SECRET_KEY=your-secret-key # Server-side only!