React - Lucent

Fully automated. Both Vite and CRA are wired up completely by the CLI.

Install with the CLI

npx @lucenthq/cli init luc_pk_...

Pick React when prompted, then choose your build tool.

Vite

Environment variable

.env:

VITE_LUCENT_PUBLIC_KEY=luc_pk_...

Provider component

src/providers.tsx:

import { LucentProvider } from "@lucenthq/sdk/react";
import type { ReactNode } from "react";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <LucentProvider publicKey={import.meta.env.VITE_LUCENT_PUBLIC_KEY}>
      {children}
    </LucentProvider>
  );
}

Wrap the render call

src/main.tsx:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Providers } from "./providers";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Providers><App /></Providers>
  </React.StrictMode>,
);

Create React App

Environment variable

.env:

REACT_APP_LUCENT_PUBLIC_KEY=luc_pk_...

Provider component

src/providers.tsx:

import { LucentProvider } from "@lucenthq/sdk/react";
import type { ReactNode } from "react";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <LucentProvider publicKey={process.env.REACT_APP_LUCENT_PUBLIC_KEY!}>
      {children}
    </LucentProvider>
  );
}

Wrap the render call

src/index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Providers } from './providers';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <Providers><App /></Providers>
  </React.StrictMode>
);

Notes

Env var prefixes differ: Vite uses VITE_, CRA uses REACT_APP_. The CLI picks the right one for you.
The provider wraps the render call in the entrypoint, not inside App.tsx. This keeps it outside of React.StrictMode’s double‑mount behavior so the session isn’t reset on the development reload.

​Install with the CLI

​Vite

​Create React App

​Notes

Install with the CLI

Vite

Create React App

Notes