docs: doc updates

docs/building-your-app.md

@@ -38,16 +38,13 @@ Make sure the services are mounted at route `/api/zenstack/` with a catch all pa
 
 ## <small>_optional_</small> Integrating with NextAuth
 
-If you use NextAuth for authentication, ZenStack also generates an adapter which you can use to configure NextAuth for persistence of user, session, etc.
+If you use NextAuth for authentication, you can install the `@zenstackhq/next-auth` package for easier integration. This package provides an adapter and authorization helper that you can use to configure NextAuth.
 
 ```ts
 // pages/api/auth/[...nextauth].ts
 
 import service from '@zenstackhq/runtime';
-import {
-    authorize,
-    NextAuthAdapter as Adapter,
-} from '@zenstackhq/runtime/auth';
+import { authorize, Adapter } from '@zenstackhq/next-auth';
 import NextAuth, { type NextAuthOptions } from 'next-auth';
 
 export const authOptions: NextAuthOptions = {
@@ -68,6 +65,8 @@ export const authOptions: NextAuthOptions = {
 export default NextAuth(authOptions);
 ```
 
+Find more details [here](integrating-authentication.md) about integrating with different authentication schemes.
+
 ## Using React hooks
 
 React hooks are generated for CRUD'ing each data model you defined. They save your time writing explicit HTTP requests to call the generated services. Internally the hooks use [SWR](https://swr.vercel.app/) for data fetching, so you'll also enjoy its built-in features, like caching, revalidation on interval, etc.

docs/index.html

@@ -18,7 +18,10 @@
             content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
         />
 
-        <meta property="og:image" content="_media/og-image.png" />
+        <meta
+            property="og:image"
+            content="https://zenstack.dev/_media/banner.png"
+        />
 
         <meta
             property="og:title"
@@ -35,9 +38,12 @@
             content="https://zenstackhq.github.io/zenstack"
         />
 
-        <meta name="twitter:card" content="summary" />
+        <meta name="twitter:card" content="summary_large_image" />
 
-        <meta property="twitter:image" content="_media/og-image.png" />
+        <meta
+            property="twitter:image:src"
+            content="https://zenstack.dev/_media/banner.png"
+        />
 
         <meta
             property="twitter:title"

docs/integrating-authentication.md

@@ -6,15 +6,17 @@ This documentation explains how to integrate ZenStack with popular authenticatio
 
 [NextAuth](https://next-auth.js.org/) is a comprehensive framework for implementating authentication. It offers a pluggable mechanism for configuring how user data is persisted. You can find a full example using ZenStack with NextAuth [here](https://github.com/zenstackhq/zenstack/tree/main/samples/todo ':target=blank').
 
-### Using generated adapter
+ZenStack provides an extension package `@zenstackhq/next-auth` for integrating with NextAuth, which includes:
 
-When `zenstack generate` runs, it generates an adapter for NextAuth if it finds the `next-auth` npm package is installed. The generated adapter can be configured to NextAuth as follows:
+### Adapter
+
+Adapter is a NextAuth mechanism for hooking in custom persistence of auth related entities, like User, Account, etc. The ZenStack adapter can be configured to NextAuth as follows:
 
 ```ts
 // pages/api/auth/[...nextauth].ts
 
 import service from '@zenstackhq/runtime/server';
-import { NextAuthAdapter as Adapter } from '@zenstackhq/runtime/server/auth';
+import { Adapter } from '@zenstackhq/next-auth';
 import NextAuth, { type NextAuthOptions } from 'next-auth';
 
 export const authOptions: NextAuthOptions = {
@@ -26,15 +28,15 @@ export const authOptions: NextAuthOptions = {
 export default NextAuth(authOptions);
 ```
 
-### Using generated `authorize`
+### `authorize` helper
 
-If you use [`CredentialsProvider`](https://next-auth.js.org/providers/credentials ':target=blank'), i.e. username/password based auth, you can also use the generated `authorize` function to implement how username/password is verified against the database:
+If you use [`CredentialsProvider`](https://next-auth.js.org/providers/credentials ':target=blank'), i.e. email/password based auth, you can also use the `authorize` helper to implement how credentials are verified against the database:
 
 ```ts
 // pages/api/auth/[...nextauth].ts
 
 import service from '@zenstackhq/runtime/server';
-import { authorize } from '@zenstackhq/runtime/server/auth';
+import { authorize } from '@zenstackhq/next-auth';
 import NextAuth, { type NextAuthOptions } from 'next-auth';
 
 export const authOptions: NextAuthOptions = {

docs/zmodel-attribute.md

@@ -445,7 +445,7 @@ You can find a list of predefined attribute functions [here](#predefined-attribu
         function auth(): User {}
     ```
 
-    Gets thec current login user. The return type of the function is the `User` data model defined in the current ZModel.
+    Gets the current login user. The return type of the function is the `User` data model defined in the current ZModel.
 
 ## Examples