Embedded Mode

Overview

Embedded mode renders the login form directly on your site instead of redirecting to VibeLogin's hosted page. Users never leave your domain.

Prerequisites

Tier 2 setup required (hosted handler at /api/auth/[...all]/route.ts)
See Redirect Mode docs for setup

Setup

// app/login/page.tsx
import { VibeLogin } from "@vibelogin/nextjs/components";

export default function LoginPage() {
  return (
    <VibeLogin
      slug="your-project-slug"
      mode="embedded"
      redirectAfterLogin="/dashboard"
    />
  );
}

What works in embedded mode

Email/password sign-in and sign-up
Sign out
Profile update
Password change
Session hydration via VibeAuthProvider

What requires redirect mode

Not available in embedded mode

These features require redirect mode (mode="redirect"):

Magic links
Password reset
Email verification
OAuth (Google, GitHub)

VibeLogin component reference

Prop	Type	Default	Description
slug	string	required	Project's oauthSlug
mode	"redirect" \| "embedded"	"redirect"	Auth mode
authUrl	string	"https://auth.vibelogin.com"	Hosted login page URL
callbackPath	string	"/auth/callback"	Callback route path
redirectAfterLogin	string	"/"	Where to go after login
onSuccess	(user: any) => void	—	Embedded mode callback
label	string	"Sign in with VibeLogin"	Button text (redirect mode)
as	"link" \| "button"	"button"	Element type (redirect mode)
className	string	—	CSS class
style	CSSProperties	—	Inline styles
basePath	string	"/api/auth"	Auth proxy path (embedded)

Styling

The embedded form uses minimal default styling. Override with className or style props. The form auto-generates sign-in and sign-up views with a toggle.

onSuccess callback

<VibeLogin
  slug="my-app"
  mode="embedded"
  onSuccess={(user) => {
    console.log("Logged in:", user);
    router.push("/dashboard");
  }}
/>