First party fragmentStripe Forms Workflows UploadsAuth

Authentication Fragment

Build sign-up, sign-in, sessions, and admin workflows without rolling your own auth stack.

Install

npm install @fragno-dev/auth @fragno-dev/db

npm install @fragno-dev/auth @fragno-dev/db

Route surface

The core endpoints the fragment exposes.

GET    /me
POST   /sign-up
POST   /sign-in
POST   /sign-out
POST   /change-password
GET    /users
PATCH  /users/:userId/role

GET    /mePOST   /sign-upPOST   /sign-inPOST   /sign-outPOST   /change-passwordGET    /usersPATCH  /users/:userId/role

Users + sessions

Email/password sign-up, sign-in, and sign-out flows with session cookies.

Roles + admin

Built-in user overview and role updates via fragment routes.

Database-backed

Auth data is stored in your database with typed schemas.

Setup blueprint

Server wiring on the left, client hooks on the right.

Create the fragment server

Configure cookie defaults and pass the database adapter.

import { createAuthFragment } from "@fragno-dev/auth";

export const authFragment = createAuthFragment(
  {
    cookieOptions: {
      secure: true,
      sameSite: "lax",
    },
  },
  {
    databaseAdapter,
    mountRoute: "/api/auth",
  },
);

import { createAuthFragment } from "@fragno-dev/auth";export const authFragment = createAuthFragment(  {    cookieOptions: {      secure: true,      sameSite: "lax",    },  },  {    databaseAdapter,    mountRoute: "/api/auth",  },);

Mount routes

Expose auth routes in your framework adapter.

import { authFragment } from "@/lib/auth";

export const handlers = authFragment.handlersFor("react-router");

export const action = handlers.action;
export const loader = handlers.loader;

import { authFragment } from "@/lib/auth";export const handlers = authFragment.handlersFor("react-router");export const action = handlers.action;export const loader = handlers.loader;

Client hooks

Typed hooks cover sign-in, sign-up, sign-out, and user listings.

import { createAuthFragmentClient } from "@fragno-dev/auth/react";

export const authClient = createAuthFragmentClient();

import { createAuthFragmentClient } from "@fragno-dev/auth/react";export const authClient = createAuthFragmentClient();

const { mutate: signIn } = authClient.useSignIn();
const { mutate: signOut } = authClient.useSignOut();
const { data: me } = authClient.useMe();
const { data: users } = authClient.useUsers();

const { mutate: signIn } = authClient.useSignIn();const { mutate: signOut } = authClient.useSignOut();const { data: me } = authClient.useMe();const { data: users } = authClient.useUsers();

Get updates

The auth fragment is in active development. Join the community to shape the roadmap.

Talk to the team

Use cases

Product sign-up

Launch email/password authentication with built-in routes and cookies.

Admin user management

List users and update roles through admin routes.

Session-protected APIs

Use the fragment to secure internal routes with session data.