farcasterxyz · dylsteck · Jul 16, 2024
diff --git a/examples/with-next-auth/.eslintrc.json → .../with-next-auth-app-router/.eslintrc.json b/examples/with-next-auth/.eslintrc.json → .../with-next-auth-app-router/.eslintrc.json
diff --git a/examples/with-next-auth/.gitignore → ...ples/with-next-auth-app-router/.gitignore b/examples/with-next-auth/.gitignore → ...ples/with-next-auth-app-router/.gitignore
diff --git a/examples/with-next-auth/CHANGELOG.md → ...es/with-next-auth-app-router/CHANGELOG.md b/examples/with-next-auth/CHANGELOG.md → ...es/with-next-auth-app-router/CHANGELOG.md
@@ -1,4 +1,4 @@
-# with-next-auth
+# with-next-auth-app-router
 
 ## 0.1.1
 

diff --git a/examples/with-next-auth/README.md → examples/with-next-auth-app-router/README.md b/examples/with-next-auth/README.md → examples/with-next-auth-app-router/README.md
@@ -1,11 +1,11 @@
 # Sign In With Farcaster + NextAuth.js Demo
 
-This example app shows how to use Sign In With Farcaster in a Next.js app with a backend API, using [NextAuth.js](https://next-auth.js.org/) for authentication.
+This example app shows how to use Sign In With Farcaster in a Next.js app(App router) with a backend API, using [NextAuth.js](https://next-auth.js.org/) for authentication.
 
 ## Getting Started
 
 ```sh
-$ git clone https://github.com/farcasterxyz/auth-monorepo.git && cd auth-monorepo/examples/with-next-auth
+$ git clone https://github.com/farcasterxyz/auth-monorepo.git && cd auth-monorepo/examples/with-next-auth-app-router
 $ yarn install
 $ yarn dev
 ```
diff --git a/examples/with-next-auth-app-router/app/api/auth/[...nextauth]/route.ts b/examples/with-next-auth-app-router/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,3 @@
+import { handlers } from "@/auth"
+
+export const { GET, POST } = handlers
diff --git a/examples/with-next-auth-app-router/app/layout.tsx b/examples/with-next-auth-app-router/app/layout.tsx
@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "with-next-auth-app-router",
+  description: "Sign In With Farcaster + NextAuth.js Demo",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element {
+  return (
+    <html lang="en">
+      <body>
+          {children}
+      </body>
+    </html>
+  );
+}
diff --git a/examples/with-next-auth-app-router/app/page.tsx b/examples/with-next-auth-app-router/app/page.tsx
@@ -0,0 +1,20 @@
+import Login from "@/components/login"
+import { auth } from "@/auth"
+import { SessionProvider } from "next-auth/react"
+
+export default async function ClientPage() {
+  const session = await auth()
+  if (session?.user) {
+    session.user = {
+      id: session.user.id,
+      name: session.user.name,
+      image: session.user.image,
+    }
+  }
+
+  return (
+    <SessionProvider basePath={"/api/auth"} session={session}>
+      <Login />
+    </SessionProvider>
+  )
+}
diff --git a/examples/with-next-auth-app-router/auth.ts b/examples/with-next-auth-app-router/auth.ts
@@ -0,0 +1,41 @@
+import NextAuth from "next-auth";
+import CredentialsProvider from "next-auth/providers/credentials";
+import { createAppClient, viemConnector } from "@farcaster/auth-client";
+
+export const { handlers, signIn, signOut, auth } = NextAuth({
+  providers: [
+    CredentialsProvider({
+      name: "Sign in with Farcaster",
+      credentials: {
+        message: { label: "Message", type: "text", placeholder: "0x0" },
+        signature: { label: "Signature", type: "text", placeholder: "0x0" },
+        name: { label: "Name", type: "text", placeholder: "0x0" },
+        pfp: { label: "Pfp", type: "text", placeholder: "0x0" },
+        csrfToken: { label: "CSRF Token", type: "text", placeholder: "0x0" },
+      },
+      async authorize(credentials) {
+        const appClient = createAppClient({
+          ethereum: viemConnector(),
+        });
+
+        const verifyResponse = await appClient.verifySignInMessage({
+          message: credentials?.message as string,
+          signature: credentials?.signature as `0x${string}`,
+          domain: "example.com",
+          nonce: credentials.csrfToken as string,
+        });
+        const { success, fid } = verifyResponse;
+
+        if (!success) {
+          return null;
+        }
+
+        return {
+          id: fid.toString(),
+          name: credentials?.name as string,
+          image: credentials?.pfp as string,
+        };
+      },
+    }),
+  ],
+});
diff --git a/examples/with-next-auth-app-router/components/login.tsx b/examples/with-next-auth-app-router/components/login.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import "@farcaster/auth-kit/styles.css";
+import Head from "next/head";
+import { useSession, signIn, signOut, getCsrfToken } from "next-auth/react";
+import {
+  SignInButton,
+  AuthKitProvider,
+  StatusAPIResponse,
+} from "@farcaster/auth-kit";
+import { useCallback, useState } from "react";
+
+const config = {
+  relay: "https://relay.farcaster.xyz",
+  rpcUrl: "https://mainnet.optimism.io",
+  siweUri: "http://example.com/login",
+  domain: "example.com",
+};
+
+export default function Login() {
+  return (
+    <>
+      <Head>
+        <title>Farcaster AuthKit + NextAuth Demo</title>
+      </Head>
+      <main style={{ fontFamily: "Inter, sans-serif" }}>
+        <AuthKitProvider config={config}>
+          <Content />
+        </AuthKitProvider>
+      </main>
+    </>
+  );
+}
+
+function Content() {
+  const [error, setError] = useState(false);
+
+  const getNonce = useCallback(async () => {
+    console.log("Getting CSRF token...");
+    const nonce = await getCsrfToken();
+    console.log("CSRF token:", nonce);
+    if (!nonce) throw new Error("Unable to generate nonce");
+    return nonce;
+  }, []);
+
+  const handleSuccess = useCallback(
+    (res: StatusAPIResponse) => {
+      console.log("Success response:", res);
+      signIn("credentials", {
+        message: res.message,
+        signature: res.signature,
+        name: res.username,
+        pfp: res.pfpUrl,
+        csrfToken: (res as unknown as any).csrfToken,
+        redirect: false,
+      });
+    },
+    []
+  );
+
+  return (
+    <div>
+      <div style={{ position: "fixed", top: "12px", right: "12px" }}>
+        <SignInButton
+          nonce={getNonce}
+          onSuccess={handleSuccess}
+          onError={() => setError(true)}
+          onSignOut={() => signOut()}
+        />
+        {error && <div>Unable to sign in at this time.</div>}
+      </div>
+      <div style={{ paddingTop: "33vh", textAlign: "center" }}>
+        <h1>@farcaster/auth-kit + NextAuth</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://next-auth.js.org/" target="_blank" rel="noreferrer">
+            NextAuth.js
+          </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/with-next-auth &&
+            <br />
+            yarn install &&
+            <br />
+            yarn dev
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Profile() {
+  const { data: session } = useSession();
+
+  return session ? (
+    <div style={{ fontFamily: "sans-serif", color: 'black' }}>
+      <p>Signed in as {session.user?.name}</p>
+      <p>
+        <button
+          type="button"
+          style={{ padding: "6px 12px", cursor: "pointer" }}
+          onClick={() => signOut()}
+        >
+          Click here to sign out
+        </button>
+      </p>
+    </div>
+  ) : (
+    <p>
+      Click the &quot;Sign in with Farcaster&quot; button above, then scan the QR code to
+      sign in.
+    </p>
+  );
+}
diff --git a/examples/with-next-auth-app-router/middleware.ts b/examples/with-next-auth-app-router/middleware.ts
@@ -0,0 +1 @@
+export { auth as middleware } from "@/auth"
diff --git a/examples/with-next-auth-app-router/next.config.js b/examples/with-next-auth-app-router/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true
+}
+
+module.exports = nextConfig
diff --git a/examples/with-next-auth-app-router/package.json b/examples/with-next-auth-app-router/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "with-next-auth-app-router",
+  "version": "0.1.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@farcaster/auth-client": "*",
+    "@farcaster/auth-kit": "*",
+    "ethers": "^6.12.0",
+    "next": "14.0.4",
+    "next-auth": "^5.0.0-beta.19",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "viem": "^2.0.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint-config-next": "14.2.1",
+    "typescript": "^5"
+  }
+}
diff --git a/examples/with-next-auth-app-router/tsconfig.json b/examples/with-next-auth-app-router/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/examples/with-next-auth/yarn.lock → examples/with-next-auth-app-router/yarn.lock b/examples/with-next-auth/yarn.lock → examples/with-next-auth-app-router/yarn.lock
diff --git a/examples/with-next-auth-pages-router/.eslintrc.json b/examples/with-next-auth-pages-router/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/examples/with-next-auth-pages-router/.gitignore b/examples/with-next-auth-pages-router/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/with-next-auth-pages-router/CHANGELOG.md b/examples/with-next-auth-pages-router/CHANGELOG.md
@@ -0,0 +1,10 @@
+# with-next-auth-pages-router
+
+## 0.1.1
+
+### Patch Changes
+
+- 62874a0: - support redirectUrl
+  - remove ethers hard dependency
+- Updated dependencies [62874a0]
+  - @farcaster/auth-kit@0.2.2
diff --git a/examples/with-next-auth-pages-router/README.md b/examples/with-next-auth-pages-router/README.md
@@ -0,0 +1,11 @@
+# Sign In With Farcaster + NextAuth.js Demo
+
+This example app shows how to use Sign In With Farcaster in a Next.js app(Pages router) with a backend API, using [NextAuth.js](https://next-auth.js.org/) for authentication.
+
+## Getting Started
+
+```sh
+$ git clone https://github.com/farcasterxyz/auth-monorepo.git && cd auth-monorepo/examples/with-next-auth-pages-router
+$ yarn install
+$ yarn dev
+```
diff --git a/examples/with-next-auth/next.config.js → ...ith-next-auth-pages-router/next.config.js b/examples/with-next-auth/next.config.js → ...ith-next-auth-pages-router/next.config.js