docs / getting-started/react

React quickstart

Use Vulyo components and hooks in a React 19 application.

Before you start

1. Install the SDK

Terminal

1npm install @vulyo/react

2. Add VulyoProvider

src/main.tsx

1import { StrictMode } from "react";2import { createRoot } from "react-dom/client";3import { VulyoProvider } from "@vulyo/react";4import { App } from "./app";56createRoot(document.getElementById("root")!).render(7  <StrictMode>8    <VulyoProvider9      publishableKey={import.meta.env.VITE_VULYO_PUBLISHABLE_KEY}10      proxyUrl="/api/vulyo"11    >12      <App />13    </VulyoProvider>14  </StrictMode>,15);

3. Render a component

src/app.tsx

1import { SignIn } from "@vulyo/react";23export function App() {4  return (5    <SignIn6      signUpUrl="/sign-up"7      fallbackRedirectUrl="/account"8    />9  );10}

4. Read authentication state

src/account-link.tsx

1import { useAuth, useUser } from "@vulyo/react";23export function AccountLink() {4  const { isLoaded, isSignedIn } = useAuth();5  const { user } = useUser();67  if (!isLoaded) return null;8  if (!isSignedIn) return <a href="/sign-in">Sign in</a>;910  return <a href="/account">{user?.displayName ?? user?.email}</a>;11}