React quickstart

Add Authfyio to any React app (Vite, CRA, Remix, RedwoodJS) — a single provider plus hooks, no middleware required.

Copy this quickstart guide as a prompt for LLMs to implement Authfyio in your application.

1. Install

npm install authfyio-react

2. Wrap your app

src/main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { AuthfyioProvider } from 'authfyio-react';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AuthfyioProvider baseUrl={"https://api.authfyio.com"}>
      <App />
    </AuthfyioProvider>
  </StrictMode>,
);

3. Use hooks and components

import { SignedIn, SignedOut, useUser, useAuth, SignOutButton } from 'authfyio-react';

export default function App() {
  const auth = useAuth();
  const { isLoaded, user } = useUser();

  return (
    <>
      <SignedIn>
        {isLoaded ? (
          <div>
            <h1>Hi, {user?.firstName ?? user?.email ?? 'friend'}!</h1>
            <small>session {auth.sessionId}</small>
            <SignOutButton redirectUrl="/" />
          </div>
        ) : (
          <p>Loading…</p>
        )}
      </SignedIn>
      <SignedOut>
        <a href="/sign-in">Sign in</a>
      </SignedOut>
    </>
  );
}

4. Cross-origin cookies

If your React app and the Authfyio API are on different domains, the instance API must run with AF_COOKIE_SECURE=true, your CORS origins must include your app, and every fetch must carry credentials: "include". authfyio-react does that automatically for its own calls; for your own fetches, pass it.

Refresh is automatic

The provider schedules a POST /v1/auth/sessions/refresh a few seconds before __session's JWT expires (60s TTL by default). You can disable with <AuthfyioProvider autoRefresh={false}> if you want to run the timer yourself.

← Previous

Next.js quickstart

Express quickstart