VibeLogin
Back to site

Quickstart — Ship auth in 5 minutes

Get authentication running in your Next.js app with VibeLogin's hosted login page. No forms to build, no password hashing — just install, configure, and ship.

Prerequisites

  • •Next.js 14+ with App Router
  • •Node.js 18+
  • •A VibeLogin account — sign up here

Step 1: Create a project

Head to app.vibelogin.com and create an account. Once you're in, create a new project and copy the three values you'll need:

  • •Publishable key — starts with pk_live_
  • •Secret key — starts with sk_live_
  • •Project ID — a UUID identifying your project

Step 2: Install the SDK

Terminal
npm install @vibelogin/nextjs

Step 3: Set environment variables

Add these to your .env.local file:

.env.local
VIBELOGIN_SECRET_KEY=sk_live_xxxxx
VIBELOGIN_PROJECT_ID=your-project-uuid

# Only needed for Tier 2 / embedded mode:
# VIBELOGIN_PUBLISHABLE_KEY=pk_live_xxxxx

# Optional — defaults to https://api.vibelogin.com
# VIBELOGIN_API_URL=https://api.vibelogin.com
VariableRequiredDefaultDescription
VIBELOGIN_SECRET_KEYYes—Server-side key used to exchange auth codes and validate tokens
VIBELOGIN_PUBLISHABLE_KEYTier 2 only—Client-safe key for the proxy handler (Tier 2 / embedded mode). Not needed for basic redirect setup.
VIBELOGIN_PROJECT_IDYes—UUID of your project, found in the dashboard
VIBELOGIN_API_URLNohttps://api.vibelogin.comOverride the API base URL (useful for self-hosted or staging)

Step 4: Add the callback handler

app/auth/callback/route.ts
import { createCallbackHandler } from "@vibelogin/nextjs/hosted-callback";

export const { GET } = createCallbackHandler({
  secretKey: process.env.VIBELOGIN_SECRET_KEY!,
});

This route handles the redirect after login. When VibeLogin sends the user back to your app with a one-time authorization code, this handler exchanges it for access and refresh tokens, then sets secure HTTP-only cookies so the session persists across requests.

Step 5: Add middleware

middleware.ts
import { hostedAuthMiddleware } from "@vibelogin/nextjs/hosted-middleware";

export default hostedAuthMiddleware({
  projectId: process.env.VIBELOGIN_PROJECT_ID!,
  publicRoutes: ["/", "/pricing"],
});

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

The middleware protects all routes by default. Any route not listed in publicRoutes will require a valid session — unauthenticated visitors get redirected to your VibeLogin hosted login page automatically.

Step 6: Read the session

app/dashboard/page.tsx
import { redirect } from "next/navigation";
import { createHostedServerHelpers } from "@vibelogin/nextjs/hosted-server";

const { getSession } = createHostedServerHelpers({
  projectId: process.env.VIBELOGIN_PROJECT_ID!,
});

export default async function Dashboard() {
  const session = await getSession();
  if (!session) redirect("/");
  return <h1>Welcome! Your role is {session.role}</h1>;
}

getSession() validates the JWT locally using your project's JWKS endpoint — no network call on every request. It returns an object with userId, sessionId, role, and expiresAt.

Step 7: Add a login button

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

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

This renders a "Sign in with VibeLogin" button. Clicking it redirects the user to your hosted login page at auth.vibelogin.com/your-project-slug.

Test it

  1. Run npm run dev
  2. Visit localhost:3000
  3. Click the login button
  4. Sign up on the hosted login page
  5. You'll be redirected back to /dashboard with an active session

Next steps