Redirect Mode

Redirect mode sends users to VibeLogin's hosted login page for authentication, then redirects them back to your app with a session. This is the simplest integration path — no forms to build or style.

How it works

1. 1User clicks "Sign in" on your app.
2. 2Your app redirects to VibeLogin's hosted login page at auth.vibelogin.com.
3. 3User signs in or creates an account on the hosted page.
4. 4VibeLogin redirects back to your app with a one-time authorization code.
5. 5Your callback handler exchanges the code for access and refresh tokens, then sets secure HTTP-only cookies.
6. 6The user is now authenticated and can access protected routes.

Two integration tiers

Redirect mode supports two levels of integration. Start with Tier 1 to get auth working fast, then upgrade to Tier 2 when you need richer features.

Tier 1: Minimal (3 files)

The minimal setup requires just three files:

• •Callback handler — app/auth/callback/route.ts
• •Middleware — middleware.ts
• •getSession() in any server component or page

Tier 2: Full Integration (4 files)

Everything from Tier 1, plus a hosted handler that proxies auth requests from your frontend to VibeLogin. Add this single file:

import { createHostedHandler } from "@vibelogin/nextjs/hosted-handler";

const handler = createHostedHandler({
  secretKey: process.env.VIBELOGIN_SECRET_KEY!,
  publishableKey: process.env.VIBELOGIN_PUBLISHABLE_KEY!,
});

export const { GET, POST, PATCH, DELETE } = handler;

This catch-all route proxies auth requests from your frontend to VibeLogin's API. It handles token refresh, user profile fetching, and session management — all without exposing your secret key to the client.

With the hosted handler in place, you unlock:

• •currentUser() — fetch full user profiles in server components
• •VibeAuthProvider + useUser() + useAuth() — client-side hooks for reactive auth state
• •Embedded login forms rendered directly in your app
• •Profile updates, password changes, and account management from the client

Cookie configuration

VibeLogin sets three cookies to manage the auth session. All token cookies are HTTP-only, Secure, and SameSite=Lax by default.

Cross-subdomain setup

If your app runs across multiple subdomains (e.g. app.example.com and admin.example.com), set the cookieDomain option so cookies are shared across all subdomains:

createCallbackHandler({
  secretKey: process.env.VIBELOGIN_SECRET_KEY!,
  cookieDomain: ".example.com",
});

createCallbackHandler reference

createHostedHandler reference