feat(auth): Wagmi with Privy setup

Bedrock-im · Oct 20, 2024 · 6110685 · 6110685
1 parent 4a5464f
commit 6110685
Show file tree

Hide file tree

Showing 11 changed files with 2,588 additions and 491 deletions.
diff --git a/front/.env.example b/front/.env.example
@@ -0,0 +1,2 @@
+# Service used for auth (with wallets and social providers)
+NEXT_PUBLIC_PRIVY_APP_ID=
diff --git a/front/.gitignore b/front/.gitignore
@@ -30,6 +30,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
@@ -38,4 +39,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-*storybook.log
+*storybook.log
diff --git a/front/.yarnrc.yml b/front/.yarnrc.yml
@@ -1 +1,3 @@
+nodeLinker: node-modules
+
 yarnPath: .yarn/releases/yarn-4.5.0.cjs
diff --git a/front/package.json b/front/package.json
@@ -13,8 +13,11 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
+    "@privy-io/react-auth": "^1.92.0",
+    "@privy-io/wagmi": "^0.2.12",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@solana/web3.js": "^1.95.4",
     "@tanstack/query-core": "^5.59.0",
     "@tanstack/react-query": "^5.59.3",
     "class-variance-authority": "^0.7.0",
@@ -26,7 +29,8 @@
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "viem": "2.21.19",
-    "wagmi": "^2.12.17"
+    "wagmi": "^2.12.17",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",

diff --git a/front/src/app/layout.tsx b/front/src/app/layout.tsx
@@ -1,11 +1,8 @@
 import { type Metadata } from "next";
 import localFont from "next/font/local";
-import { headers } from "next/headers";
 import { ReactNode } from "react";
-import { cookieToInitialState } from "wagmi";
 
 import { Providers } from "@/app/providers";
-import { config } from "@/config/wagmi";
 
 import "./globals.css";
 
@@ -30,12 +27,10 @@ export default function RootLayout({
 }: Readonly<{
 	children: ReactNode;
 }>) {
-	const initialState = cookieToInitialState(config, headers().get("cookie"));
-
 	return (
 		<html lang="en">
 			<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-				<Providers initialState={initialState}>{children}</Providers>
+				<Providers>{children}</Providers>
 			</body>
 		</html>
 	);

diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx
@@ -1,83 +1,16 @@
-import Image from "next/image";
+"use client";
+import { usePrivy } from "@privy-io/react-auth";
+import { useAccount } from "wagmi";
+
+import { Button } from "@/components/ui/button";
 
 export default function Home() {
+	const { login } = usePrivy();
+	const account = useAccount();
 	return (
-		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-			<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-				<Image
-					className="dark:invert"
-					src="https://nextjs.org/icons/next.svg"
-					alt="Next.js logo"
-					width={180}
-					height={38}
-					priority
-				/>
-				<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-					<li className="mb-2">
-						Get started by editing{" "}
-						<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-							src/app/page.tsx
-						</code>
-						.
-					</li>
-					<li>Save and see your changes instantly.</li>
-				</ol>
-
-				<div className="flex gap-4 items-center flex-col sm:flex-row">
-					<a
-						className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-						href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<Image
-							className="dark:invert"
-							src="https://nextjs.org/icons/vercel.svg"
-							alt="Vercel logomark"
-							width={20}
-							height={20}
-						/>
-						Deploy now
-					</a>
-					<a
-						className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-						href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						Read our docs
-					</a>
-				</div>
-			</main>
-			<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-				<a
-					className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-					href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<Image aria-hidden src="https://nextjs.org/icons/file.svg" alt="File icon" width={16} height={16} />
-					Learn
-				</a>
-				<a
-					className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-					href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<Image aria-hidden src="https://nextjs.org/icons/window.svg" alt="Window icon" width={16} height={16} />
-					Examples
-				</a>
-				<a
-					className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-					href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<Image aria-hidden src="https://nextjs.org/icons/globe.svg" alt="Globe icon" width={16} height={16} />
-					Go to nextjs.org →
-				</a>
-			</footer>
-		</div>
+		<>
+			<Button onClick={login}>Login with Privy</Button>
+			{account.address ?? "Not connected"}
+		</>
 	);
 }
diff --git a/front/src/app/providers.tsx b/front/src/app/providers.tsx
@@ -1,22 +1,26 @@
 "use client";
 
+import { PrivyProvider } from "@privy-io/react-auth";
+import { WagmiProvider } from "@privy-io/wagmi";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { type ReactNode } from "react";
-import { type State, WagmiProvider } from "wagmi";
 
-import { config } from "@/config/wagmi";
+import env from "@/config/env";
+import { privyConfig } from "@/config/privy";
+import { wagmiConfig } from "@/config/wagmi";
 
-type Props = {
+type ProvidersProps = {
 	children: ReactNode;
-	initialState: State | undefined;
 };
 
-export function Providers({ children, initialState }: Props) {
-	const queryClient = new QueryClient();
+const queryClient = new QueryClient();
 
+export function Providers({ children }: ProvidersProps) {
 	return (
-		<WagmiProvider config={config} initialState={initialState}>
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		</WagmiProvider>
+		<PrivyProvider appId={env.PRIVY_APP_ID} config={privyConfig}>
+			<QueryClientProvider client={queryClient}>
+				<WagmiProvider config={wagmiConfig}>{children}</WagmiProvider>
+			</QueryClientProvider>
+		</PrivyProvider>
 	);
 }
diff --git a/front/src/config/env.ts b/front/src/config/env.ts
@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+const envSchema = z.object({
+	PRIVY_APP_ID: z.string(),
+});
+
+const env = envSchema.parse({ PRIVY_APP_ID: process.env.NEXT_PUBLIC_PRIVY_APP_ID });
+
+export default env;
diff --git a/front/src/config/privy.ts b/front/src/config/privy.ts
@@ -0,0 +1,13 @@
+import type { PrivyClientConfig } from "@privy-io/react-auth";
+
+export const privyConfig: PrivyClientConfig = {
+	embeddedWallets: {
+		createOnLogin: "users-without-wallets",
+	},
+	loginMethods: ["wallet", "email"],
+	appearance: {
+		showWalletLoginFirst: true,
+		walletList: ["detected_ethereum_wallets", "wallet_connect"],
+		walletChainType: "ethereum-only",
+	},
+};
diff --git a/front/src/config/wagmi.ts b/front/src/config/wagmi.ts
@@ -1,13 +1,10 @@
-import { cookieStorage, createConfig, createStorage, http } from "wagmi";
+import { createConfig } from "@privy-io/wagmi";
+import { http } from "wagmi";
 import { mainnet } from "wagmi/chains";
 
-export const config = createConfig({
+export const wagmiConfig = createConfig({
 	chains: [mainnet],
 	transports: {
 		[mainnet.id]: http(),
 	},
-	ssr: true,
-	storage: createStorage({
-		storage: cookieStorage,
-	}),
 });