@dravyn/auth-js 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,87 @@
+import React from 'react';
+
+/**
+ * @dravyn/auth-js — Client SDK
+ *
+ * Drop-in auth state for React / Next.js projects.
+ *
+ * Usage:
+ *   // 1. Wrap your app
+ *   import { AuthProvider } from '@dravyn/auth-js'
+ *   <AuthProvider apiBase="https://api.dravyn.it.com"><App /></AuthProvider>
+ *
+ *   // 2. Use anywhere inside the tree
+ *   import { useAuth } from '@dravyn/auth-js'
+ *   const { user, login, logout, isLoading } = useAuth()
+ *
+ *   // 3. Protect routes
+ *   import { ProtectedRoute } from '@dravyn/auth-js'
+ *   <ProtectedRoute><Dashboard /></ProtectedRoute>
+ */
+
+interface AuthUser {
+    id: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    name: string;
+    avatar?: string;
+    role: 'user' | 'admin';
+    verified: boolean;
+    createdAt: string;
+}
+interface AuthState {
+    user: AuthUser | null;
+    token: string | null;
+    isLoading: boolean;
+    isLoggedIn: boolean;
+}
+interface LoginPayload {
+    email: string;
+    password: string;
+}
+interface AuthResponse {
+    accessToken: string;
+    refreshToken: string;
+    user: AuthUser;
+}
+interface AuthContextValue extends AuthState {
+    /** Sign in with email + password */
+    login: (payload: LoginPayload) => Promise<AuthResponse>;
+    /** Sign out and clear session */
+    logout: () => Promise<void>;
+    /** Manually set user (e.g. after OAuth callback) */
+    setUser: (user: AuthUser, token: string) => void;
+    /** Silently refresh the access token */
+    refreshToken: () => Promise<string | null>;
+    /** The API base URL this provider was configured with */
+    apiBase: string;
+}
+interface AuthProviderProps {
+    children: React.ReactNode;
+    /** Your Dravyn Auth API base URL */
+    apiBase?: string;
+    /** Where to redirect on logout */
+    loginPath?: string;
+}
+declare const AuthProvider: React.FC<AuthProviderProps>;
+declare function useAuth(): AuthContextValue;
+interface ProtectedRouteProps {
+    children: React.ReactNode;
+    /** Where to redirect unauthenticated users — default '/auth/login' */
+    redirectTo?: string;
+    /** Show this while auth state is loading — default null (nothing) */
+    loadingFallback?: React.ReactNode;
+    /** Required role — if set, redirects users without the role */
+    requiredRole?: 'admin' | 'user';
+    /** Where to redirect users who don't have the required role */
+    unauthorizedRedirect?: string;
+}
+declare const ProtectedRoute: React.FC<ProtectedRouteProps>;
+declare function withAuth<P extends object>(Component: React.ComponentType<P & {
+    user: AuthUser;
+}>, options?: {
+    redirectTo?: string;
+}): React.FC<P>;
+
+export { type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthResponse, type AuthState, type AuthUser, type LoginPayload, ProtectedRoute, type ProtectedRouteProps, useAuth, withAuth };

