diff --git a/apps/login/.gitignore b/apps/login/.gitignore
new file mode 100644
index 00000000000..5ef6a520780
--- /dev/null
+++ b/apps/login/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/apps/login/README.md b/apps/login/README.md
new file mode 100644
index 00000000000..e215bc4ccf1
--- /dev/null
+++ b/apps/login/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/apps/login/eslint.config.mjs b/apps/login/eslint.config.mjs
new file mode 100644
index 00000000000..f5b76f3927b
--- /dev/null
+++ b/apps/login/eslint.config.mjs
@@ -0,0 +1,16 @@
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+ ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;
diff --git a/apps/login/next.config.ts b/apps/login/next.config.ts
new file mode 100644
index 00000000000..5739e8a7b4a
--- /dev/null
+++ b/apps/login/next.config.ts
@@ -0,0 +1,28 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+ /* config options here */
+ async headers() {
+ return [
+ {
+ source: "/api/request",
+ headers: [
+ {
+ key: "Access-Control-Allow-Origin",
+ value: "*", // Set your origin
+ },
+ {
+ key: "Access-Control-Allow-Methods",
+ value: "GET, POST, PUT, DELETE, OPTIONS",
+ },
+ {
+ key: "Access-Control-Allow-Headers",
+ value: "Content-Type, Authorization",
+ },
+ ],
+ },
+ ];
+ },
+};
+
+export default nextConfig;
diff --git a/apps/login/package.json b/apps/login/package.json
new file mode 100644
index 00000000000..c27c22b56d7
--- /dev/null
+++ b/apps/login/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "thirdweb-login",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "preinstall": "npx only-allow pnpm",
+ "dev": "next dev --turbopack",
+ "build": "next build",
+ "start": "next start",
+ "format": "biome format ./src --write",
+ "lint": "biome check ./src && knip && eslint ./src",
+ "fix": "biome check ./src --fix && eslint ./src --fix",
+ "typecheck": "tsc --noEmit",
+ "knip": "knip"
+ },
+ "dependencies": {
+ "next": "15.1.6",
+ "react": "19.0.0",
+ "react-dom": "19.0.0",
+ "thirdweb": "workspace:*"
+ },
+ "devDependencies": {
+ "@eslint/eslintrc": "^3",
+ "@types/node": "22.10.10",
+ "@types/react": "19.0.8",
+ "@types/react-dom": "19.0.3",
+ "eslint": "^9",
+ "eslint-config-next": "15.1.6",
+ "postcss": "8.5.1",
+ "tailwindcss": "3.4.17",
+ "typescript": "5.7.3"
+ }
+}
diff --git a/apps/login/postcss.config.mjs b/apps/login/postcss.config.mjs
new file mode 100644
index 00000000000..1a69fd2a450
--- /dev/null
+++ b/apps/login/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+ plugins: {
+ tailwindcss: {},
+ },
+};
+
+export default config;
diff --git a/apps/login/public/tw-login.js b/apps/login/public/tw-login.js
new file mode 100644
index 00000000000..6905b177f87
--- /dev/null
+++ b/apps/login/public/tw-login.js
@@ -0,0 +1,144 @@
+(() => {
+ const { targetId, clientId, baseUrl } = getSetup();
+
+ // the code to verify login was not tampered with
+ let code = "";
+
+ const USER_ADDRESS_KEY = "tw.login:userAddress";
+ const SESSION_KEY_ADDRESS_KEY = "tw.login:sessionKeyAddress";
+
+ function main() {
+ // check if redirected first, this sets up the logged in state if it was from redirect
+ const params = parseURLHash(new URL(window.location));
+ console.log(params);
+ // TECHNICALLY this should verify the code... but can't do that without backend of some sort
+ if (params) {
+ // reset the code
+ code = "";
+ // write the userAddress to local storage
+ localStorage.setItem(USER_ADDRESS_KEY, params.userAddress);
+ // write the sessionKeyAddress to local storage
+ localStorage.setItem(SESSION_KEY_ADDRESS_KEY, params.sessionKeyAddress);
+ // reset the URL hash
+ window.location.hash = "";
+ }
+
+ const userAddress = localStorage.getItem(USER_ADDRESS_KEY);
+ const sessionKeyAddress = localStorage.getItem(SESSION_KEY_ADDRESS_KEY);
+
+ if (userAddress && sessionKeyAddress) {
+ // handle logged in state
+ handleIsLoggedIn();
+ } else {
+ // handle not logged in state
+ handleNotLoggedIn();
+ }
+ }
+
+ function handleIsLoggedIn() {
+ console.log("handleIsLoggedIn");
+
+ window.thirdweb = {
+ isLoggedIn: true,
+ getAddress: () => getAddress(),
+ logout: () => {
+ window.localStorage.removeItem(USER_ADDRESS_KEY);
+ window.localStorage.removeItem(SESSION_KEY_ADDRESS_KEY);
+ window.location.reload();
+ },
+ makeRequest: async () => {
+ const res = await fetch(`${baseUrl}/api/request`, {
+ method: "POST",
+ body: JSON.stringify({
+ userAddress: getAddress(),
+ sessionKeyAddress: getSessionKeyAddress(),
+ }),
+ });
+ const data = await res.json();
+ console.log(data);
+ },
+ };
+ }
+
+ function handleNotLoggedIn() {
+ window.thirdweb = { login: onLogin, isLoggedIn: false };
+ }
+
+ function onLogin() {
+ code = window.crypto.getRandomValues(new Uint8Array(4)).join("");
+ // redirect to the login page
+ const redirect = new URL(baseUrl);
+ redirect.searchParams.set("code", code);
+ redirect.searchParams.set("clientId", clientId);
+ redirect.searchParams.set("redirect", window.location.href);
+ window.location.href = redirect.href;
+ }
+
+ function getAddress() {
+ return localStorage.getItem(USER_ADDRESS_KEY);
+ }
+
+ function getSessionKeyAddress() {
+ return localStorage.getItem(SESSION_KEY_ADDRESS_KEY);
+ }
+
+ // utils
+
+ function getSetup() {
+ const el = document.currentScript;
+ if (!el) {
+ throw new Error("Could not find script element");
+ }
+ const baseUrl = new URL(el.src).origin;
+ const dataset = el.dataset;
+ const targetId = dataset.target || "tw-login";
+ const clientId = dataset.clientId;
+ if (!clientId) {
+ throw new Error("Missing client-id");
+ }
+ return { targetId, clientId, baseUrl };
+ }
+
+ /**
+ * @param {URL} url
+ * @returns null | { [key: string]: string }
+ */
+ function parseURLHash(url) {
+ if (!url.hash) {
+ return null;
+ }
+ try {
+ return decodeHash(url.hash);
+ } catch {
+ // if this fails, invalid data -> return null
+ return null;
+ }
+ }
+
+ /**
+ * Decodes a URL hash string to extract the three keys.
+ *
+ * @param {string} hash - A string like "#eyJrZXkxIjoiVmFsdWU..."
+ * @returns {{ userAddress: string, sessionKeyAddress: string, code: string }} An object with the three keys
+ */
+ function decodeHash(hash) {
+ // Remove the "#" prefix, if present.
+ const base64Data = hash.startsWith("#") ? hash.slice(1) : hash;
+
+ // Decode the Base64 string, then parse the JSON.
+ const jsonString = atob(base64Data);
+ const data = JSON.parse(jsonString);
+
+ // data should have the shape { userAddress, sessionKeyAddress, code }.
+ if (
+ "userAddress" in data &&
+ "sessionKeyAddress" in data &&
+ "code" in data
+ ) {
+ return data;
+ }
+ return null;
+ }
+
+ main();
+})();
diff --git a/apps/login/src/app/api/request/route.salty b/apps/login/src/app/api/request/route.salty
new file mode 100644
index 00000000000..b3bbb679d10
--- /dev/null
+++ b/apps/login/src/app/api/request/route.salty
@@ -0,0 +1,36 @@
+import { type NextRequest, NextResponse } from "next/server";
+
+export const POST = async (req: NextRequest) => {
+ const body = await req.json();
+ const userAddress = body.userAddress;
+ const sessionKeyAddress = body.sessionKeyAddress;
+ if (!userAddress || !sessionKeyAddress) {
+ return NextResponse.json(
+ {
+ message: "Missing userAddress or sessionKeyAddress",
+ },
+ { status: 400 },
+ );
+ }
+ const url = `${ENGINE_URL}/contract/84532/0x638263e3eAa3917a53630e61B1fBa685308024fa/erc1155/claim-to`;
+
+ console.log("url", url);
+
+ const res = await fetch(url, {
+ method: "POST",
+ headers: {
+ authorization: `Bearer ${ACCESS_TOKEN}`,
+ "x-account-address": userAddress,
+ "x-backend-wallet-address": sessionKeyAddress,
+ "content-type": "application/json",
+ },
+ body: JSON.stringify({
+ receiver: userAddress,
+ tokenId: "0",
+ quantity: "1",
+ }),
+ });
+ const data = await res.json();
+
+ return NextResponse.json(data, { status: res.status });
+};
diff --git a/apps/login/src/app/favicon.ico b/apps/login/src/app/favicon.ico
new file mode 100644
index 00000000000..55c8bb8b3da
Binary files /dev/null and b/apps/login/src/app/favicon.ico differ
diff --git a/apps/login/src/app/globals.css b/apps/login/src/app/globals.css
new file mode 100644
index 00000000000..d94e43201c0
--- /dev/null
+++ b/apps/login/src/app/globals.css
@@ -0,0 +1,163 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+ /* scroll-behavior: smooth; */
+ font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+ font-feature-settings: "rlig" 1, "calt" 0;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ font-variation-settings: normal;
+ -webkit-text-size-adjust: 100%;
+ -webkit-tap-highlight-color: transparent;
+}
+
+@layer base {
+ :root {
+ --radius: 0.5rem;
+ --sticky-top-height: 70px;
+ }
+
+ :root,
+ [data-theme="dark"] {
+ /* bg - neutral */
+ --background: 0 0% 0%;
+ --card: 0 0% 3.92%;
+ --popover: 0 0% 0%;
+ --secondary: 0 0% 11%;
+ --muted: 0 0% 11%;
+ --accent: 0 0% 11%;
+ --inverted: 0 0% 100%;
+
+ /* bg - colorful */
+ --primary: 221 83% 54%;
+ --destructive: 360 72% 51%;
+
+ /* Text */
+ --foreground: 0 0% 98%;
+ --card-foreground: 0 0% 98%;
+ --popover-foreground: 0 0% 98%;
+ --primary-foreground: 0 0% 100%;
+ --secondary-foreground: 0 0% 98%;
+ --muted-foreground: 0 0% 63%;
+ --accent-foreground: 0 0% 98%;
+ --destructive-foreground: 0 0% 100%;
+ --link-foreground: 215.88 100% 65%;
+ --warning-text: 38 92% 50%;
+ --destructive-text: 360 72% 55%;
+ --success-text: 142 75% 50%;
+ --inverted-foreground: 0 0% 0%;
+
+ /* Borders */
+ --border: 0 0% 15%;
+ --active-border: 0 0% 22%;
+ --ring: 0 0% 30%;
+ --input: 0 0% 15%;
+ }
+
+ [data-theme="light"] {
+ /* bg - neutral */
+ --background: 0 0% 98%;
+ --popover: 0 0% 100%;
+ --card: 0 0% 100%;
+ --secondary: 0 0% 90%;
+ --muted: 0 0% 93%;
+ --accent: 0 0% 93%;
+ --inverted: 0 0 0%;
+
+ /* bg - colorful */
+ --primary: 221 83% 54%;
+ --destructive: 360 72% 51%;
+
+ /* Text */
+ --foreground: 0 0% 4%;
+ --card-foreground: 0 0% 4%;
+ --popover-foreground: 240 10% 4%;
+ --primary-foreground: 0 0% 100%;
+ --secondary-foreground: 0 0% 4%;
+ --muted-foreground: 0 0% 40%;
+ --accent-foreground: 0 0% 9%;
+ --destructive-foreground: 0 0% 100%;
+ --inverted-foreground: 0 0% 100%;
+ --link-foreground: 221.21deg 83.19% 53.33%;
+ --success-text: 142.09 70.56% 35.29%;
+ --warning-text: 38 92% 40%;
+ --destructive-text: 357.15deg 100% 68.72%;
+
+ /* Borders */
+ --border: 0 0% 85%;
+ --active-border: 0 0% 70%;
+ --input: 0 0% 85%;
+ --ring: 0 0% 80%;
+ }
+}
+
+/* If no data-theme is added in body, its in dark theme */
+body:not([data-theme="light"]) .light-only {
+ display: none;
+}
+
+[data-theme="light"] .dark-only {
+ display: none;
+}
+
+code span {
+ color: var(--code-dark-color);
+}
+
+body[data-theme="light"] code span {
+ color: var(--code-light-color);
+}
+
+/* @layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+} */
+
+.styled-scrollbar::-webkit-scrollbar {
+ width: 0.5rem;
+ height: 0.5rem;
+}
+
+@media (max-width: 640px) {
+ .styled-scrollbar::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ }
+}
+
+.styled-scrollbar::-webkit-scrollbar-thumb {
+ border-radius: 0.5rem;
+ transition: color 200ms ease;
+ background: var(--border);
+}
+
+.styled-scrollbar::-webkit-scrollbar-thumb:hover {
+ background: hsl(var(--foreground));
+}
+
+.styled-scrollbar::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+
+button {
+ -webkit-tap-highlight-color: transparent;
+}
+
+::selection {
+ background: hsl(var(--foreground));
+ color: hsl(var(--background));
+}
+
+.hide-scrollbar {
+ scrollbar-width: none; /* Firefox */
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+ display: none; /* Safari and Chrome */
+}
diff --git a/apps/login/src/app/layout.tsx b/apps/login/src/app/layout.tsx
new file mode 100644
index 00000000000..3f33940031e
--- /dev/null
+++ b/apps/login/src/app/layout.tsx
@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { Fira_Code, Inter } from "next/font/google";
+
+import "./globals.css";
+import { Providers } from "./providers";
+
+const sansFont = Inter({
+ subsets: ["latin"],
+ variable: "--font-sans",
+ weight: "variable",
+});
+
+const monoFont = Fira_Code({
+ subsets: ["latin"],
+ variable: "--font-mono",
+ weight: "variable",
+});
+
+export const metadata: Metadata = {
+ title: "login with thirdweb",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/apps/login/src/app/page.tsx b/apps/login/src/app/page.tsx
new file mode 100644
index 00000000000..ced5878657a
--- /dev/null
+++ b/apps/login/src/app/page.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { createThirdwebClient, getContract, sendTransaction } from "thirdweb";
+import { baseSepolia } from "thirdweb/chains";
+import { addSessionKey, isActiveSigner } from "thirdweb/extensions/erc4337";
+import { ConnectEmbed, useActiveAccount } from "thirdweb/react";
+import { isContractDeployed } from "thirdweb/utils";
+
+const sesionKeySignerAddress = "0x6f700ba0258886411D2536399624EAa7158d1742";
+
+const client = createThirdwebClient({
+ clientId: "e9ba48c289e0cc3d06a23bfd370cc111",
+});
+
+export default function Page() {
+ const account = useActiveAccount();
+
+ const onAccept = async () => {
+ if (!account) {
+ throw new Error("No account found");
+ }
+ const accountContract = getContract({
+ address: account.address,
+ // hard coded for now
+ chain: baseSepolia,
+ client,
+ });
+ let hasSesionKey = false;
+ // check if already added
+ const accountDeployed = await isContractDeployed(accountContract);
+ if (accountDeployed) {
+ hasSesionKey = await isActiveSigner({
+ contract: accountContract,
+ signer: sesionKeySignerAddress,
+ });
+ }
+ // if not added, send tx to add the session key
+ if (!hasSesionKey) {
+ const transaction = addSessionKey({
+ account,
+ contract: accountContract,
+ sessionKeyAddress: sesionKeySignerAddress,
+ // hard coded for now
+ permissions: { approvedTargets: "*" },
+ });
+ await sendTransaction({
+ account,
+ transaction,
+ });
+ }
+ };
+
+ const searchParams = useSearchParams();
+ const code = searchParams.get("code");
+ const clientId = searchParams.get("clientId");
+ const redirect = searchParams.get("redirect");
+
+ console.log({ code, clientId, redirect });
+
+ return (
+
+ {account ? (
+
+
Permissions Screen
+
+ - perm 1
+ - perm 2
+ - perm 3
+
+
+
+ ) : (
+
+ )}
+