Next.js Setup
@pylo/auth-nextjs handles user authentication for Next.js: login, logout, session management, and
automatic token refresh.
Install
pnpm add @pylo/auth-nextjsEnvironment
1
PYLO_APP_ID=your-app-idPYLO_APP_ID scopes the auth cookies per app. Find your app id in Settings > Apps in the admin
panel.
Middleware
Create a proxy.ts in your project root:
1
2
3
4
5
6
7
8
9
10
11
import { createPyloProxy } from "@pylo/auth-nextjs";
export const proxy = createPyloProxy({
publicPaths: ["/auth"],
});
export const config = {
matcher: [
"/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
],
}This protects every page and redirects unauthenticated users to /auth/login. Tokens refresh before
they expire.
The matcher is the
negative match pattern
from the Next.js docs. Extend the exclusion list with any folder you serve assets from
(|images|fonts), otherwise a logged-out visitor is redirected to the login page instead of
receiving the file. API route handlers are excluded as well — check auth inside them with
requireAuth().
Custom middleware
For custom redirect logic or route protection, see Login & Logout.
Social login
Two route handlers add Google and Microsoft login. See Social Login.
Next steps
- Add Login & Logout pages
- Use Server Utilities for auth checks in Server Components
- Add the Next.js SDK for data access