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
AuthProviderintegration.- 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,
});