feat!: react-query and supplementary improvements

.changeset/moody-beds-invite.md

@@ -0,0 +1,9 @@
+---
+"with-next-auth": major
+"frontend-only": major
+"@farcaster/auth-kit": major
+"@farcaster/auth-client": minor
+"@farcaster/auth-relay": patch
+---
+
+Moves `auth-kit` to `react-query`, forcing users to wrap it with `QueryClientProvider` and introduces API changes within hooks and components, to provide options to queries and mutations.

.github/workflows/ci.yml

@@ -17,56 +17,75 @@ jobs:
     timeout-minutes: 10
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        node-version: [20]
+        pnpm-version: [8.6.2]
+
     steps:
       - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3
+      - uses: pnpm/action-setup@v2.2.4
         with:
-          node-version: "20"
+          version: ${{ matrix.pnpm-version }}
 
-      - name: Restore cached dependencies for Node modules.
-        id: module-cache
+      - name: Set up Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          cache: 'pnpm'
+          node-version: ${{ matrix.node-version }}
+        env:
+          # https://github.com/actions/setup-node/issues/772
+          FORCE_COLOR: 0
+
+      - name: Cache pnpm
         uses: actions/cache@v3
         with:
-          path: ${{ github.workspace }}/node_modules
-          key: ${{ runner.os }}--node--${{ hashFiles('**/yarn.lock') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}--node--${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: pnpm-
 
       - name: Install dependencies
-        run: yarn install
+        run: pnpm install
 
       - name: Run build
-        run: yarn build
+        run: pnpm build
 
       - name: Run linter
-        run: yarn lint:ci
+        run: pnpm lint:ci
 
   test:
     timeout-minutes: 10
     runs-on: "ubuntu-latest"
 
     strategy:
       matrix:
-        node_version: [18, 20]
+        pnpm-version: [8.6.2]
+        node-version: [18, 20]
 
     steps:
       - uses: actions/checkout@v3
 
       - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node_version }}
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+        env:
+          # https://github.com/actions/setup-node/issues/772
+          FORCE_COLOR: 0
 
       - name: Restore cached dependencies for Node modules.
         id: module-cache
         uses: actions/cache@v3
         with:
           path: ${{ github.workspace }}/node_modules
-          key: ${{ runner.os }}--node--${{ matrix.node_version}}--${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}--node--${{ matrix.node-version}}--${{ hashFiles('**/pnpm-lock.yaml') }}
 
       - name: Install dependencies
-        run: yarn install
+        run: pnpm install
 
       - name: Run build
-        run: yarn build
+        run: pnpm build
 
       - name: Log in to Docker Hub to avoid rate limiting
         uses: docker/login-action@v2
@@ -79,7 +98,7 @@ jobs:
         run: docker compose -f ./apps/relay/docker-compose.yml up --build --detach redis
 
       - name: Run tests
-        run: yarn test:ci
+        run: pnpm test:ci
 
       - name: Upload coverage results
         uses: codecov/codecov-action@v3

.gitignore

@@ -1,6 +1,6 @@
 # Logs
-yarn-debug.log*
-yarn-error.log*
+pnpm-debug.log*
+pnpm-error.log*
 
 .DS_Store
 **/.DS_Store

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+pnpm lint-staged

Dockerfile.relay

@@ -15,9 +15,9 @@ WORKDIR /home/node/app
 
 # Run turbo prune to create a pruned version of monorepo
 COPY --chown=node:node ./package.json ./package.json
-RUN yarn global add turbo@$(node -e "console.log(require('./package.json').devDependencies.turbo)")
+RUN pnpm global add turbo@$(node -e "console.log(require('./package.json').devDependencies.turbo)")
 COPY --chown=node:node . .
-RUN /home/node/.yarn/bin/turbo prune --scope=@farcaster/auth-relay --docker
+RUN pnpm turbo prune --scope=@farcaster/auth-relay --docker
 
 ###############################################################################
 ############## Stage 2: Build the code using a full node image ################
