feat: add baseUrl option

Author: aj-may

src/index.ts

@@ -2,3 +2,4 @@ export { SiweProvider } from "./siweProvider.js";
 export { getSession, useSession } from "./useSession.js"
 export { createMessage, getMessageBody, verify, useSignIn } from "./useSignIn.js"
 export { signOut, useSignOut } from "./useSignOut.js"
+export type { UseSiweOptions } from "./types.js"

src/parseOptions.ts

@@ -0,0 +1,9 @@
+import { UseSiweOptions } from "./types.js"
+
+const defaultOptions: Required<UseSiweOptions> = {
+  baseUrl: "/api/auth",
+}
+
+export const parseOptions = (options: UseSiweOptions = {}) => {
+  return { ...defaultOptions, ...options };
+}

src/siweProvider.tsx

@@ -1,7 +1,9 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { createContext, PropsWithChildren } from "react";
+import { UseSiweOptions } from "./types.js";
 
-export const siweContext = createContext<QueryClient | undefined>(undefined);
+export const queryContext = createContext<QueryClient | undefined>(undefined);
+export const optionsContext = createContext<UseSiweOptions>({});
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -10,8 +12,14 @@ const queryClient = new QueryClient({
   },
 });
 
-export const SiweProvider = ({ children }: PropsWithChildren) => (
-  <QueryClientProvider client={queryClient} context={siweContext}>
-    {children}
-  </QueryClientProvider>
+type SiweProviderProps = PropsWithChildren & {
+  options?: UseSiweOptions,
+};
+
+export const SiweProvider = ({ children, options = {} }: SiweProviderProps) => (
+  <optionsContext.Provider value={options}>
+    <QueryClientProvider client={queryClient} context={queryContext}>
+      {children}
+    </QueryClientProvider>
+  </optionsContext.Provider>
 );

src/types.ts

@@ -39,3 +39,7 @@ export type SignInRequest = z.infer<typeof signInRequestSchema>;
 export type SignInResponse = string;
 
 export type SignOutResponse = string;
+
+export type UseSiweOptions = {
+  baseUrl?: string,
+};

src/useSession.ts

@@ -1,18 +1,22 @@
 import { useQuery } from "@tanstack/react-query";
-import { siweContext as context } from "./siweProvider.js";
-import { GetSessionResponse } from "./types.js";
+import { useContext } from "react";
+import { parseOptions } from "./parseOptions.js";
+import { queryContext, optionsContext } from "./siweProvider.js";
+import { GetSessionResponse, UseSiweOptions } from "./types.js";
 
-export const getSession = async () => {
-  const res = await fetch("/api/auth");
+export const getSession = async (options?: UseSiweOptions) => {
+  const { baseUrl } = parseOptions(options);
+  const res = await fetch(baseUrl);
   if (!res.ok) throw new Error(res.statusText);
   return res.json() as Promise<GetSessionResponse>;
 }
 
 export const useSession = () => {
+  const options = useContext(optionsContext);
   const { data, ...rest } = useQuery({
     queryKey: ["session"],
-    queryFn: getSession,
-    context,
+    queryFn: () => getSession(options),
+    context: queryContext,
   });
 
   return { ...rest, ...data };

src/useSignIn.ts

@@ -1,14 +1,26 @@
 import { useMutation, useQueryClient, UseQueryOptions } from "@tanstack/react-query";
+import { useContext } from "react";
 import { SiweMessage } from "siwe";
 import { useAccount, useNetwork, useSignMessage } from "wagmi";
-import { siweContext as context } from "./siweProvider.js";
+import { parseOptions } from "./parseOptions.js";
+import { optionsContext, queryContext } from "./siweProvider.js";
+import { UseSiweOptions } from "./types.js";
 import { useSession } from "./useSession.js";
 
 type UseSignInOptions = Pick<UseQueryOptions<void>, "onSuccess" | "onError">
+type MessageArgs = {
+  address: string,
+  chainId: number,
+  nonce: string,
+};
+type VerifyArgs = {
+  message: string,
+  signature: string,
+};
 
-export const createMessage = (options: { address: string, chainId: number, nonce: string }) =>
+export const createMessage = (args: MessageArgs) =>
   new SiweMessage({
-    ...options,
+    ...args,
     domain: window.location.host,
     uri: window.location.origin,
     version: "1",
@@ -17,10 +29,11 @@ export const createMessage = (options: { address: string, chainId: number, nonce
 export const getMessageBody = ({ message }: { message: SiweMessage }) =>
   message.prepareMessage();
 
-export const verify = async ({ message, signature}: { message: string, signature: string }) => {
-  const res = await fetch("/api/auth/signin", {
+export const verify = async (args: VerifyArgs, options?: UseSiweOptions) => {
+  const { baseUrl } = parseOptions(options);
+  const res = await fetch(`${baseUrl}/signin`, {
     method: "POST",
-    body: JSON.stringify({ message, signature }),
+    body: JSON.stringify(args),
   });
 
   return res.ok;
@@ -31,14 +44,17 @@ export const useSignIn = ({ onSuccess, onError }: UseSignInOptions = {}) => {
   const { chain } = useNetwork();
   const { nonce } = useSession();
   const { signMessageAsync } = useSignMessage();
-  const queryClient = useQueryClient({ context });
+  const queryClient = useQueryClient({
+    context: queryContext,
+  });
+  const options = useContext(optionsContext);
 
   const { mutate, mutateAsync, ...rest } = useMutation(
     async () => {
       const rawMessage = createMessage({ address, chainId: chain.id, nonce });
       const message = getMessageBody({ message: rawMessage });
       const signature = await signMessageAsync({ message });
-      const result = await verify({ message, signature });
+      const result = await verify({ message, signature }, options);
       if (!result) throw new Error("Verification Failed");
     },
     {
@@ -47,7 +63,7 @@ export const useSignIn = ({ onSuccess, onError }: UseSignInOptions = {}) => {
         if (onSuccess) onSuccess();
       },
       onError,
-      context,
+      context: queryContext,
     },
   );
 

src/useSignOut.ts

@@ -1,24 +1,31 @@
 import { useMutation, useQueryClient, UseQueryOptions } from "@tanstack/react-query";
+import { useContext } from "react";
 import { useAccount, useDisconnect } from "wagmi";
-import { siweContext as context } from "./siweProvider.js";
+import { parseOptions } from "./parseOptions.js";
+import { optionsContext, queryContext } from "./siweProvider.js";
+import { UseSiweOptions } from "./types.js";
 import { useSession } from "./useSession.js";
 
 type UseSignOutOptions = Pick<UseQueryOptions<void>, "onSuccess" | "onError">
 
-export const signOut = async () => {
-  const res = await fetch("/api/auth/signout", { method: "POST" });
+export const signOut = async (options?: UseSiweOptions) => {
+  const { baseUrl } = parseOptions(options);
+  const res = await fetch(`${baseUrl}/signout`, { method: "POST" });
   if (!res.ok) throw new Error(res.statusText);
 };
 
 export const useSignOut = ({ onSuccess, onError }: UseSignOutOptions = {}) => {
   const { authenticated } = useSession();
   const { isConnected } = useAccount();
   const { disconnectAsync } = useDisconnect();
-  const queryClient = useQueryClient({ context });
+  const queryClient = useQueryClient({
+    context: queryContext,
+  });
+  const options = useContext(optionsContext);
 
   const { mutate, mutateAsync, ...rest } = useMutation(
     async () => {
-      if (authenticated) await signOut();
+      if (authenticated) await signOut(options);
       if (isConnected) await disconnectAsync();
     },
     {
@@ -27,7 +34,7 @@ export const useSignOut = ({ onSuccess, onError }: UseSignOutOptions = {}) => {
         if (onSuccess) onSuccess();
       },
       onError,
-      context,
+      context: queryContext,
     },
   );