[next]: Add Authentication POC

examples/nextjs/kitchen-sink/package.json

@@ -9,11 +9,13 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
+		"@faustjs/auth": "workspace:*",
+		"@faustjs/data-fetching": "workspace:*",
 		"@faustjs/nextjs": "workspace:*",
 		"@faustjs/template-hierarchy": "workspace:*",
-		"@faustjs/data-fetching": "workspace:*",
 		"graphql": "^16.11.0",
 		"graphql-tag": "^2.12.6",
+		"iron-session": "^8.0.4",
 		"next": "15.2.4",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0"

examples/nextjs/kitchen-sink/src/components/BlogPostItem.js

@@ -1,32 +1,42 @@
-import Link from "next/link";
+import Link from 'next/link';
 
 export function BlogPostItem({ post }) {
-  const { title, date, excerpt, uri, featuredImage } = post ?? {};
+	const { title, date, excerpt, uri, featuredImage } = post ?? {};
 
-  return (
-    <article className='container max-w-4xl px-10 py-6 mx-auto rounded-lg shadow-sm bg-gray-50 mb-4'>
-      <time dateTime={date} className='text-sm text-gray-600'>
-        {new Date(date).toLocaleDateString("en-US", {
-          year: "numeric",
-          month: "long",
-        })}
-      </time>
+	return (
+		<article className="container max-w-4xl px-10 py-6 mx-auto rounded-lg shadow-sm bg-gray-50 mb-4">
+			<time
+				dateTime={date}
+				className="text-sm text-gray-600"
+				suppressHydrationWarning>
+				{new Date(date).toLocaleDateString('en-US', {
+					year: 'numeric',
+					month: 'long',
+				})}
+			</time>
 
-      {featuredImage && (
-        <img src={featuredImage?.node?.sourceUrl} alt='' className='w-full h-48 object-cover rounded-t-lg mt-2 mb-4' />
-      )}
+			{featuredImage && (
+				<img
+					src={featuredImage?.node?.sourceUrl}
+					alt=""
+					className="w-full h-48 object-cover rounded-t-lg mt-2 mb-4"
+				/>
+			)}
 
-      <h2 className='mt-3'>
-        <Link href={uri} className='text-2xl font-bold hover:underline'>
-          {title}
-        </Link>
-      </h2>
+			<h2 className="mt-3">
+				<Link href={uri} className="text-2xl font-bold hover:underline">
+					{title}
+				</Link>
+			</h2>
 
-      <div className='mt-2 mb-4' dangerouslySetInnerHTML={{ __html: excerpt }} />
+			<div
+				className="mt-2 mb-4"
+				dangerouslySetInnerHTML={{ __html: excerpt }}
+			/>
 
-      <Link href={uri} className='hover:underline text-orange-600 mt-4'>
-        Read more
-      </Link>
-    </article>
-  );
+			<Link href={uri} className="hover:underline text-orange-600 mt-4">
+				Read more
+			</Link>
+		</article>
+	);
 }

examples/nextjs/kitchen-sink/src/components/Header.js

@@ -1,20 +1,99 @@
-/* eslint-disable @next/next/no-html-link-for-pages */
 import Link from 'next/link';
