@opensourceframework/react-query-auth 2.4.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alan Alickovic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,169 @@
+# @opensourceframework/react-query-auth
+
+[![NPM](https://img.shields.io/npm/v/@opensourceframework/react-query-auth.svg)](https://www.npmjs.com/package/@opensourceframework/react-query-auth)
+
+Authenticate your react applications easily with [React Query](https://tanstack.com/query/v4/docs/react).
+
+## Introduction
+
+Using React Query has allowed us to significantly reduce the size of our codebase by caching server state. However, we still need to consider where to store user data, which is a type of global application state that we need to access from many parts of the app, but is also a server state since it is obtained from a server. This library makes it easy to manage user authentication, and can be adapted to work with any API or authentication method.
+
+### Attribution
+
+- **Original Author**: Unknown
+- **Original Repository**: https://github.com/alan2207/react-query-auth
+- **Original License**: MIT
+
+
+
+```
+$ npm install @tanstack/react-query @opensourceframework/react-query-auth
+```
+
+Or if you use Yarn:
+
+```
+$ yarn add @tanstack/react-query @opensourceframework/react-query-auth
+```
+
+## Usage
+
+To use this library, you will need to provide it with functions for fetching the current user, logging in, registering, and logging out. You can do this using the `configureAuth` function:
+
+```ts
+import { configureAuth } from '@opensourceframework/react-query-auth';
+
+const { useUser, useLogin, useRegister, useLogout } = configureAuth({
+  userFn: () => api.get('/me'),
+  loginFn: (credentials) => api.post('/login', credentials),
+  registerFn: (credentials) => api.post('/register', credentials),
+  logoutFn: () => api.post('/logout'),
+});
+```
+
+With these hooks, you can then add authentication functionality to your app. For example, you could use the `useUser` hook to access the authenticated user in a component.
+
+You can also use the `useLogin`, `useRegister`, and `useLogout` hooks to allow users to authenticate and log out.
+
+```tsx
+function UserInfo() {
+  const user = useUser();
+  const logout = useLogout();
+
+  if (user.isLoading) {
+    return <div>Loading ...</div>;
+  }
+
+  if (user.error) {
+    return <div>{JSON.stringify(user.error, null, 2)}</div>;
+  }
+
+  if (!user.data) {
+    return <div>Not logged in</div>;
+  }
+
+  return (
+    <div>
+      <div>Logged in as {user.data.email}</div>
+      <button disabled={logout.isLoading} onClick={logout.mutate({})}>
+        Log out
+      </button>
+    </div>
+  );
+}
+```
+
+The library also provides the `AuthLoader` component that can be used to handle loading states when fetching the authenticated user. You can use it like this:
+
+```tsx
+function MyApp() {
+  return (
+    <AuthLoader
+      renderLoading={() => <div>Loading ...</div>}
+      renderUnauthenticated={() => <AuthScreen />}
+    >
+      <UserInfo />
+    </AuthLoader>
+  );
+}
+```
+
+**NOTE: All hooks and components must be used within `QueryClientProvider`.**
+
+## API Reference:
+
+### `configureAuth`:
+
+The `configureAuth` function takes in a configuration object and returns a set of custom hooks for handling authentication.
+
+#### The `configureAuth` configuration object:
+
+A configuration object that specifies the functions and keys to be used for various authentication actions. It accepts the following properties:
+
+- **`userFn`:**
+  A function that is used to retrieve the authenticated user. It should return a Promise that resolves to the user object, or null if the user is not authenticated.
+
+- **`loginFn`:**
+  A function that is used to log the user in. It should accept login credentials as its argument and return a Promise that resolves to the user object.
+
+- **`registerFn`:**
+  A function that is used to register a new user. It should accept registration credentials as its argument and return a Promise that resolves to the new user object.
+
+- **`logoutFn`:**
+  A function that is used to log the user out. It should return a Promise that resolves when the logout action is complete.
+
+- **`userKey`:**
+  An optional key that is used to store the authenticated user in the react-query cache. The default value is `['authenticated-user']`.
+
+#### The `configureAuth` returned object:
+
+`configureAuth` returns an object with the following properties:
+
+- **`useUser`:**
+  A custom hook that retrieves the authenticated user. It is a wrapper around [useQuery](https://tanstack.com/query/v4/docs/react/reference/useQuery) that uses the `userFn` and `userKey` specified in the `configAuth` configuration. The hook accepts the same options as [useQuery](https://tanstack.com/query/v4/docs/react/reference/useQuery), except for `queryKey` and `queryFn`, which are predefined by the configuration.
+
+- **`useLogin`:**
+  A custom hook that logs the user in. It is a wrapper around [useMutation](https://tanstack.com/query/v4/docs/react/reference/useMutation) that uses the `loginFn` specified in the configuration. The hook accepts the same options as [useMutation](https://tanstack.com/query/v4/docs/react/reference/useMutation), except for `mutationFn`, which is set by the configuration. On success, the hook updates the authenticated user in the React Query cache using the `userKey` specified in the configuration.
+
+- **`useRegister`:**
+  A custom hook that registers a new user. It is a wrapper around [useMutation](https://tanstack.com/query/v4/docs/react/reference/useMutation) that uses the `registerFn` specified in the configuration. The hook accepts the same options as [useMutation](https://tanstack.com/query/v4/docs/react/reference/useMutation), except for `mutationFn`, which is set by the configuration. On success, the hook updates the authenticated user in the React Query cache using the `userKey` specified in the configuration.
+
+- **`useLogout`:**
+  A custom hook that logs the user out. It is a wrapper around [useMutation](https://tanstack.com/query/v4/docs/react/reference/useMutation) that uses the `logoutFn` specified in the configuration. The hook accepts the same options as [useMutation](https://tanstack.com/query/v4/docs/react/reference/useMutation), except for `mutationFn`, which is set by the configuration. On success, the hook removes the authenticated user from the React Query cache using the `userKey` specified in the configuration.
+
+- **`AuthLoader`:**
+
+  A component that can be used to handle loading states when fetching the authenticated user. It accepts the following props:
+
+  - **`renderLoading`**:
+    A function that is called when the authenticated user is being fetched. It should return a React node that is rendered while the user is being fetched.
+
+  - **`renderUnauthenticated`**:
+    A function that is called when the authenticated user is not authenticated. It should return a React node that is rendered when the user is not authenticated.
+
+  - **`renderError`**:
+    A function that is called when an error is thrown during the authentication request. It should return a React node that is rendered when the error occurs. It receives the `Error` object which can be used during rendering. Defaults to `(error: Error) => <>{JSON.stringify(error)}</>`.
+
+  - **`children`**:
+    A React node that is rendered when the authenticated user is successfully fetched.
+
+If you need a more custom loading implementation, you can create your own `AuthLoader` component and use the `useUser` hook to fetch the authenticated user and handle the loading and error states yourself.
+
+
+If none of the provided hooks or components meet your needs, feel free to copy the source code into your project and modify it to your liking.
+
+## Examples:
+
+To try out the library, check out the `examples` folder.
+
+## Contributing
+
+1. Clone this repo
+2. Create a branch: `git checkout -b your-feature`
+3. Make some changes
+4. Test your changes
+5. Push your branch and open a Pull Request
+
+## LICENSE
+
+[MIT](/LICENSE)

package/dist/index.cjs

@@ -0,0 +1,95 @@
+'use strict';
+
+var reactQuery = require('@tanstack/react-query');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * @opensourceframework/react-query-auth
+ * Authenticate your react applications easily with react-query
+ * 
+ * @original-author Alan (alan2207)
+ * @original-repo https://github.com/alan2207/react-query-auth
+ * @license MIT
+ */
+
+function configureAuth(config) {
+  const { userFn, userKey = ["authenticated-user"], loginFn, registerFn, logoutFn } = config;
+  const useUser = (options) => reactQuery.useQuery({
+    queryKey: userKey,
+    queryFn: userFn,
+    ...options
+  });
+  const useLogin = (options) => {
+    const queryClient = reactQuery.useQueryClient();
+    const setUser = React__default.default.useCallback((data) => queryClient.setQueryData(userKey, data), [queryClient]);
+    return reactQuery.useMutation({
+      mutationFn: loginFn,
+      ...options,
+      onSuccess: (user, ...rest) => {
+        setUser(user);
+        options?.onSuccess?.(user, ...rest);
+      }
+    });
+  };
+  const useRegister = (options) => {
+    const queryClient = reactQuery.useQueryClient();
+    const setUser = React__default.default.useCallback((data) => queryClient.setQueryData(userKey, data), [queryClient]);
+    return reactQuery.useMutation({
+      mutationFn: registerFn,
+      ...options,
+      onSuccess: (user, ...rest) => {
+        setUser(user);
+        options?.onSuccess?.(user, ...rest);
+      }
+    });
+  };
+  const useLogout = (options) => {
+    const queryClient = reactQuery.useQueryClient();
+    const setUser = React__default.default.useCallback((data) => queryClient.setQueryData(userKey, data), [queryClient]);
+    return reactQuery.useMutation({
+      mutationFn: logoutFn,
+      ...options,
+      onSuccess: (...args) => {
+        setUser(null);
+        options?.onSuccess?.(...args);
+      }
+    });
+  };
+  function AuthLoader({
+    children,
+    renderLoading,
+    renderUnauthenticated,
+    renderError = (error) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: JSON.stringify(error) })
+  }) {
+    const { isSuccess, isFetched, status, data, error } = useUser();
+    if (isSuccess) {
+      if (renderUnauthenticated && !data) {
+        return renderUnauthenticated();
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+    }
+    if (!isFetched) {
+      return renderLoading();
+    }
+    if (status === "error") {
+      return renderError(error);
+    }
+    return null;
+  }
+  return {
+    useUser,
+    useLogin,
+    useRegister,
+    useLogout,
+    AuthLoader
+  };
+}
+
+exports.configureAuth = configureAuth;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["useQuery","useQueryClient","React","useMutation"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBO,SAAS,cACf,MAAA,EACC;AACD,EAAA,MAAM,EAAE,QAAQ,OAAA,GAAU,CAAC,oBAAoB,CAAA,EAAG,OAAA,EAAS,UAAA,EAAY,QAAA,EAAS,GAAI,MAAA;AAEpF,EAAA,MAAM,OAAA,GAAU,CAAC,OAAA,KAChBA,mBAAA,CAAS;AAAA,IACR,QAAA,EAAU,OAAA;AAAA,IACV,OAAA,EAAS,MAAA;AAAA,IACT,GAAG;AAAA,GACH,CAAA;AAEF,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,KAAoF;AACrG,IAAA,MAAM,cAAcC,yBAAA,EAAe;AAEnC,IAAA,MAAM,OAAA,GAAUC,sBAAA,CAAM,WAAA,CAAY,CAAC,IAAA,KAAe,WAAA,CAAY,YAAA,CAAa,OAAA,EAAS,IAAI,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAExG,IAAA,OAAOC,sBAAA,CAAY;AAAA,MAClB,UAAA,EAAY,OAAA;AAAA,MACZ,GAAG,OAAA;AAAA,MACH,SAAA,EAAW,CAAC,IAAA,EAAA,GAAS,IAAA,KAAS;AAC7B,QAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,QAAA,OAAA,EAAS,SAAA,GAAY,IAAA,EAAM,GAAG,IAAI,CAAA;AAAA,MACnC;AAAA,KACA,CAAA;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,OAAA,KAAuF;AAC3G,IAAA,MAAM,cAAcF,yBAAA,EAAe;AAEnC,IAAA,MAAM,OAAA,GAAUC,sBAAA,CAAM,WAAA,CAAY,CAAC,IAAA,KAAe,WAAA,CAAY,YAAA,CAAa,OAAA,EAAS,IAAI,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAExG,IAAA,OAAOC,sBAAA,CAAY;AAAA,MAClB,UAAA,EAAY,UAAA;AAAA,MACZ,GAAG,OAAA;AAAA,MACH,SAAA,EAAW,CAAC,IAAA,EAAA,GAAS,IAAA,KAAS;AAC7B,QAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,QAAA,OAAA,EAAS,SAAA,GAAY,IAAA,EAAM,GAAG,IAAI,CAAA;AAAA,MACnC;AAAA,KACA,CAAA;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY,CAAC,OAAA,KAA0D;AAC5E,IAAA,MAAM,cAAcF,yBAAA,EAAe;AAEnC,IAAA,MAAM,OAAA,GAAUC,sBAAA,CAAM,WAAA,CAAY,CAAC,IAAA,KAAsB,WAAA,CAAY,YAAA,CAAa,OAAA,EAAS,IAAI,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAE/G,IAAA,OAAOC,sBAAA,CAAY;AAAA,MAClB,UAAA,EAAY,QAAA;AAAA,MACZ,GAAG,OAAA;AAAA,MACH,SAAA,EAAW,IAAI,IAAA,KAAS;AACvB,QAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,QAAA,OAAA,EAAS,SAAA,GAAY,GAAG,IAAI,CAAA;AAAA,MAC7B;AAAA,KACA,CAAA;AAAA,EACF,CAAA;AAEA,EAAA,SAAS,UAAA,CAAW;AAAA,IACnB,QAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA,cAAc,CAAC,KAAA,2DAAoB,QAAA,EAAA,IAAA,CAAK,SAAA,CAAU,KAAK,CAAA,EAAE;AAAA,GAC1D,EAKG;AACF,IAAA,MAAM,EAAE,SAAA,EAAW,SAAA,EAAW,QAAQ,IAAA,EAAM,KAAA,KAAU,OAAA,EAAQ;AAE9D,IAAA,IAAI,SAAA,EAAW;AACd,MAAA,IAAI,qBAAA,IAAyB,CAAC,IAAA,EAAM;AACnC,QAAA,OAAO,qBAAA,EAAsB;AAAA,MAC9B;AACA,MAAA,6DAAU,QAAA,EAAS,CAAA;AAAA,IACpB;AAEA,IAAA,IAAI,CAAC,SAAA,EAAW;AACf,MAAA,OAAO,aAAA,EAAc;AAAA,IACtB;AAEA,IAAA,IAAI,WAAW,OAAA,EAAS;AACvB,MAAA,OAAO,YAAY,KAAK,CAAA;AAAA,IACzB;AAEA,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,OAAO;AAAA,IACN,OAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACD;AACD","file":"index.cjs","sourcesContent":["import {\n\ttype MutationFunction,\n\ttype QueryFunction,\n\ttype QueryKey,\n\ttype UseMutationOptions,\n\ttype UseQueryOptions,\n\tuseMutation,\n\tuseQuery,\n\tuseQueryClient,\n} from '@tanstack/react-query'\nimport React from 'react'\n\nexport interface ReactQueryAuthConfig<User, LoginCredentials, RegisterCredentials> {\n\tuserFn: QueryFunction<User, QueryKey>\n\tloginFn: MutationFunction<User, LoginCredentials>\n\tregisterFn: MutationFunction<User, RegisterCredentials>\n\tlogoutFn: MutationFunction<unknown, unknown>\n\tuserKey?: QueryKey\n}\n\nexport interface AuthProviderProps {\n\tchildren: React.ReactNode\n}\n\nexport function configureAuth<User, Error, LoginCredentials, RegisterCredentials>(\n\tconfig: ReactQueryAuthConfig<User, LoginCredentials, RegisterCredentials>\n) {\n\tconst { userFn, userKey = ['authenticated-user'], loginFn, registerFn, logoutFn } = config\n\n\tconst useUser = (options?: Omit<UseQueryOptions<User, Error, User, QueryKey>, 'queryKey' | 'queryFn'>) =>\n\t\tuseQuery({\n\t\t\tqueryKey: userKey,\n\t\t\tqueryFn: userFn,\n\t\t\t...options,\n\t\t})\n\n\tconst useLogin = (options?: Omit<UseMutationOptions<User, Error, LoginCredentials>, 'mutationFn'>) => {\n\t\tconst queryClient = useQueryClient()\n\n\t\tconst setUser = React.useCallback((data: User) => queryClient.setQueryData(userKey, data), [queryClient])\n\n\t\treturn useMutation({\n\t\t\tmutationFn: loginFn,\n\t\t\t...options,\n\t\t\tonSuccess: (user, ...rest) => {\n\t\t\t\tsetUser(user)\n\t\t\t\toptions?.onSuccess?.(user, ...rest)\n\t\t\t},\n\t\t})\n\t}\n\n\tconst useRegister = (options?: Omit<UseMutationOptions<User, Error, RegisterCredentials>, 'mutationFn'>) => {\n\t\tconst queryClient = useQueryClient()\n\n\t\tconst setUser = React.useCallback((data: User) => queryClient.setQueryData(userKey, data), [queryClient])\n\n\t\treturn useMutation({\n\t\t\tmutationFn: registerFn,\n\t\t\t...options,\n\t\t\tonSuccess: (user, ...rest) => {\n\t\t\t\tsetUser(user)\n\t\t\t\toptions?.onSuccess?.(user, ...rest)\n\t\t\t},\n\t\t})\n\t}\n\n\tconst useLogout = (options?: UseMutationOptions<unknown, Error, unknown>) => {\n\t\tconst queryClient = useQueryClient()\n\n\t\tconst setUser = React.useCallback((data: User | null) => queryClient.setQueryData(userKey, data), [queryClient])\n\n\t\treturn useMutation({\n\t\t\tmutationFn: logoutFn,\n\t\t\t...options,\n\t\t\tonSuccess: (...args) => {\n\t\t\t\tsetUser(null)\n\t\t\t\toptions?.onSuccess?.(...args)\n\t\t\t},\n\t\t})\n\t}\n\n\tfunction AuthLoader({\n\t\tchildren,\n\t\trenderLoading,\n\t\trenderUnauthenticated,\n\t\trenderError = (error: Error) => <>{JSON.stringify(error)}</>,\n\t}: {\n\t\tchildren: React.ReactNode\n\t\trenderLoading: () => React.ReactElement | null\n\t\trenderUnauthenticated?: () => React.ReactElement | null\n\t\trenderError?: (error: Error) => React.ReactElement | null\n\t}) {\n\t\tconst { isSuccess, isFetched, status, data, error } = useUser()\n\n\t\tif (isSuccess) {\n\t\t\tif (renderUnauthenticated && !data) {\n\t\t\t\treturn renderUnauthenticated()\n\t\t\t}\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tif (!isFetched) {\n\t\t\treturn renderLoading()\n\t\t}\n\n\t\tif (status === 'error') {\n\t\t\treturn renderError(error)\n\t\t}\n\n\t\treturn null\n\t}\n\n\treturn {\n\t\tuseUser,\n\t\tuseLogin,\n\t\tuseRegister,\n\t\tuseLogout,\n\t\tAuthLoader,\n\t}\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _tanstack_react_query from '@tanstack/react-query';
+import { QueryFunction, QueryKey, MutationFunction, UseQueryOptions, UseMutationOptions } from '@tanstack/react-query';
+import React from 'react';
+
+interface ReactQueryAuthConfig<User, LoginCredentials, RegisterCredentials> {
+    userFn: QueryFunction<User, QueryKey>;
+    loginFn: MutationFunction<User, LoginCredentials>;
+    registerFn: MutationFunction<User, RegisterCredentials>;
+    logoutFn: MutationFunction<unknown, unknown>;
+    userKey?: QueryKey;
+}
+interface AuthProviderProps {
+    children: React.ReactNode;
+}
+declare function configureAuth<User, Error, LoginCredentials, RegisterCredentials>(config: ReactQueryAuthConfig<User, LoginCredentials, RegisterCredentials>): {
+    useUser: (options?: Omit<UseQueryOptions<User, Error, User, QueryKey>, "queryKey" | "queryFn">) => _tanstack_react_query.UseQueryResult<_tanstack_react_query.NoInfer<User>, Error>;
+    useLogin: (options?: Omit<UseMutationOptions<User, Error, LoginCredentials>, "mutationFn">) => _tanstack_react_query.UseMutationResult<User, Error, LoginCredentials, unknown>;
+    useRegister: (options?: Omit<UseMutationOptions<User, Error, RegisterCredentials>, "mutationFn">) => _tanstack_react_query.UseMutationResult<User, Error, RegisterCredentials, unknown>;
+    useLogout: (options?: UseMutationOptions<unknown, Error, unknown>) => _tanstack_react_query.UseMutationResult<unknown, Error, unknown, unknown>;
+    AuthLoader: ({ children, renderLoading, renderUnauthenticated, renderError, }: {
+        children: React.ReactNode;
+        renderLoading: () => React.ReactElement | null;
+        renderUnauthenticated?: () => React.ReactElement | null;
+        renderError?: (error: Error) => React.ReactElement | null;
+    }) => react_jsx_runtime.JSX.Element | null;
+};
+
+export { type AuthProviderProps, type ReactQueryAuthConfig, configureAuth };

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _tanstack_react_query from '@tanstack/react-query';
+import { QueryFunction, QueryKey, MutationFunction, UseQueryOptions, UseMutationOptions } from '@tanstack/react-query';
+import React from 'react';
+
+interface ReactQueryAuthConfig<User, LoginCredentials, RegisterCredentials> {
+    userFn: QueryFunction<User, QueryKey>;
+    loginFn: MutationFunction<User, LoginCredentials>;
+    registerFn: MutationFunction<User, RegisterCredentials>;
+    logoutFn: MutationFunction<unknown, unknown>;
+    userKey?: QueryKey;
+}
+interface AuthProviderProps {
+    children: React.ReactNode;
+}
+declare function configureAuth<User, Error, LoginCredentials, RegisterCredentials>(config: ReactQueryAuthConfig<User, LoginCredentials, RegisterCredentials>): {
+    useUser: (options?: Omit<UseQueryOptions<User, Error, User, QueryKey>, "queryKey" | "queryFn">) => _tanstack_react_query.UseQueryResult<_tanstack_react_query.NoInfer<User>, Error>;
+    useLogin: (options?: Omit<UseMutationOptions<User, Error, LoginCredentials>, "mutationFn">) => _tanstack_react_query.UseMutationResult<User, Error, LoginCredentials, unknown>;
+    useRegister: (options?: Omit<UseMutationOptions<User, Error, RegisterCredentials>, "mutationFn">) => _tanstack_react_query.UseMutationResult<User, Error, RegisterCredentials, unknown>;
+    useLogout: (options?: UseMutationOptions<unknown, Error, unknown>) => _tanstack_react_query.UseMutationResult<unknown, Error, unknown, unknown>;
+    AuthLoader: ({ children, renderLoading, renderUnauthenticated, renderError, }: {
+        children: React.ReactNode;
+        renderLoading: () => React.ReactElement | null;
+        renderUnauthenticated?: () => React.ReactElement | null;
+        renderError?: (error: Error) => React.ReactElement | null;
+    }) => react_jsx_runtime.JSX.Element | null;
+};
+
+export { type AuthProviderProps, type ReactQueryAuthConfig, configureAuth };

package/dist/index.js

@@ -0,0 +1,89 @@
+import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+import React from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+/**
+ * @opensourceframework/react-query-auth
+ * Authenticate your react applications easily with react-query
+ * 
+ * @original-author Alan (alan2207)
+ * @original-repo https://github.com/alan2207/react-query-auth
+ * @license MIT
+ */
+
+function configureAuth(config) {
+  const { userFn, userKey = ["authenticated-user"], loginFn, registerFn, logoutFn } = config;
+  const useUser = (options) => useQuery({
+    queryKey: userKey,
+    queryFn: userFn,
+    ...options
+  });
+  const useLogin = (options) => {
+    const queryClient = useQueryClient();
+    const setUser = React.useCallback((data) => queryClient.setQueryData(userKey, data), [queryClient]);
+    return useMutation({
+      mutationFn: loginFn,
+      ...options,
+      onSuccess: (user, ...rest) => {
+        setUser(user);
+        options?.onSuccess?.(user, ...rest);
+      }
+    });
+  };
+  const useRegister = (options) => {
+    const queryClient = useQueryClient();
+    const setUser = React.useCallback((data) => queryClient.setQueryData(userKey, data), [queryClient]);
+    return useMutation({
+      mutationFn: registerFn,
+      ...options,
+      onSuccess: (user, ...rest) => {
+        setUser(user);
+        options?.onSuccess?.(user, ...rest);
+      }
+    });
+  };
+  const useLogout = (options) => {
+    const queryClient = useQueryClient();
+    const setUser = React.useCallback((data) => queryClient.setQueryData(userKey, data), [queryClient]);
+    return useMutation({
+      mutationFn: logoutFn,
+      ...options,
+      onSuccess: (...args) => {
+        setUser(null);
+        options?.onSuccess?.(...args);
+      }
+    });
+  };
+  function AuthLoader({
+    children,
+    renderLoading,
+    renderUnauthenticated,
+    renderError = (error) => /* @__PURE__ */ jsx(Fragment, { children: JSON.stringify(error) })
+  }) {
+    const { isSuccess, isFetched, status, data, error } = useUser();
+    if (isSuccess) {
+      if (renderUnauthenticated && !data) {
+        return renderUnauthenticated();
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    if (!isFetched) {
+      return renderLoading();
+    }
+    if (status === "error") {
+      return renderError(error);
+    }
+    return null;
+  }
+  return {
+    useUser,
+    useLogin,
+    useRegister,
+    useLogout,
+    AuthLoader
+  };
+}
+
+export { configureAuth };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import {\n\ttype MutationFunction,\n\ttype QueryFunction,\n\ttype QueryKey,\n\ttype UseMutationOptions,\n\ttype UseQueryOptions,\n\tuseMutation,\n\tuseQuery,\n\tuseQueryClient,\n} from '@tanstack/react-query'\nimport React from 'react'\n\nexport interface ReactQueryAuthConfig<User, LoginCredentials, RegisterCredentials> {\n\tuserFn: QueryFunction<User, QueryKey>\n\tloginFn: MutationFunction<User, LoginCredentials>\n\tregisterFn: MutationFunction<User, RegisterCredentials>\n\tlogoutFn: MutationFunction<unknown, unknown>\n\tuserKey?: QueryKey\n}\n\nexport interface AuthProviderProps {\n\tchildren: React.ReactNode\n}\n\nexport function configureAuth<User, Error, LoginCredentials, RegisterCredentials>(\n\tconfig: ReactQueryAuthConfig<User, LoginCredentials, RegisterCredentials>\n) {\n\tconst { userFn, userKey = ['authenticated-user'], loginFn, registerFn, logoutFn } = config\n\n\tconst useUser = (options?: Omit<UseQueryOptions<User, Error, User, QueryKey>, 'queryKey' | 'queryFn'>) =>\n\t\tuseQuery({\n\t\t\tqueryKey: userKey,\n\t\t\tqueryFn: userFn,\n\t\t\t...options,\n\t\t})\n\n\tconst useLogin = (options?: Omit<UseMutationOptions<User, Error, LoginCredentials>, 'mutationFn'>) => {\n\t\tconst queryClient = useQueryClient()\n\n\t\tconst setUser = React.useCallback((data: User) => queryClient.setQueryData(userKey, data), [queryClient])\n\n\t\treturn useMutation({\n\t\t\tmutationFn: loginFn,\n\t\t\t...options,\n\t\t\tonSuccess: (user, ...rest) => {\n\t\t\t\tsetUser(user)\n\t\t\t\toptions?.onSuccess?.(user, ...rest)\n\t\t\t},\n\t\t})\n\t}\n\n\tconst useRegister = (options?: Omit<UseMutationOptions<User, Error, RegisterCredentials>, 'mutationFn'>) => {\n\t\tconst queryClient = useQueryClient()\n\n\t\tconst setUser = React.useCallback((data: User) => queryClient.setQueryData(userKey, data), [queryClient])\n\n\t\treturn useMutation({\n\t\t\tmutationFn: registerFn,\n\t\t\t...options,\n\t\t\tonSuccess: (user, ...rest) => {\n\t\t\t\tsetUser(user)\n\t\t\t\toptions?.onSuccess?.(user, ...rest)\n\t\t\t},\n\t\t})\n\t}\n\n\tconst useLogout = (options?: UseMutationOptions<unknown, Error, unknown>) => {\n\t\tconst queryClient = useQueryClient()\n\n\t\tconst setUser = React.useCallback((data: User | null) => queryClient.setQueryData(userKey, data), [queryClient])\n\n\t\treturn useMutation({\n\t\t\tmutationFn: logoutFn,\n\t\t\t...options,\n\t\t\tonSuccess: (...args) => {\n\t\t\t\tsetUser(null)\n\t\t\t\toptions?.onSuccess?.(...args)\n\t\t\t},\n\t\t})\n\t}\n\n\tfunction AuthLoader({\n\t\tchildren,\n\t\trenderLoading,\n\t\trenderUnauthenticated,\n\t\trenderError = (error: Error) => <>{JSON.stringify(error)}</>,\n\t}: {\n\t\tchildren: React.ReactNode\n\t\trenderLoading: () => React.ReactElement | null\n\t\trenderUnauthenticated?: () => React.ReactElement | null\n\t\trenderError?: (error: Error) => React.ReactElement | null\n\t}) {\n\t\tconst { isSuccess, isFetched, status, data, error } = useUser()\n\n\t\tif (isSuccess) {\n\t\t\tif (renderUnauthenticated && !data) {\n\t\t\t\treturn renderUnauthenticated()\n\t\t\t}\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tif (!isFetched) {\n\t\t\treturn renderLoading()\n\t\t}\n\n\t\tif (status === 'error') {\n\t\t\treturn renderError(error)\n\t\t}\n\n\t\treturn null\n\t}\n\n\treturn {\n\t\tuseUser,\n\t\tuseLogin,\n\t\tuseRegister,\n\t\tuseLogout,\n\t\tAuthLoader,\n\t}\n}\n"]}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "type": "module",
+  "name": "@opensourceframework/react-query-auth",
+  "version": "2.4.3",
+  "description": "Authenticate your react applications easily with react-query",
+  "keywords": [
+    "react",
+    "reactjs",
+    "react-query",
+    "auth",
+    "authentication"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "biome check src",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/riceharvest/opensourceframework.git",
+    "directory": "packages/react-query-auth"
+  },
+  "author": "OpenSource Framework Contributors (fork), Original: Alan (alan2207)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/riceharvest/opensourceframework/issues?q=is%3Aissue+is%3Aopen+react-query-auth"
+  },
+  "homepage": "https://github.com/riceharvest/opensourceframework/tree/main/packages/react-query-auth#readme",
+  "devDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=4.0.0",
+    "react": ">=16.8.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "contributors": [
+    {
+      "name": "Alan (alan2207)",
+      "url": "https://github.com/alan2207/react-query-auth"
+    }
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "funding": {
+    "type": "GitHub",
+    "url": "https://github.com/sponsors/riceharvest"
+  }
+}