@@ -41,20 +41,20 @@ ENV RUSTFLAGS="-C target-feature=-crt-static"
 
 # Copy dependency information and install all dependencies
 COPY --chown=node:node --from=prune /home/node/app/out/json/ .
-COPY --chown=node:node --from=prune /home/node/app/out/yarn.lock ./yarn.lock
+COPY --chown=node:node --from=prune /home/node/app/out/pnpm-lock.yaml ./pnpm-lock.yaml
 
-RUN yarn install --frozen-lockfile --network-timeout 1800000
+RUN pnpm install --frozen-lockfile --network-timeout 1800000
 
 # Copy source code (and all other relevant files)
 COPY --chown=node:node --from=prune /home/node/app/out/full/ .
 # turbo prune doesn't include global tsconfig.json (https://github.com/vercel/turbo/issues/2177)
 COPY --chown=node:node tsconfig.json tsconfig.json
 
 # Build code
-RUN yarn build
+RUN pnpm build
 
 # Purge dev dependencies and only install production dependencies
-RUN rm -rf node_modules && yarn install --production --ignore-scripts --prefer-offline --force --frozen-lockfile
+RUN rm -rf node_modules && pnpm install --production --ignore-scripts --prefer-offline --force --frozen-lockfile
 
 ###############################################################################
 ########## Stage 3: Copy over the built code to a leaner alpine image #########

apps/relay/README.md

@@ -7,7 +7,7 @@ Farcaster Auth HTTP relay server.
 Install dependencies:
 
 ```sh
-yarn install
+pnpm install
 ```
 
 Start a Redis container:
@@ -19,7 +19,7 @@ docker compose up
 Run the server:
 
 ```sh
-yarn start
+pnpm start
 ```
 
 ## About

apps/relay/package.json

@@ -8,9 +8,9 @@
     "build": "tsc --project ./tsconfig.json",
     "lint": "biome format src/ --write && biome check src/ --apply",
     "lint:ci": "biome ci src/",
-    "test": "yarn build && DOTENV_CONFIG_PATH=.env.test jest",
-    "test:ci": "yarn build && ENVIRONMENT=test NODE_OPTIONS=\"--max-old-space-size=4096\" DOTENV_CONFIG_PATH=.env.test jest --ci --forceExit --coverage",
-    "start": "yarn build && node build/app.js start"
+    "test": "pnpm build && DOTENV_CONFIG_PATH=.env.test jest",
+    "test:ci": "pnpm build && ENVIRONMENT=test NODE_OPTIONS=\"--max-old-space-size=4096\" DOTENV_CONFIG_PATH=.env.test jest --ci --forceExit --coverage",
+    "start": "pnpm build && node build/app.js start"
   },
   "engines": {
     "node": ">=18"

examples/frontend-only/.eslintrc.cjs

@@ -1,18 +1,11 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
   },
-}
+};

examples/frontend-only/.gitignore

@@ -2,8 +2,8 @@
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+pnpm-debug.log*
+pnpm-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 

examples/frontend-only/README.md

@@ -6,6 +6,6 @@ This example app shows how to use Sign In With Farcaster in a frontend app witho
 
 ```sh
 $ git clone https://github.com/farcasterxyz/auth-monorepo.git && cd auth-monorepo/examples/frontend-only
-$ yarn install
-$ yarn dev
+$ pnpm install
+$ pnpm dev
 ```

examples/frontend-only/package.json

@@ -10,7 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@farcaster/auth-kit": "^0.1.4",
+    "@farcaster/auth-kit": "workspace:*",
+    "@tanstack/react-query": "^5.24.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^2.0.3",

examples/frontend-only/src/App.tsx

@@ -1,91 +1,86 @@
 import "@farcaster/auth-kit/styles.css";
