@seamless-auth/react 0.0.1

package/README.md

@@ -0,0 +1,129 @@
+[![npm version](https://img.shields.io/npm/v/@seamless-auth/react.svg?label=%40seamless-auth%2Freact)](https://www.npmjs.com/package/@seamless-auth/react)
+
+# Seamless Auth React
+
+A drop-in authentication provider for React applications, designed to handle login, multi-factor authentication, passkeys, and user session validation using your own backend.
+
+## Features
+
+- Provides `AuthProvider` context
+- Includes `useAuth()` hook for access to auth state and actions
+- Ships with pre-built login, MFA, and passkey routes
+- Lets consumer apps handle routing via `react-router-dom`
+- Supports automatic session validation on load
+
+---
+
+## Installation
+
+```bash
+npm install seamless-auth-react
+```
+
+---
+
+## Usage
+
+### 1. Wrap your app with `AuthProvider`
+
+```tsx
+import { AuthProvider } from "seamless-auth-react";
+import { BrowserRouter } from "react-router-dom";
+
+<BrowserRouter>
+  <AuthProvider apiHost="https://your.api/">
+    <AppRoutes />
+  </AuthProvider>
+</BrowserRouter>;
+```
+
+### 2. Use `useAuth()` to access auth state
+
+```tsx
+import { useAuth } from "seamless-auth-react";
+
+const Dashboard = () => {
+  const { user, logout } = useAuth();
+  return (
+    <div>
+      Welcome, {user?.email}
+      <button onClick={logout}>Logout</button>
+    </div>
+  );
+};
+```
+
+### 3. Use `<AuthRoutes />` for handling login/mfa/passkey screens
+
+```tsx
+import { Routes, Route } from "react-router-dom";
+import { useAuth, AuthRoutes } from "seamless-auth-react";
+
+const AppRoutes = () => {
+  const { isAuthenticated } = useAuth();
+
+  return (
+    <Routes>
+      {isAuthenticated ? (
+        <Route path="*" element={<Dashboard />} />
+      ) : (
+        <Route path="*" element={<AuthRoutes />} />
+      )}
+    </Routes>
+  );
+};
+```
+
+> Note: You are responsible for handling route protection and redirects based on `isAuthenticated`.
+
+---
+
+## AuthContext API
+
+### `useAuth()` returns:
+
+```ts
+{
+  user: { email: string, roles?: string[] } | null;
+  isAuthenticated: boolean;
+  logout(): Promise<void>;
+  deleteUser(): Promise<void>;
+  hasRole(role: string): boolean | undefined;
+}
+```
+
+---
+
+## Auth Routes Included
+
+- `/login`
+- `/mfaLogin`
+- `/passKeyLogin`
+- `/registerPasskey`
+- `/verifyOTP`
+
+Each route includes a pre-built UI and expects your backend to expose compatible endpoints.
+
+---
+
+## Customization
+
+You can override the included UI screens by:
+
+- Copying the component source from the package
+- Creating your own version
+- Replacing the component in your app
+
+---
+
+## Notes
+
+- This package **does not** create its own `<BrowserRouter>` or `<Routes>`.
+- It is designed to be fully compatible with your existing routing tree.
+- The `AuthProvider` automatically calls `/users/me` on load to validate session.
+
+---
+
+## License
+
+MIT

package/dist/AuthProvider.d.ts

@@ -0,0 +1,31 @@
+import React, { ReactNode } from "react";
+interface User {
+    id: string;
+    email: string;
+    phone: string;
+    roles?: string[];
+}
+type AuthToken = {
+    oneTimeToken: string;
+    expiresAt: string;
+};
+export interface AuthContextType {
+    user: User | null;
+    logout: () => void;
+    deleteUser: () => void;
+    isAuthenticated: boolean;
+    hasRole: (role: string) => boolean | undefined;
+    apiHost: string;
+    token: AuthToken | null;
+}
+/**
+ * Returns the current context
+ * @returns {AuthContextType} AuthContext
+ */
+export declare const useAuth: () => AuthContextType;
+interface AuthProviderProps {
+    children: ReactNode;
+    apiHost: string;
+}
+export declare const AuthProvider: React.FC<AuthProviderProps>;
+export {};

package/dist/AuthRoutes.d.ts

@@ -0,0 +1 @@
+export declare const AuthRoutes: () => import("react/jsx-runtime").JSX.Element;

package/dist/LoadingSpinner.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const LoadingSpinner: React.FC;
+export default LoadingSpinner;

package/dist/Login.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Login: React.FC;
+export default Login;

package/dist/MfaLogin.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const MfaLogin: React.FC;
+export default MfaLogin;

package/dist/PassKeyLogin.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const PassKeyLogin: React.FC;
+export default PassKeyLogin;

package/dist/RegisterPassKey.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const RegisterPasskey: React.FC;
+export default RegisterPasskey;

package/dist/TermsModal.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface TermsModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+declare const TermsModal: React.FC<TermsModalProps>;
+export default TermsModal;

package/dist/VerifyAccount.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface ResetPasswordProps {
+    apiHost: string;
+    setLoading(value: boolean): void;
+    validateToken(): void;
+}
+declare const VerifyAccount: React.FC<ResetPasswordProps>;
+export default VerifyAccount;

package/dist/VerifyOTP.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const VerifyOTP: React.FC;
+export default VerifyOTP;

package/dist/context/InternalAuthContext.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, ReactNode, SetStateAction } from "react";
+interface InternalAuthContextType {
+    validateToken: () => Promise<void>;
+    setLoading: Dispatch<SetStateAction<boolean>>;
+}
+export declare const InternalAuthProvider: ({ value, children, }: {
+    value: InternalAuthContextType;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useInternalAuth: () => InternalAuthContextType;
+export {};

package/dist/fetchWithAuth.d.ts

@@ -0,0 +1 @@
+export declare const fetchWithAuth: (input: RequestInfo, init?: RequestInit) => Promise<Response>;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { AuthRoutes } from "AuthRoutes";
+import { AuthProvider, useAuth } from "./AuthProvider";
+export { AuthProvider, AuthRoutes, useAuth };