Vercel Edge Functions
Build your first authentication flow with Aura Auth and Vercel Edge Functions
This guide walks you through creating a complete authentication flow using Aura Auth directly with Vercel Edge Functions.
Overview
Vercel Edge Functions run on the Edge Runtime, which supports web-standard APIs, including the Request and Response interfaces. That makes them a strong fit for Aura Auth's framework-agnostic design.
Before continuing, complete the installation and initial setup:
- Quick Start Guide to create your Aura Auth instance
- TypeScript Configuration for TypeScript-specific setup
- Vercel Integration App for a fully working example
Then use this guide to integrate Aura Auth with a Vercel Edge Function using best practices.
What You'll Build
You will create a small Vercel app with:
- a shared
api/_auth.tsserver configuration - a
api/auth/index.tsentry point that mounts the auth handlers - a
vercel.jsonrewrite configuration for auth routes - a request flow that keeps auth logic separate from the rest of the app
Project Structure
Environment Setup
Create a .env.local file at the root of your project to store secrets securely.
# 32-bytes (256-bit) secret used to sign/encrypt sessions. Use a secure random value.
AURA_AUTH_SECRET="base64-or-hex-32-bytes"
AURA_AUTH_SALT="base64-or-hex-32-bytes".env.local file to version control. Use a secret manager in production.Setup Aura Auth
Create an _auth.ts file in api/ to configure authentication and export the shared helpers used by the edge handlers.
import { createAuth } from "@aura-stack/auth"
export const auth = createAuth({
oauth: ["github"],
basePath: "/api/auth",
})
export const { handlers, api } = authbasePath must match the route you expose in your Vercel app. If the route changes, update the auth config and rewrites together.
Mount HTTP Handlers
Route auth traffic to a single edge function and pass the native Request directly to Aura Auth. The adapter below keeps the edge function focused on routing while Aura Auth handles the request logic.
import { handlers } from "@/api/_auth"
export const GET = async (request: Request) => {
return await handlers.GET(request)
}
export const POST = async (request: Request) => {
return await handlers.POST(request)
}
export const PATCH = async (request: Request) => {
return await handlers.PATCH(request)
}This keeps the auth entry point small and makes the request flow easy to reason about.
Configure Vercel
Create a vercel.json file to configure your Vercel deployment. This example rewrites auth routes to your edge function entrypoint so the browser always talks to /api/auth.
{
"outputDirectory": "dist",
"installCommand": "pnpm install --frozen-lockfile",
"functions": {
"api/**/*.ts": {
"maxDuration": 30
}
},
"rewrites": [
{
"source": "/api/auth/:action",
"destination": "/api/auth"
},
{
"source": "/api/auth/:action/:provider",
"destination": "/api/auth"
}
]
}Use these rewrites to keep all auth requests on the same base path while still allowing multiple auth actions and provider callbacks.
Common Pitfalls
- Keep
basePathaligned with the rewritten route. If your auth endpoint is/api/auth, the auth config should usebasePath: "/api/auth". - Keep the edge handler small. Let Aura Auth handle the request logic and use the edge function only as a bridge.
- Make sure the rewrites and route files agree. If you move the auth handler, update
vercel.jsonand the corresponding edge entrypoint together. - Use the Edge Runtime exclusively for this route. Avoid Node-only APIs in the auth path.