+import { useState } from 'react';
+import Login from './Login';
+import { useLogout, useUser } from '@faustjs/nextjs/pages';
+import { useRouter } from 'next/router';
 
 export default function Header() {
+	const { user, refetch, isAuthenticated } = useUser();
+	const { logout } = useLogout();
+	const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+	const route = useRouter();
+
+	const openLoginModal = () => setIsLoginModalOpen(true);
+	const closeLoginModal = () => setIsLoginModalOpen(false);
+
+	const onLoggedIn = () => {
+		closeLoginModal();
+		refetch();
+	};
+
+	const logoutUser = () => {
+		logout({
+			onSuccess: () => {
+				refetch();
+			},
+		});
+	};
+
 	return (
-		<header className="bg-gray-800 text-white py-4 px-8">
-			<div className="flex justify-between items-center max-w-4xl mx-auto">
-				<div className="text-3xl font-semibold">
-					<Link href="/">Headless</Link>
+		<>
+			<header className="bg-gray-800 text-white py-4 px-8">
+				<div className="flex justify-between items-center max-w-4xl mx-auto">
+					<div className="text-3xl font-semibold">
+						<Link href="/">Headless</Link>
+					</div>
+
+					<nav className="flex items-center gap-4">
+						<Link href="/" className="text-lg hover:underline">
+							Home
+						</Link>
+
+						{isAuthenticated ? (
+							<div className="relative group">
+								<button className="text-lg hover:bg-gray-700 px-3 py-2 rounded-md transition-colors duration-200 flex items-center space-x-1">
+									<span>
+										Welcome, <strong>{user.name || user.username}</strong>
+									</span>
+									<svg
+										className="w-4 h-4"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24">
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											strokeWidth={2}
+											d="M19 9l-7 7-7-7"
+										/>
+									</svg>
+								</button>
+
+								<div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
+									<div className="py-1">
+										<button
+											onClick={logoutUser}
+											className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200">
+											Logout
+										</button>
+									</div>
+								</div>
+							</div>
+						) : route.asPath !== '/login' ? (
+							<button
+								onClick={openLoginModal}
+								className="text-lg hover:underline cursor-pointer bg-transparent border-none text-white">
+								Login
+							</button>
+						) : null}
+					</nav>
 				</div>
+			</header>
 
-				<nav className="space-x-6">
-					<Link href="/" className="text-lg hover:underline">
-						Home
-					</Link>
-				</nav>
-			</div>
-		</header>
+			{isLoginModalOpen && (
+				<div className="fixed inset-0 bg-gray-900/30 flex items-center justify-center z-50">
+					<div className="bg-white rounded-lg p-8 max-w-md w-full mx-4 relative">
+						<button
+							onClick={closeLoginModal}
+							className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 text-xl font-bold">
+							×
+						</button>
+						<h2 className="text-2xl font-bold mb-6 text-gray-800">Login</h2>
+
+						<Login closeModal={onLoggedIn} />
+					</div>
+				</div>
+			)}
+		</>
 	);
 }

examples/nextjs/kitchen-sink/src/components/Login.js

@@ -0,0 +1,64 @@
+import { useLogin } from '@faustjs/nextjs/pages';
+import { useState } from 'react';
+
+export default function Login({ closeModal = () => {}, onSuccess = () => {} }) {
+	const [usernameEmail, setUsernameEmail] = useState('');
+	const [password, setPassword] = useState('');
+
+	const { login, isLoading, error } = useLogin();
+
+	const submitForm = (e) => {
+		e.preventDefault();
+
+		login({
+			input: {
+				credentials: {
+					password,
+					username: usernameEmail,
+				},
+			},
+			onSuccess: () => {
+				onSuccess();
+				closeModal();
+			},
+		});
+	};
+
+	return (
+		<form onSubmit={submitForm} className="space-y-4">
+			<div>
+				<input
+					type="text"
+					name="username"
+					placeholder="Username or Email"
+					value={usernameEmail}
+					onChange={(e) => setUsernameEmail(e.target.value)}
+					className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+					required
+				/>
+			</div>
+			<div>
+				<input
+					type="password"
+					name="password"
+					placeholder="Password"
+					value={password}
+					onChange={(e) => setPassword(e.target.value)}
+					className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+					required
+				/>
+			</div>
+			{error && (
+				<div className="text-red-600 text-sm bg-red-50 border border-red-200 rounded-md p-2">
+					{error.message || 'Login failed. Please try again.'}
+				</div>
+			)}
+			<button
+				type="submit"
+				disabled={isLoading}
+				className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed text-white font-medium py-2 px-4 rounded-md transition-colors duration-200">
+				{isLoading ? 'Signing in...' : 'Sign In'}
+			</button>
+		</form>
+	);
+}

examples/nextjs/kitchen-sink/src/constants/sessionConfig.js

@@ -0,0 +1,7 @@
+import { defaultIronOptions } from '@faustjs/auth';
+
+export const sessionConfig = {
+	...defaultIronOptions,
+	password: process.env.SESSION_PASSWORD,
+	cookieName: 'faust-auth',
+};

examples/nextjs/kitchen-sink/src/lib/resolveWpRoute.js

