Installation

Add the Auther React SDK to your React or Next.js project. Includes AutherProvider, useAuther hook, and automatic session management.

Install

bash

npm install @auther-sdk/react

This installs @auther-sdk/react along with @auther-sdk/frontend as a dependency. React 18+ is required as a peer dependency.

Wrap your app

Add <AutherProvider> at the root of your app (e.g. your layout file in Next.js). Pass your clientId. endpoint is optional and defaults to the Auther production API, so set it only when pointing at a different backend.

You can import it straight into a server layout, as below: the package is marked as client-side, so you do not need a 'use client' wrapper of your own. This needs @auther-sdk/react 1.2.1 or later. Earlier versions shipped without that marking and fail the build with createContext is not a function; upgrading fixes it.

tsx

import { AutherProvider } from '@auther-sdk/react';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AutherProvider
          clientId={process.env.NEXT_PUBLIC_AUTHER_CLIENT_KEY}
          endpoint={`${process.env.NEXT_PUBLIC_AUTHER_ENDPOINT}/api/v1`}
        >
          {children}
        </AutherProvider>
      </body>
    </html>
  );
}

Environment variables

Add these to your .env.local:

bash

NEXT_PUBLIC_AUTHER_CLIENT_KEY=req_live_xxxxxxxxxxxxxxxx
NEXT_PUBLIC_AUTHER_ENDPOINT=https://your-auther-endpoint

What's included

The React SDK bundles everything you need: the auth modal, proactive token refresh (60s before expiry), tab-visibility handling, and a clean useAuther() hook. No extra setup files required.