-
+
+
diff --git a/packages/docs/src/app/oauth-client-metadata.json/route.ts b/packages/docs/src/app/oauth-client-metadata.json/route.ts
new file mode 100644
index 0000000..058e142
--- /dev/null
+++ b/packages/docs/src/app/oauth-client-metadata.json/route.ts
@@ -0,0 +1,18 @@
+import { NextRequest } from 'next/server';
+
+export function GET(request: NextRequest) {
+ const origin = new URL(request.url).origin;
+
+ return Response.json({
+ client_id: `${origin}/oauth-client-metadata.json`,
+ client_name: 'HappyView',
+ client_uri: origin,
+ redirect_uris: [`${origin}/oauth/callback`],
+ grant_types: ['authorization_code'],
+ response_types: ['code'],
+ scope: 'atproto transition:generic',
+ token_endpoint_auth_method: 'none',
+ application_type: 'web',
+ dpop_bound_access_tokens: true,
+ });
+}
diff --git a/packages/docs/src/app/oauth/callback/page.tsx b/packages/docs/src/app/oauth/callback/page.tsx
new file mode 100644
index 0000000..1fe9825
--- /dev/null
+++ b/packages/docs/src/app/oauth/callback/page.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getOAuthClient } from '@/lib/atproto-oauth';
+
+export default function OAuthCallback() {
+ const [error, setError] = useState
(null);
+
+ useEffect(() => {
+ getOAuthClient()
+ .then((client) => client.init())
+ .then((result) => {
+ const returnUrl = result?.state ?? '/blog';
+ window.location.replace(returnUrl);
+ })
+ .catch((err) => {
+ setError(err instanceof Error ? err.message : 'Login failed');
+ });
+ }, []);
+
+ if (error) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+ Completing login...
+
+
+ {documentUri && (
+
+ )}
+
+ {publicationUri && (
+
+ )}
+
+ {session && (
+
+ )}
+
+ {showLogin && (
+ {
+ setShowLogin(false);
+ setPendingAction(null);
+ }}
+ />
+ )}
+
+ );
+}
+
+function LoginDialog({
+ onSubmit,
+ onClose,
+}: {
+ onSubmit: (handle: string) => void;
+ onClose: () => void;
+}) {
+ const [handle, setHandle] = useState('');
+ const inputRef = useRef(null);
+
+ useEffect(() => {
+ inputRef.current?.focus();
+ }, []);
+
+ useEffect(() => {
+ const onKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onClose();
+ };
+ window.addEventListener('keydown', onKeyDown);
+ return () => window.removeEventListener('keydown', onKeyDown);
+ }, [onClose]);
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ const trimmed = handle.trim();
+ if (trimmed) onSubmit(trimmed);
+ };
+
+ return (
+ {
+ if (e.target === e.currentTarget) onClose();
+ }}
+ >
+
+
+ Log in with AT Protocol
+
+
+ Enter your handle to continue.
+
+
+
+