package/dist/index.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+
+/**
+ * @dravyn/auth-js — Client SDK
+ *
+ * Drop-in auth state for React / Next.js projects.
+ *
+ * Usage:
+ *   // 1. Wrap your app
+ *   import { AuthProvider } from '@dravyn/auth-js'
+ *   <AuthProvider apiBase="https://api.dravyn.it.com"><App /></AuthProvider>
+ *
+ *   // 2. Use anywhere inside the tree
+ *   import { useAuth } from '@dravyn/auth-js'
+ *   const { user, login, logout, isLoading } = useAuth()
+ *
+ *   // 3. Protect routes
+ *   import { ProtectedRoute } from '@dravyn/auth-js'
+ *   <ProtectedRoute><Dashboard /></ProtectedRoute>
+ */
+
+interface AuthUser {
+    id: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    name: string;
+    avatar?: string;
+    role: 'user' | 'admin';
+    verified: boolean;
+    createdAt: string;
+}
+interface AuthState {
+    user: AuthUser | null;
+    token: string | null;
+    isLoading: boolean;
+    isLoggedIn: boolean;
+}
+interface LoginPayload {
+    email: string;
+    password: string;
+}
+interface AuthResponse {
+    accessToken: string;
+    refreshToken: string;
+    user: AuthUser;
+}
+interface AuthContextValue extends AuthState {
+    /** Sign in with email + password */
+    login: (payload: LoginPayload) => Promise<AuthResponse>;
+    /** Sign out and clear session */
+    logout: () => Promise<void>;
+    /** Manually set user (e.g. after OAuth callback) */
+    setUser: (user: AuthUser, token: string) => void;
+    /** Silently refresh the access token */
+    refreshToken: () => Promise<string | null>;
+    /** The API base URL this provider was configured with */
+    apiBase: string;
+}
+interface AuthProviderProps {
+    children: React.ReactNode;
+    /** Your Dravyn Auth API base URL */
+    apiBase?: string;
+    /** Where to redirect on logout */
+    loginPath?: string;
+}
+declare const AuthProvider: React.FC<AuthProviderProps>;
+declare function useAuth(): AuthContextValue;
+interface ProtectedRouteProps {
+    children: React.ReactNode;
+    /** Where to redirect unauthenticated users — default '/auth/login' */
+    redirectTo?: string;
+    /** Show this while auth state is loading — default null (nothing) */
+    loadingFallback?: React.ReactNode;
+    /** Required role — if set, redirects users without the role */
+    requiredRole?: 'admin' | 'user';
+    /** Where to redirect users who don't have the required role */
+    unauthorizedRedirect?: string;
+}
+declare const ProtectedRoute: React.FC<ProtectedRouteProps>;
+declare function withAuth<P extends object>(Component: React.ComponentType<P & {
+    user: AuthUser;
+}>, options?: {
+    redirectTo?: string;
+}): React.FC<P>;
+
+export { type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthResponse, type AuthState, type AuthUser, type LoginPayload, ProtectedRoute, type ProtectedRouteProps, useAuth, withAuth };

package/dist/index.js

