Log in to ATProto

app/api/auth/atproto/route.ts

···
+import AtpAgent from "@atproto/api";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+	try {
+		const { hostingProvider, identifier, password } = await request.json();
+		const hostingProviderURL = hostingProvider || "https://bsky.social";
+		const agent = new AtpAgent({ service: hostingProviderURL });
+
+		await agent.login({ identifier, password });
+
+		return NextResponse.json({
+			did: agent.session?.did,
+			handle: agent.session?.handle,
+			success: true
+		});
+	} catch (error) {
+		return NextResponse.json(
+			{ error: error.message, success: false },
+			{ status: 401 }
+		);
+	}
+}

app/page.tsx

···
 	const [atProtoIdentifier, setAtProtoIdentifier] = useState("");
 	const [currentPlaying, setCurrentPlaying] = useState("");
 	const [hostingProvider, setHostingProvider] = useState("");
+	const [isLoggingIn, setIsLoggingIn] = useState(false);
 	const [lastFMUsername, setLastFMUsername] = useState("");
 	const [password, setPassword] = useState("");
 	const [usernameInput, setUsernameInput] = useState("");
 
+	const loginToATProto = async () => {
+		setIsLoggingIn(true);
+		
+		try {
+			const response = await fetch("/api/auth/atproto", {
+				body: JSON.stringify({
+					hostingProvide: hostingProvider || "https://bsky.social",
+					identifier: atProtoIdentifier,
+					password
+				}),
+				headers: { "Content-Type": "application/json" },
+				method: "POST"
+			});
+			const data = await response.json();
+
+			console.log(data);
+		} catch (error) {
+		} finally {
+			setIsLoggingIn(false);
+		}
+	};
+
 	const scp = async () => {
 		const response = await fetch(`/api/lastfm?username=${usernameInput}`);
 		const data = await response.json();
···
 		setLastFMUsername(usernameInput);
 		setUsernameInput("");
 
-		console.log(data)
+		console.log(data);
 
 		const mostRecentlyScrobbledTrack = data?.recenttracks?.track?.[0];
 
···
 					/>
 				</div>
 				<Button
-					label="Log In"
-					onClick={async () => {}}
+					label={isLoggingIn ? "Logging In..." : "Log In"}
+					onClick={loginToATProto}
 					width="w-1/2"
 				/>
 			</div>

package-lock.json

···
       "name": "scrobbletobio",
       "version": "0.1.0",
       "dependencies": {
+        "@atproto/api": "^0.17.7",
+        "lucide-react": "^0.548.0",
         "next": "16.0.1",
         "react": "19.2.0",
         "react-dom": "19.2.0"
···
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@atproto/api": {
+      "version": "0.17.7",
+      "resolved": "https://registry.npmjs.org/@atproto/api/-/api-0.17.7.tgz",
+      "integrity": "sha512-V+OJBZq9chcrD21xk1bUa6oc5DSKfQj5DmUPf5rmZncqL1w9ZEbS38H5cMyqqdhfgo2LWeDRdZHD0rvNyJsIaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@atproto/common-web": "^0.4.3",
+        "@atproto/lexicon": "^0.5.1",
+        "@atproto/syntax": "^0.4.1",
+        "@atproto/xrpc": "^0.7.5",
+        "await-lock": "^2.2.2",
+        "multiformats": "^9.9.0",
+        "tlds": "^1.234.0",
+        "zod": "^3.23.8"
+      }
+    },
+    "node_modules/@atproto/api/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/@atproto/common-web": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@atproto/common-web/-/common-web-0.4.3.tgz",
+      "integrity": "sha512-nRDINmSe4VycJzPo6fP/hEltBcULFxt9Kw7fQk6405FyAWZiTluYHlXOnU7GkQfeUK44OENG1qFTBcmCJ7e8pg==",
+      "license": "MIT",
+      "dependencies": {
+        "graphemer": "^1.4.0",
+        "multiformats": "^9.9.0",
+        "uint8arrays": "3.0.0",
+        "zod": "^3.23.8"
+      }
+    },
+    "node_modules/@atproto/common-web/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/@atproto/lexicon": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@atproto/lexicon/-/lexicon-0.5.1.tgz",
+      "integrity": "sha512-y8AEtYmfgVl4fqFxqXAeGvhesiGkxiy3CWoJIfsFDDdTlZUC8DFnZrYhcqkIop3OlCkkljvpSJi1hbeC1tbi8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@atproto/common-web": "^0.4.3",
+        "@atproto/syntax": "^0.4.1",
+        "iso-datestring-validator": "^2.2.2",
+        "multiformats": "^9.9.0",
+        "zod": "^3.23.8"
+      }
+    },
+    "node_modules/@atproto/lexicon/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/@atproto/syntax": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@atproto/syntax/-/syntax-0.4.1.tgz",
+      "integrity": "sha512-CJdImtLAiFO+0z3BWTtxwk6aY5w4t8orHTMVJgkf++QRJWTxPbIFko/0hrkADB7n2EruDxDSeAgfUGehpH6ngw==",
+      "license": "MIT"
+    },
+    "node_modules/@atproto/xrpc": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@atproto/xrpc/-/xrpc-0.7.5.tgz",
+      "integrity": "sha512-MUYNn5d2hv8yVegRL0ccHvTHAVj5JSnW07bkbiaz96UH45lvYNRVwt44z+yYVnb0/mvBzyD3/ZQ55TRGt7fHkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@atproto/lexicon": "^0.5.1",
+        "zod": "^3.23.8"
+      }
+    },
+    "node_modules/@atproto/xrpc/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
···
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/await-lock": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/await-lock/-/await-lock-2.2.2.tgz",
+      "integrity": "sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw==",
+      "license": "MIT"
+    },
     "node_modules/axe-core": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz",
