@deadragdoll/auth-flow

Internal React package for session-based authentication UI.

What it provides

• auth provider and auth state hooks;
• route guards for protected and public-only pages;
• login page component;
• redirect helpers for login and logout flows;
• package CSS for auth screens.

Peer dependencies

• react
• react-dom
• react-router
• react-router-dom
• @apollo/client
• graphql

Installation

yarn add @deadragdoll/auth-flow

Import styles once:

import "@deadragdoll/auth-flow/style.css";

Minimal usage

import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client/core";
import { ApolloProvider } from "@apollo/client/react";
import { AuthProvider } from "@deadragdoll/auth-flow";

const client = new ApolloClient({
  link: new HttpLink({
    uri: "/api/graphql",
    credentials: "include"
  }),
  cache: new InMemoryCache()
});

const authConfig = {
  appName: "Workbench",
  appVersion: "1.0.0",
  baseUrl: "/",
  loginPath: "/login",
  homePath: "/",
  loginUrl: "/api/auth/login",
  logoutUrl: "/api/auth/logout",
  authMePollIntervalMs: 300000
};

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <ApolloProvider client={client}>
      <AuthProvider config={authConfig}>{children}</AuthProvider>
    </ApolloProvider>
  );
}

Route example

import { createBrowserRouter } from "react-router-dom";
import { AuthGate, LoginPage, ProtectedRoute, PublicOnlyRoute } from "@deadragdoll/auth-flow";

export const router = createBrowserRouter([
  {
    path: "/login",
    element: (
      <PublicOnlyRoute>
        <LoginPage />
      </PublicOnlyRoute>
    )
  },
  {
    element: <AuthGate />,
    children: [
      {
        path: "/",
        element: (
          <ProtectedRoute>
            <div>Private area</div>
          </ProtectedRoute>
        )
      }
    ]
  }
]);

Main exports

• AuthProvider
• AuthGate
• ProtectedRoute
• PublicOnlyRoute
• LoginPage
• useAuth
• useAuthConfig
• useCurrentUser
• useIsAuthenticated
• useIsAuthInitialized
• useIsAuthChecking
• useAuthStatus
• useAuthError
• buildPublicLoginUrl
• redirectToLogin
• redirectToLogout