-import { AuthKitProvider, SignInButton, useProfile } from "@farcaster/auth-kit";
+import { AuthKitProvider, createConfig, SignInButton, useProfile } from "@farcaster/auth-kit";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-const config = {
+const queryClient = new QueryClient();
+
+const config = createConfig({
   // For a production app, replace this with an Optimism Mainnet
   // RPC URL from a provider like Alchemy or Infura.
   relay: "https://relay.farcaster.xyz",
   rpcUrl: "https://mainnet.optimism.io",
   domain: "example.com",
   siweUri: "https://example.com/login",
-};
+});
 
 function App() {
   return (
     <main style={{ fontFamily: 'Inter, "Inter Placeholder", sans-serif' }}>
-      <AuthKitProvider config={config}>
-        <div style={{ position: "fixed", top: "12px", right: "12px" }}>
-          <SignInButton />
-        </div>
-        <div style={{ paddingTop: "33vh", textAlign: "center" }}>
-          <h1>@farcaster/auth-kit + Vite</h1>
-          <p>
-            This example app shows how to use{" "}
-            <a
-              href="https://docs.farcaster.xyz/auth-kit/introduction"
-              target="_blank" rel="noreferrer"
-            >
-              Farcaster AuthKit
-            </a>{" "}
-            and{" "}
-            <a href="https://vitejs.dev/" target="_blank" rel="noreferrer">
-              Vite
-            </a>
-            .
-          </p>
-          <Profile />
-          <div>
-            <h2>Run this demo:</h2>
-            <div
-              style={{
-                margin: "0 auto",
-                padding: "24px",
-                textAlign: "left",
-                maxWidth: "640px",
-                backgroundColor: "#fafafa",
-                fontFamily: "monospace",
-                fontSize: "1.25em",
-                border: "1px solid #eaeaea",
-              }}
-            >
-              git clone https://github.com/farcasterxyz/auth-monorepo.git &&
-              <br />
-              cd auth-monorepo/examples/frontend-only &&
-              <br />
-              yarn install &&
-              <br />
-              yarn dev
+      <QueryClientProvider client={queryClient}>
+        <AuthKitProvider config={config}>
+          <div style={{ position: "fixed", top: "12px", right: "12px" }}>
+            <SignInButton />
+          </div>
+          <div style={{ paddingTop: "33vh", textAlign: "center" }}>
+            <h1>@farcaster/auth-kit + Vite</h1>
+            <p>
+              This example app shows how to use{" "}
+              <a href="https://docs.farcaster.xyz/auth-kit/introduction" target="_blank" rel="noreferrer">
+                Farcaster AuthKit
+              </a>{" "}
+              and{" "}
+              <a href="https://vitejs.dev/" target="_blank" rel="noreferrer">
+                Vite
+              </a>
+              .
+            </p>
+            <Profile />
+            <div>
+              <h2>Run this demo:</h2>
+              <div
+                style={{
+                  margin: "0 auto",
+                  padding: "24px",
+                  textAlign: "left",
+                  maxWidth: "640px",
+                  backgroundColor: "#fafafa",
+                  fontFamily: "monospace",
+                  fontSize: "1.25em",
+                  border: "1px solid #eaeaea",
+                }}
+              >
+                git clone https://github.com/farcasterxyz/auth-monorepo.git &&
+                <br />
+                cd auth-monorepo/examples/frontend-only &&
+                <br />
+                pnpm install &&
+                <br />
+                pnpm dev
+              </div>
             </div>
           </div>
-        </div>
-      </AuthKitProvider>
+        </AuthKitProvider>
+      </QueryClientProvider>
     </main>
   );
 }
 
 function Profile() {
   const profile = useProfile();
-  const {
-    isAuthenticated,
-    profile: { fid, displayName, custody },
-  } = profile;
 
   return (
     <>
-      {isAuthenticated ? (
+      {profile?.isAuthenticated ? (
         <div>
-        <p>
-          Hello, {displayName}! Your FID is {fid}.
-        </p>
-        <p>
-          Your custody address is: <pre>{custody}</pre>
-        </p>
+          <p>
+            Hello, {profile.displayName}! Your FID is {profile.fid}.
+          </p>
+          <p>
+            Your custody address is: <pre>{profile.custody}</pre>
+          </p>
         </div>
       ) : (
-        <p>
-          Click the "Sign in with Farcaster" button above, then scan the QR code
-          to sign in.
-        </p>
+        <p>Click the "Sign in with Farcaster" button above, then scan the QR code to sign in.</p>
       )}
     </>
   );