Skip to main content

Auth Quick Start

What This Is

A fast setup path for Sign in with Lovelace using @lovelace-ai/auth-react and @lovelace-ai/auth-nextjs.

Who This Is For

Developers who want a working integration first, then deeper customization.

What You Will Finish With

  • AuthProvider integration.
  • Top app-bar sign-in control.
  • Server verification route.

Step 1: Set Client ID

bash
NEXT_PUBLIC_LOVELACE_OAUTH_CLIENT_ID=<registered-client-id>

Step 2: Wrap App in Provider

tsx
"use client";

import type { ReactNode } from "react";
import {
  AuthProvider,
  assertLovelaceClientIdConfigured,
} from "@lovelace-ai/auth-react";

export function AppProviders({ children }: { children: ReactNode }) {
  assertLovelaceClientIdConfigured();
  return <AuthProvider>{children}</AuthProvider>;
}

Step 3: Add App-Bar Auth Action

tsx
"use client";

import { useLovelaceSignIn } from "@lovelace-ai/auth-react";

export function AppBarAuthAction() {
  const auth = useLovelaceSignIn();

  if (auth.status === "loading")
    return <button disabled>Checking session</button>;
  if (auth.status === "authenticated") {
    return <button onClick={() => void auth.signOut()}>Sign out</button>;
  }

  return <button onClick={() => auth.signIn()}>Sign in</button>;
}

Step 4: Add Verification Route

ts
import { createLovelaceSignInRoute } from "@lovelace-ai/auth-nextjs/server";

export const POST = createLovelaceSignInRoute({
  audience: process.env.NEXT_PUBLIC_LOVELACE_OAUTH_CLIENT_ID,
  sessionDurationSeconds: 60 * 60 * 24 * 7,
});

Next