···
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/has-bigints": {
···
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/iso-datestring-validator": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/iso-datestring-validator/-/iso-datestring-validator-2.2.2.tgz",
+      "integrity": "sha512-yLEMkBbLZTlVQqOnQ4FiMujR6T4DEcCb1xizmvXS+OxuhwcbtynoosRzdMA69zZCShCNAbi+gJ71FxZBBXx1SA==",
+      "license": "MIT"
+    },
     "node_modules/iterator.prototype": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
···
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.548.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.548.0.tgz",
+      "integrity": "sha512-63b16z63jM9yc1MwxajHeuu0FRZFsDtljtDjYm26Kd86UQ5HQzu9ksEtoUUw4RBuewodw/tGFmvipePvRsKeDA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
···
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true,
       "license": "MIT"
+    },
+    "node_modules/multiformats": {
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/multiformats/-/multiformats-9.9.0.tgz",
+      "integrity": "sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==",
+      "license": "(Apache-2.0 AND MIT)"
     },
     "node_modules/nanoid": {
       "version": "3.3.11",
···
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tlds": {
+      "version": "1.261.0",
+      "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.261.0.tgz",
+      "integrity": "sha512-QXqwfEl9ddlGBaRFXIvNKK6OhipSiLXuRuLJX5DErz0o0Q0rYxulWLdFryTkV5PkdZct5iMInwYEGe/eR++1AA==",
+      "license": "MIT",
+      "bin": {
+        "tlds": "bin.js"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
···
       "peerDependencies": {
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/uint8arrays": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-3.0.0.tgz",
+      "integrity": "sha512-HRCx0q6O9Bfbp+HHSfQQKD7wU70+lydKVt4EghkdOvlK/NlrF90z+eXV34mUd48rNvVJXwkrMSPpCATkct8fJA==",
+      "license": "MIT",
+      "dependencies": {
+        "multiformats": "^9.4.2"
       }
     },
     "node_modules/unbox-primitive": {

package.json

···
     "lint": "eslint"
   },
   "dependencies": {
+    "@atproto/api": "^0.17.7",
+    "lucide-react": "^0.548.0",
+    "next": "16.0.1",
     "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "next": "16.0.1"
+    "react-dom": "19.2.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.1",
     "tailwindcss": "^4",
-    "eslint": "^9",
-    "eslint-config-next": "16.0.1"
+    "typescript": "^5"
   }
 }