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,
  },
  );