;
+}
+```
+
+This page checks if a valid session exists. If not signed in → redirects user to `/auth`.
+
+If signed in → displays their `userId` or token payload.
+
+**Initialize SuperTokens (Client Side)**
+
+**File: `src/app/config/supertokens-init.ts`**
+
+```js
+//src/app/config/supertokens-init.ts
+"use client";
+
+
+import SuperTokensReact from "supertokens-auth-react";
+import { frontendConfig } from "./frontend";
+
+
+if (typeof window !== "undefined") {
+ if (!SuperTokensReact.isRecipeInitialized("emailpassword")) {
+ SuperTokensReact.init(frontendConfig());
+ }
+}
+```
+This lightweight script ensures SuperTokens is properly initialized when the app runs in the browser.
+
+**Home Page Links**
+
+**File: `src/app/page.tsx`**
+
+```js
+// src/app/page.tsx
+import Link from "next/link";
+
+
+export default function Home() {
+ return (
+
+
SuperTokens Demo
+
+
Auth UI
+
Protected (client)
+
+
+ );
+}
+```
+
+## **Step 4 -- Configure Environment Variables**
+
+Vercel provides the VERCEL_URL environment variable to the backend, which points to the current URL that the app is deployed on. This enables SuperTokens to work across development, preview, and production environments.
+
+**Local development** configuration in `.env.local`:
+```js
+SUPERTOKENS_CONNECTION_URI=https://try.supertokens.io
+SUPERTOKENS_API_KEY=
+NEXT_PUBLIC_API_DOMAIN=http://localhost:3000
+NEXT_PUBLIC_WEBSITE_DOMAIN=http://localhost:3000
+```
+
+**Production environment** variables in the Vercel dashboard:
+```js
+SUPERTOKENS_CONNECTION_URI=PRODUCTION_CONNECTION_URI
+SUPERTOKENS_API_KEY=your_production_api_key
+NEXT_PUBLIC_API_DOMAIN=https://your-app.vercel.app
+NEXT_PUBLIC_WEBSITE_DOMAIN=https://your-app.vercel.app
+```
+
+For managed SuperTokens hosting, replace the `SUPERTOKENS_CONNECTION_URI` with your dedicated instance URL. Self-hosted deployments require ensuring the SuperTokens Core service is publicly accessible via HTTPS.
+
+**Dynamic URL configuration** for Vercel preview deployments requires using `process.env.VERCEL_URL` in backend configuration:
+
+```js
+appInfo: {
+ apiDomain: process.env.VERCEL_URL
+ ? `https://${process.env.VERCEL_URL}`
+ : process.env.NEXT_PUBLIC_API_DOMAIN,
+ websiteDomain: process.env.VERCEL_URL
+ ? `https://${process.env.VERCEL_URL}`
+ : process.env.NEXT_PUBLIC_WEBSITE_DOMAIN,
+}
+```
+
+## **Step 5 -- Deploy to Vercel**
+
+Vercel deployment follows a straightforward process for Next.js applications with SuperTokens.
+
+
+
+**Prepare for deployment:**
+
+1. Commit all changes to your Git repository:
+```js
+git add .
+git commit -m "Add SuperTokens authentication"
+git push origin main
+```
+2. Navigate to the Vercel dashboard and import your repository
+3. Configure environment variables in Vercel project settings
+4. Deploy the application
+
+**Vercel automatically:**
+
+- Detects the Next.js framework
+- Installs dependencies
+- Builds the application
+- Deploys to serverless infrastructure
+- Generates preview URLs for pull requests
+
+**Important deployment considerations:**
+
+- This only works if the frontend and backend of your application have the same domain. If your backend is hosted separately, configure `apiDomain` to point to your backend server.
+- Ensure CORS configuration allows requests from Vercel preview URLs
+- Verify environment variables are set correctly in the Vercel dashboard
+- Test authentication flows on the preview deployment before promoting to production
+
+## **Step 6 -- Test Auth Flow**
+
+Verify authentication implementation works correctly across all flows.
+
+**Registration flow testing:**
+
+1. Navigate to the `/auth` route in your deployed application
+2. Click \"Sign Up\" and create a new account
+3. Verify email verification flow (if enabled)
+4. Confirm successful redirect after registration
+
+
+
+
+
+
+
+**Session verification:**
+
+Protect API routes by verifying session tokens:
+
+```js
+import { withSession } from "supertokens-node/nextjs";
+import { SessionContainer } from "supertokens-node/recipe/session";
+import { NextRequest, NextResponse } from "next/server";
+
+
+export async function GET(request: NextRequest) {
+ return withSession(
+ request,
+ async (session: SessionContainer | undefined) => {
+ if (!session) {
+ return NextResponse.json(
+ { error: "Unauthorized" },
+ { status: 401 }
+ );
+ }
+
+
+ const userId = session.getUserId();
+
+ return NextResponse.json({
+ message: "Protected data",
+ userId: userId,
+ });
+ }
+ );
+}
+```
+
+**Cookie and session persistence:**
+
+- Verify session cookies are set with the correct security flags
+- Test session persistence across page navigation
+- Confirm that the logout functionality clears the session properly
+- Validate that session refresh works without user interaction
+
+## **Optional: Enable Social or Passwordless Login**
+
+SuperTokens supports multiple authentication methods that can be added or combined according to specific requirements.
+
+**Social login integration** with ThirdPartyEmailPassword:
+
+```js
+import ThirdPartyEmailPassword from "supertokens-node/recipe/thirdpartyemailpassword";
+import Google from "supertokens-node/recipe/thirdpartyemailpassword/providers/google";
+import Github from "supertokens-node/recipe/thirdpartyemailpassword/providers/github";
+
+
+ThirdPartyEmailPassword.init({
+ providers: [
+ Google({
+ clientId: process.env.GOOGLE_CLIENT_ID!,
+ clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+ }),
+ Github({
+ clientId: process.env.GITHUB_CLIENT_ID!,
+ clientSecret: process.env.GITHUB_CLIENT_SECRET!,
+ }),
+ ],
+});
+```
+
+**Passwordless authentication** with magic links or OTP:
+
+```js
+import Passwordless from "supertokens-node/recipe/passwordless";
+
+
+Passwordless.init({
+ contactMethod: "EMAIL_OR_PHONE",
+ flowType: "MAGIC_LINK",
+});
+```
+
+Frontend configuration requires updating recipe initialization to match backend configuration. SuperTokens automatically renders appropriate UI components based on enabled recipes.
+
+## **SuperTokens Features That Work Seamlessly on Vercel**
+
+SuperTokens architecture aligns well with Vercel\'s serverless platform, providing several advantages:
+
+- **Serverless session verification** operates efficiently within Vercel\'s serverless functions, with minimal cold start overhead. Session validation requires only JWT verification or database lookup, completing within milliseconds even on cold starts.
+- **Flexible session management** supports both stateless JWT tokens and stateful database sessions. Stateless tokens eliminate database dependency for session verification, while stateful sessions provide immediate revocation capabilities essential for security-sensitive applications.
+- **Multi-tenant authentication** enables serving multiple customers from a single deployment with tenant-specific authentication configurations, branding, and user bases. This architecture works particularly well with Vercel\'s edge network for global distribution.
+- **Frontend UI theming** provides complete customization of authentication interfaces without requiring custom component development. CSS variables and component overrides enable matching authentication UI to application design systems.
+- **Type-safe claims and user roles** integrate with TypeScript for compile-time type checking of user permissions and session claims, reducing runtime errors and improving developer experience.
+
+## **Limitations & Workarounds**
+
+Understanding platform constraints helps avoid common implementation pitfalls.
+
+- **Cold start latency** affects serverless functions on Vercel\'s free and hobby tiers. SuperTokens API routes experience slight latency during cold starts as the Node.js runtime initializes. Vercel Pro plans reduce cold start frequency through reserved capacity. For critical authentication endpoints, consider keeping functions warm through periodic health check requests.
+- **Edge runtime compatibility** remains limited. SuperTokens relies on Node.js APIs unsupported in Vercel\'s edge runtime, requiring standard serverless API routes rather than edge functions. This limitation affects global latency for authentication operations but typically remains acceptable for most applications.
+- **Self-hosted SuperTokens Core requirements** mandate public HTTPS accessibility. Organizations self-hosting SuperTokens Core must expose the service to the internet or configure VPN connectivity between Vercel deployments and private networks. Managed SuperTokens hosting eliminates these networking concerns.
+- **Preview deployment considerations** require dynamic URL configuration to support Vercel\'s unique preview URLs for each pull request. The `VERCEL_URL` environment variable enables this functionality but requires proper configuration in `appInfo`.
+
+## **Frequently Asked Questions**
+
+- **Can I use the SuperTokens managed service on Vercel?**
+Yes, managed SuperTokens hosting works seamlessly with Vercel deployments. Point `SUPERTOKENS_CONNECTION_URI` to your managed instance URL and configure the API key. Managed hosting eliminates operational overhead while providing production-grade reliability and security.
+- **Can I deploy to Vercel edge functions?**
+Not currently. SuperTokens requires Node.js APIs unavailable in Vercel\'s edge runtime. Use standard serverless API routes, which provide sufficient performance for most authentication workloads while supporting SuperTokens functionality.
+- **How do I handle custom domains?**
+Configure custom domains through Vercel dashboard, then update environment variables to reflect custom domain URLs. Ensure `apiDomain` and `websiteDomain` match your custom domain configuration.
+- **What about database requirements?**
+SuperTokens Core handles user data storage internally. Applications using self-hosted Core need to configure database connectivity (PostgreSQL, MySQL, or MongoDB supported). Managed SuperTokens hosting includes database infrastructure.
+
+## **Conclusion**
+
+SuperTokens integrates naturally with Vercel\'s developer-friendly environment, providing production-ready authentication that scales from prototype to enterprise deployment. The combination delivers secure, customizable authentication in minutes rather than weeks of custom development.
+
+Whether prototyping new features, launching minimum viable products, or scaling to millions of users, SuperTokens on Vercel provides authentication infrastructure that grows with application requirements. The open-source foundation ensures transparency and flexibility, while managed hosting options eliminate operational complexity for teams preferring convenience over infrastructure control.
+
+Start by deploying the example application, test authentication flows thoroughly, and progressively add features as requirements evolve. The modular architecture enables incremental adoption without requiring comprehensive upfront planning or migration efforts.
diff --git a/static/blog-seo/config.json b/static/blog-seo/config.json
index b446f3fd..7da73cc9 100644
--- a/static/blog-seo/config.json
+++ b/static/blog-seo/config.json
@@ -3301,6 +3301,29 @@
"schema": ""
},
{
+ "path": "/blog/supertokens-on-vercel",
+ "metaTags": [
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ " ",
+ "",
+ ""
+ ],
+ "title": "Deploying SuperTokens on Vercel with Next.js",
+ "schema": ""
+ },
+ {
"path": "/blog/biometric-auth",
"metaTags": [
"",
diff --git a/static/blog-seo/sitemapconfig.json b/static/blog-seo/sitemapconfig.json
index 45af9fd1..96dd3a16 100644
--- a/static/blog-seo/sitemapconfig.json
+++ b/static/blog-seo/sitemapconfig.json
@@ -309,6 +309,9 @@
"location": "https://supertokens.com/blog/identity-and-access-management-strategy"
},
{
+ "location": "https://supertokens.com/blog/supertokens-on-vercel"
+ },
+ {
"location": "https://supertokens.com/blog/biometric-auth"
},
{
diff --git a/static/card_covers/supertokens-on-vercel.png b/static/card_covers/supertokens-on-vercel.png
new file mode 100644
index 00000000..27683ca5
Binary files /dev/null and b/static/card_covers/supertokens-on-vercel.png differ
diff --git a/static/covers/supertokens-on-vercel.png b/static/covers/supertokens-on-vercel.png
new file mode 100644
index 00000000..893cd4a9
Binary files /dev/null and b/static/covers/supertokens-on-vercel.png differ