@@ -0,0 +1,52 @@
+import availableTemplates from '@/wp-templates';
+import availableQueries from '@/wp-templates/templateQueries';
+import { fetchTemplateQueries } from '@faustjs/data-fetching';
+import { uriToTemplate } from '@faustjs/nextjs/pages';
+
+// Resolves the WordPress route based on the identifier (slug or ID) and fetches the necessary data
+// for the corresponding template. It returns the props needed for rendering the page.
+// If the route or template is not found, it returns a 404 response.
+
+export async function resolveWpRoute(identifier, isPreview, client) {
+	const uri = identifier ? `/${identifier.join('/')}/` : '/';
+
+	const variables = isPreview
+		? {
+				id: identifier?.[0],
+				asPreview: true,
+		  }
+		: { uri };
+
+	try {
+		const templateData = await uriToTemplate({
+			...variables,
+			availableTemplates: Object.keys(availableTemplates),
+			wordpressUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
+		});
+
+		if (
+			!templateData?.template?.id ||
+			templateData?.template?.id === '404 Not Found'
+		) {
+			return { notFound: true };
+		}
+
+		const queriesData = await fetchTemplateQueries({
+			availableQueries,
+			templateData,
+			client,
+			locale: templateData?.seedNode?.locale,
+		});
+
+		return {
+			props: {
+				uri,
+				templateData: JSON.parse(JSON.stringify(templateData)),
+				queriesData,
+			},
+		};
+	} catch (error) {
+		console.error('Error resolving template:', error);
+		return { notFound: true };
+	}
+}

examples/nextjs/kitchen-sink/src/pages/[[...identifier]].js

@@ -1,12 +1,11 @@
+import { resolveWpRoute } from '@/lib/resolveWpRoute';
 import { getAuthString } from '@/utils/getAuthString';
 import availableTemplates from '@/wp-templates';
-import availableQueries from '@/wp-templates/templateQueries';
-import {
-	createDefaultClient,
-	setGraphQLClient,
-	uriToTemplate,
-} from '@faustjs/nextjs/pages';
-import { fetchTemplateQueries } from '@faustjs/data-fetching';
+import { createDefaultClient, setGraphQLClient } from '@faustjs/nextjs/pages';
+
+// This is a catch-all dynamic route to handle all WordPress pages and posts.
+// It uses getStaticProps and getStaticPaths for SSG with fallback blocking.
+// It also supports Draft Mode previews with application passwords.
 
 export default function Page(props) {
 	const { templateData } = props;
@@ -34,47 +33,7 @@ export async function getStaticProps({
 
 	setGraphQLClient(client);
 
-	const uri = params?.identifier ? `/${params.identifier.join('/')}/` : '/';
-
-	const variables = isDraftModeEnabled
-		? {
-				id: params.identifier?.[0],
-				asPreview: true,
-		  }
-		: { uri };
-
-	try {
-		const templateData = await uriToTemplate({
-			...variables,
-			availableTemplates: Object.keys(availableTemplates),
-			wordpressUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
-		});
-
-		if (
-			!templateData?.template?.id ||
-			templateData?.template?.id === '404 Not Found'
-		) {
-			return { notFound: true };
-		}
-
-		const queriesData = await fetchTemplateQueries({
-			availableQueries,
-			templateData,
-			client,
-			locale: templateData?.seedNode?.locale,
-		});
-
-		return {
-			props: {
-				uri,
-				templateData: JSON.parse(JSON.stringify(templateData)),
-				queriesData,
-			},
-		};
-	} catch (error) {
-		console.error('Error resolving template:', error);
-		return { notFound: true };
-	}
+	return await resolveWpRoute(params?.identifier, isDraftModeEnabled, client);
 }
 
 export async function getStaticPaths() {

examples/nextjs/kitchen-sink/src/pages/api/preview.js

@@ -1,6 +1,9 @@
 import { getAuthString } from '@/utils/getAuthString';
 import { enablePreview } from '@faustjs/nextjs/pages';
 
+// This is a preview approach using Next.js Draft Mode with application passwords.
+// To enable Draft Mode previews, set the HWP Previews setting to: http://your.frontend/api/preview?secret=YOURSECRET&id={ID}
+
 export default enablePreview({
 	wordpressUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
 	expectedSecret: process.env.WP_PREVIEW_SECRET,