Experimental App Router: Login server action (wpengine#1562)

.changeset/gold-bags-flow.md

@@ -0,0 +1,23 @@
+---
+'@faustwp/experimental-app-router': patch
+---
+
+Added the `onLogin` server action to login a user:
+
+```tsx
+import { onLogin } from '@faustwp/experimental-app-router';
+
+<form action={loginAction}>
+  <fieldset>
+    <label htmlFor="usernameEmail">Username or Email</label>
+    <input type="name" name="usernameEmail" />
+  </fieldset>
+
+  <fieldset>
+    <label htmlFor="password">Password</label>
+    <input type="password" name="password" />
+  </fieldset>
+
+  <button type="submit">Login</button>
+</form>;
+```

examples/next/app-router/app/login/page.tsx

@@ -0,0 +1,47 @@
+import { onLogin } from '@faustwp/experimental-app-router';
+import { redirect } from 'next/navigation';
+
+export default async function Page() {
+  async function loginAction(formData: FormData) {
+    'use server';
+
+    const res = await onLogin(formData);
+
+    if (res.error) {
+      /**
+       * @TODO Next.js is still working on ways persisting error messages from
+       * server actions to the client.
+       *
+       * "Displaying loading or error states currently requires using
+       * Client Components. We are exploring options for server-side functions
+       * to retrieve these values as we move forward in stability for Server Actions."
+       *
+       * @link https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#error-handling
+       */
+      console.error(res.error);
+    } else {
+      redirect('/gated-content');
+    }
+  }
+
+  return (
+    <>
+      <h2>Login</h2>
+
+      {/* @ts-ignore */}
+      <form action={loginAction}>
+        <fieldset>
+          <label htmlFor="usernameEmail">Username or Email</label>
+          <input type="name" name="usernameEmail" />
+        </fieldset>
+
+        <fieldset>
+          <label htmlFor="password">Password</label>
+          <input type="password" name="password" />
+        </fieldset>
+
+        <button type="submit">Login</button>
+      </form>
+    </>
+  );
+}

examples/next/app-router/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/next/app-router/next.config.js

@@ -1,6 +1,5 @@
 /** @type {import('next').NextConfig} */
 export default {
-  appDir: true,
   experimental: {
     serverActions: true,
   },

examples/next/app-router/package.json

@@ -16,7 +16,7 @@
     "@faustwp/experimental-app-router": "^0.0.3",
     "@apollo/experimental-nextjs-app-support": "^0.4.1",
     "graphql": "^16.7.1",
-    "next": "^13.4.13",
+    "next": "^13.4.20-canary.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/next/app-router/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}