@@ -0,0 +1,217 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  AuthProvider: () => AuthProvider,
+  ProtectedRoute: () => ProtectedRoute,
+  useAuth: () => useAuth,
+  withAuth: () => withAuth
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = __toESM(require("react"));
+var AuthContext = import_react.default.createContext(null);
+var STORAGE_TOKEN = "dravyn_token";
+var STORAGE_REFRESH = "dravyn_refresh";
+var STORAGE_USER = "dravyn_user";
+function readStorage() {
+  if (typeof window === "undefined") return { token: null, user: null };
+  try {
+    const token = localStorage.getItem(STORAGE_TOKEN);
+    const raw = localStorage.getItem(STORAGE_USER);
+    const user = raw ? JSON.parse(raw) : null;
+    return { token, user };
+  } catch {
+    return { token: null, user: null };
+  }
+}
+function writeStorage(token, refreshToken, user) {
+  localStorage.setItem(STORAGE_TOKEN, token);
+  localStorage.setItem(STORAGE_REFRESH, refreshToken);
+  localStorage.setItem(STORAGE_USER, JSON.stringify(user));
+}
+function clearStorage() {
+  localStorage.removeItem(STORAGE_TOKEN);
+  localStorage.removeItem(STORAGE_REFRESH);
+  localStorage.removeItem(STORAGE_USER);
+}
+var AuthProvider = ({
+  children,
+  apiBase = process.env.NEXT_PUBLIC_AUTH_API_URL ?? "http://localhost:3001",
+  loginPath = "/auth/login"
+}) => {
+  const [user, setUserState] = import_react.default.useState(null);
+  const [token, setTokenState] = import_react.default.useState(null);
+  const [isLoading, setIsLoading] = import_react.default.useState(true);
+  import_react.default.useEffect(() => {
+    const { token: t, user: u } = readStorage();
+    if (t && u) {
+      setTokenState(t);
+      setUserState(u);
+    }
+    setIsLoading(false);
+  }, []);
+  import_react.default.useEffect(() => {
+    if (!token) return;
+    const original = window.fetch;
+    window.fetch = (input, init = {}) => {
+      const url = typeof input === "string" ? input : input.url;
+      if (url.startsWith(apiBase)) {
+        init.headers = {
+          ...init.headers,
+          Authorization: `Bearer ${token}`
+        };
+      }
+      return original(input, init);
+    };
+    return () => {
+      window.fetch = original;
+    };
+  }, [token, apiBase]);
+  const login = import_react.default.useCallback(async (payload) => {
+    const res = await fetch(`${apiBase}/auth/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload)
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.message ?? "Login failed");
+    }
+    const data = await res.json();
+    writeStorage(data.accessToken, data.refreshToken, data.user);
+    setTokenState(data.accessToken);
+    setUserState(data.user);
+    return data;
+  }, [apiBase]);
+  const logout = import_react.default.useCallback(async () => {
+    try {
+      const refresh = localStorage.getItem(STORAGE_REFRESH);
+      await fetch(`${apiBase}/auth/logout`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify({ refreshToken: refresh })
+      });
+    } catch {
+    }
+    clearStorage();
+    setTokenState(null);
+    setUserState(null);
+    window.location.href = loginPath;
+  }, [apiBase, token, loginPath]);
+  const setUser = import_react.default.useCallback((u, t) => {
+    setUserState(u);
+    setTokenState(t);
+  }, []);
+  const refreshToken = import_react.default.useCallback(async () => {
+    try {
+      const refresh = localStorage.getItem(STORAGE_REFRESH);
+      if (!refresh) return null;
+      const res = await fetch(`${apiBase}/auth/refresh`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ refreshToken: refresh })
+      });
+      if (!res.ok) {
+        await logout();
+        return null;
+      }
+      const data = await res.json();
+      localStorage.setItem(STORAGE_TOKEN, data.accessToken);
+      setTokenState(data.accessToken);
+      return data.accessToken;
+    } catch {
+      return null;
+    }
+  }, [apiBase, logout]);
+  const value = {
+    user,
+    token,
+    isLoading,
+    isLoggedIn: !!user && !!token,
+    login,
+    logout,
+    setUser,
+    refreshToken,
+    apiBase
+  };
+  return /* @__PURE__ */ import_react.default.createElement(AuthContext.Provider, { value }, children);
+};
+function useAuth() {
+  const ctx = import_react.default.useContext(AuthContext);
+  if (!ctx) {
+    throw new Error(
+      "useAuth() must be called inside an <AuthProvider>. Wrap your app (or layout.tsx) with <AuthProvider>."
+    );
+  }
+  return ctx;
+}
+var ProtectedRoute = ({
+  children,
+  redirectTo = "/auth/login",
+  loadingFallback = null,
+  requiredRole,
+  unauthorizedRedirect = "/"
+}) => {
+  const { isLoggedIn, isLoading, user } = useAuth();
+  import_react.default.useEffect(() => {
+    if (isLoading) return;
+    if (!isLoggedIn) {
+      window.location.href = `${redirectTo}?next=${encodeURIComponent(window.location.pathname)}`;
+      return;
+    }
+    if (requiredRole && user?.role !== requiredRole) {
+      window.location.href = unauthorizedRedirect;
+    }
+  }, [isLoading, isLoggedIn, user, redirectTo, requiredRole, unauthorizedRedirect]);
+  if (isLoading) return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, loadingFallback);
+  if (!isLoggedIn) return null;
+  if (requiredRole && user?.role !== requiredRole) return null;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
+};
+function withAuth(Component, options = {}) {
+  const WrappedComponent = (props) => {
+    const { user } = useAuth();
+    return /* @__PURE__ */ import_react.default.createElement(ProtectedRoute, { redirectTo: options.redirectTo }, user && /* @__PURE__ */ import_react.default.createElement(Component, { ...props, user }));
+  };
+  WrappedComponent.displayName = `withAuth(${Component.displayName ?? Component.name})`;
+  return WrappedComponent;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthProvider,
+  ProtectedRoute,
+  useAuth,
+  withAuth
+});

package/dist/index.mjs

@@ -0,0 +1,180 @@
+"use client";
+
+// src/index.tsx
+import React from "react";
+var AuthContext = React.createContext(null);
+var STORAGE_TOKEN = "dravyn_token";
+var STORAGE_REFRESH = "dravyn_refresh";
+var STORAGE_USER = "dravyn_user";
+function readStorage() {
+  if (typeof window === "undefined") return { token: null, user: null };
+  try {
+    const token = localStorage.getItem(STORAGE_TOKEN);
+    const raw = localStorage.getItem(STORAGE_USER);
+    const user = raw ? JSON.parse(raw) : null;
+    return { token, user };
+  } catch {
+    return { token: null, user: null };
+  }
+}
+function writeStorage(token, refreshToken, user) {
+  localStorage.setItem(STORAGE_TOKEN, token);
+  localStorage.setItem(STORAGE_REFRESH, refreshToken);
+  localStorage.setItem(STORAGE_USER, JSON.stringify(user));
+}
+function clearStorage() {
+  localStorage.removeItem(STORAGE_TOKEN);
+  localStorage.removeItem(STORAGE_REFRESH);
+  localStorage.removeItem(STORAGE_USER);
+}
+var AuthProvider = ({
+  children,
+  apiBase = process.env.NEXT_PUBLIC_AUTH_API_URL ?? "http://localhost:3001",
+  loginPath = "/auth/login"
+}) => {
+  const [user, setUserState] = React.useState(null);
+  const [token, setTokenState] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    const { token: t, user: u } = readStorage();
+    if (t && u) {
+      setTokenState(t);
+      setUserState(u);
+    }
+    setIsLoading(false);
+  }, []);
+  React.useEffect(() => {
+    if (!token) return;
+    const original = window.fetch;
+    window.fetch = (input, init = {}) => {
+      const url = typeof input === "string" ? input : input.url;
+      if (url.startsWith(apiBase)) {
+        init.headers = {
+          ...init.headers,
+          Authorization: `Bearer ${token}`
+        };
+      }
+      return original(input, init);
+    };
+    return () => {
+      window.fetch = original;
+    };
+  }, [token, apiBase]);
+  const login = React.useCallback(async (payload) => {
+    const res = await fetch(`${apiBase}/auth/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload)
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.message ?? "Login failed");
+    }
+    const data = await res.json();
+    writeStorage(data.accessToken, data.refreshToken, data.user);
+    setTokenState(data.accessToken);
+    setUserState(data.user);
+    return data;
+  }, [apiBase]);
+  const logout = React.useCallback(async () => {
+    try {
+      const refresh = localStorage.getItem(STORAGE_REFRESH);
+      await fetch(`${apiBase}/auth/logout`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify({ refreshToken: refresh })
+      });
+    } catch {
+    }
+    clearStorage();
+    setTokenState(null);
+    setUserState(null);
+    window.location.href = loginPath;
+  }, [apiBase, token, loginPath]);
+  const setUser = React.useCallback((u, t) => {
+    setUserState(u);
+    setTokenState(t);
+  }, []);
+  const refreshToken = React.useCallback(async () => {
+    try {
+      const refresh = localStorage.getItem(STORAGE_REFRESH);
+      if (!refresh) return null;
+      const res = await fetch(`${apiBase}/auth/refresh`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ refreshToken: refresh })
+      });
+      if (!res.ok) {
+        await logout();
+        return null;
+      }
+      const data = await res.json();
+      localStorage.setItem(STORAGE_TOKEN, data.accessToken);
+      setTokenState(data.accessToken);
+      return data.accessToken;
+    } catch {
+      return null;
+    }
+  }, [apiBase, logout]);
+  const value = {
+    user,
+    token,
+    isLoading,
+    isLoggedIn: !!user && !!token,
+    login,
+    logout,
+    setUser,
+    refreshToken,
+    apiBase
+  };
+  return /* @__PURE__ */ React.createElement(AuthContext.Provider, { value }, children);
+};
+function useAuth() {
+  const ctx = React.useContext(AuthContext);
+  if (!ctx) {
+    throw new Error(
+      "useAuth() must be called inside an <AuthProvider>. Wrap your app (or layout.tsx) with <AuthProvider>."
+    );
+  }
+  return ctx;
+}
+var ProtectedRoute = ({
+  children,
+  redirectTo = "/auth/login",
+  loadingFallback = null,
+  requiredRole,
+  unauthorizedRedirect = "/"
+}) => {
+  const { isLoggedIn, isLoading, user } = useAuth();
+  React.useEffect(() => {
+    if (isLoading) return;
+    if (!isLoggedIn) {
+      window.location.href = `${redirectTo}?next=${encodeURIComponent(window.location.pathname)}`;
+      return;
+    }
+    if (requiredRole && user?.role !== requiredRole) {
+      window.location.href = unauthorizedRedirect;
+    }
+  }, [isLoading, isLoggedIn, user, redirectTo, requiredRole, unauthorizedRedirect]);
+  if (isLoading) return /* @__PURE__ */ React.createElement(React.Fragment, null, loadingFallback);
+  if (!isLoggedIn) return null;
+  if (requiredRole && user?.role !== requiredRole) return null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
+function withAuth(Component, options = {}) {
+  const WrappedComponent = (props) => {
+    const { user } = useAuth();
+    return /* @__PURE__ */ React.createElement(ProtectedRoute, { redirectTo: options.redirectTo }, user && /* @__PURE__ */ React.createElement(Component, { ...props, user }));
+  };
+  WrappedComponent.displayName = `withAuth(${Component.displayName ?? Component.name})`;
+  return WrappedComponent;
+}
+export {
+  AuthProvider,
+  ProtectedRoute,
+  useAuth,
+  withAuth
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@dravyn/auth-js",
+  "version": "0.1.0",
+  "description": "Dravyn Auth — React/Next.js SDK. AuthProvider, useAuth, ProtectedRoute, withAuth.",
+  "author": "Durotoye Jeremiah Adeniyi <team@dravyn.it.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Dravyn-tech/auth.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.9.1",
+    "@types/react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch"
+  }
+}