Embedded Mode

Overview

Embedded mode renders login forms directly on your site instead of redirecting to VibeLogin's hosted page. Users never leave your domain. The <VibeLogin /> component auto-detects which auth methods are enabled in your project and renders them as tabs.

Prerequisites

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

Setup

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

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

That's it. The component fetches your project config on mount and renders the right auth methods automatically. No mode prop needed.

What works in embedded mode

• Email/password sign-in and sign-up
• Magic link sign-in (sends email, user clicks link to verify)
• Email OTP sign-in (sends 6-digit code, user enters it inline)
• Password reset (forgot password flow, inline)
• Google & GitHub OAuth (buttons redirect to provider — that's how OAuth works)
• Password policy enforcement with inline hints
• Session hydration via VibeAuthProvider

How auth methods render

The component reads your project's authMethods config and adapts the UI:

• One method enabled — renders that method directly, no tabs
• Multiple methods — renders tabs (e.g. "Password", "Magic link", "Email code")
• OAuth providers — always renders as buttons below the email form, regardless of which email methods are enabled

Landing pages for email links

Magic links, password resets, and email verification send links that point back to your app. You need landing pages to handle these:

// app/auth/magic-link/verify/page.tsx
"use client";
import { Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { MagicLinkVerifyHandler } from "@vibelogin/nextjs/components";

function VerifyHandler() {
  const params = useSearchParams();
  return <MagicLinkVerifyHandler token={params.get("token") || ""} />;
}

export default function Page() {
  return <Suspense><VerifyHandler /></Suspense>;
}

// app/auth/reset-password/page.tsx
"use client";
import { Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { ResetPasswordForm } from "@vibelogin/nextjs/components";

function ResetForm() {
  const params = useSearchParams();
  return <ResetPasswordForm token={params.get("token") || ""} />;
}

export default function Page() {
  return <Suspense><ResetForm /></Suspense>;
}

// app/auth/verify-email/page.tsx
"use client";
import { Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { VerifyEmailHandler } from "@vibelogin/nextjs/components";

function VerifyHandler() {
  const params = useSearchParams();
  return <VerifyEmailHandler token={params.get("token") || ""} />;
}

export default function Page() {
  return <Suspense><VerifyHandler /></Suspense>;
}

VibeLogin component reference

Styling

The component uses minimal default dark-theme styling. Override with className or style props. If your project has branding configured (primary color), the component uses it for submit buttons and active tab indicators.

onSuccess callback

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

When onSuccess is provided, the component calls it instead of redirecting. This lets you control navigation programmatically.

Helper components

The SDK also exports standalone components for specific flows. These are used internally by <VibeLogin /> but you can use them directly if you need custom layouts: