fix(page): add character encoding and page titles (#1380 )

* added character encoding fix * changed multi-line to inline and added title param to send fn in src/server/pages/index.js * modified the return object of renderPage in src/server/pages/index.js
docs: reword callbacks.md
2026-05-01 10:55:20 +00:00 · 2021-03-01 21:17:51 +01:00 · 2021-02-28 18:05:10 +01:00 · 2021-02-27 23:43:45 +01:00
3 changed files with 72 additions and 54 deletions
--- a/src/server/pages/index.js
+++ b/src/server/pages/index.js
@@ -9,14 +9,34 @@ export default function renderPage (req, res) {
  const { baseUrl, basePath, callbackUrl, csrfToken, providers, theme } = req.options

  res.setHeader('Content-Type', 'text/html')
-  function send (html) {
-    res.send(`<!DOCTYPE html><head><style type="text/css">${css()}</style><meta name="viewport" content="width=device-width, initial-scale=1"></head><body class="__next-auth-theme-${theme}"><div class="page">${html}</div></body></html>`)
+  function send ({ html, title }) {
+    res.send(`<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>${css()}</style><title>${title}</title></head><body class="__next-auth-theme-${theme}"><div class="page">${html}</div></body></html>`)
  }

  return {
-    signin (props) { send(signin({ csrfToken, providers, callbackUrl, ...req.query, ...props })) },
-    signout (props) { send(signout({ csrfToken, baseUrl, basePath, ...props })) },
-    verifyRequest (props) { send(verifyRequest({ baseUrl, ...props })) },
-    error (props) { send(error({ basePath, baseUrl, res, ...props })) }
+    signin (props) {
+      send({
+        html: signin({ csrfToken, providers, callbackUrl, ...req.query, ...props }),
+        title: 'Sign In'
+      })
+    },
+    signout (props) {
+      send({
+        html: signout({ csrfToken, baseUrl, basePath, ...props }),
+        title: 'Sign Out'
+      })
+    },
+    verifyRequest (props) {
+      send({
+        html: verifyRequest({ baseUrl, ...props }),
+        title: 'Verify Request'
+      })
+    },
+    error (props) {
+      send({
+        html: error({ basePath, baseUrl, res, ...props }),
+        title: 'Error'
+      })
+    }
  }
 }
--- a/www/docs/configuration/callbacks.md
+++ b/www/docs/configuration/callbacks.md
@@ -112,52 +112,6 @@ callbacks: {
 The redirect callback may be invoked more than once in the same flow.
 :::

-## Session callback
-
-The session callback is called whenever a session is checked.
-
-e.g. `getSession()`, `useSession()`, `/api/auth/session`
-
-* When using database sessions, the User object is passed as an argument.
-* When using JSON Web Tokens for sessions, the JWT payload is provided instead.
-
-```js title="pages/api/auth/[...nextauth].js"
-...
-callbacks: {
-  /**
-   * @param  {object} session      Session object
-   * @param  {object} token        User object    (if using database sessions)
-   *                               JSON Web Token (if not using database sessions)
-   * @return {object}              Session that will be returned to the client 
-   */
-  async session(session, token) {
-    if(token?.accessToken) {
-      // Add property to session, like an access_token from a provider
-      session.accessToken = token.accessToken
-    }
-    return session
-  }
-}
-...
-```
-
-:::tip
-When using JSON Web Tokens the `jwt()` callback is invoked before the `session()` callback, so anything you add to the
-JSON Web Token will be immediately available in the session callback, like for example an `access_token` from a provider.
-:::
-
-:::tip
-To better represent its value, when using a JWT session, the second parameter should be called `token` (This is the same thing you return from the `jwt` callback). If you use a database, call it `user`.
-:::
-
-:::warning
-The session object is not persisted server side, even when using database sessions - only data such as the session token, the user, and the expiry time is stored in the session table.
-
-If you need to persist session data server side, you can use the `accessToken` returned for the session as a key - and connect to the database in the `session()` callback to access it. Session `accessToken` values do not rotate and are valid as long as the session is valid.
-
-If using JSON Web Tokens instead of database sessions, you should use the User ID or a unique key stored in the token (you will need to generate a key for this yourself on sign in, as access tokens for sessions are not generated when using JSON Web Tokens).
-:::
-
 ## JWT callback

 This JSON Web Token callback is called whenever a JSON Web Token is created (i.e. at sign 
@@ -206,3 +160,47 @@ NextAuth.js does not limit how much data you can store in a JSON Web Token, howe

 If you need to persist a large amount of data, you will need to persist it elsewhere (e.g. in a database). You can store a key that can be used to look up that data in the `session()` callback.
 :::
+
+## Session callback
+
+The session callback is called whenever a session is checked. By default, only a subset of the token is returned for increased security. If you want to make something available you added to the token through the `jwt()` callback, you have to explicitely forward it here to make it available to the client.
+
+e.g. `getSession()`, `useSession()`, `/api/auth/session`
+
+* When using database sessions, the User object is passed as an argument.
+* When using JSON Web Tokens for sessions, the JWT payload is provided instead.
+
+```js title="pages/api/auth/[...nextauth].js"
+...
+callbacks: {
+  /**
+   * @param  {object} session      Session object
+   * @param  {object} token        User object    (if using database sessions)
+   *                               JSON Web Token (if not using database sessions)
+   * @return {object}              Session that will be returned to the client 
+   */
+  async session(session, token) {
+    // Add property to session, like an access_token from a provider.
+    session.accessToken = token.accessToken
+    return session
+  }
+}
+...
+```
+
+:::tip
+When using JSON Web Tokens the `jwt()` callback is invoked before the `session()` callback, so anything you add to the
+JSON Web Token will be immediately available in the session callback, like for example an `access_token` from a provider.
+:::
+
+:::tip
+To better represent its value, when using a JWT session, the second parameter should be called `token` (This is the same thing you return from the `jwt()` callback). If you use a database, call it `user`.
+:::
+
+:::warning
+The session object is not persisted server side, even when using database sessions - only data such as the session token, the user, and the expiry time is stored in the session table.
+
+If you need to persist session data server side, you can use the `accessToken` returned for the session as a key - and connect to the database in the `session()` callback to access it. Session `accessToken` values do not rotate and are valid as long as the session is valid.
+
+If using JSON Web Tokens instead of database sessions, you should use the User ID or a unique key stored in the token (you will need to generate a key for this yourself on sign in, as access tokens for sessions are not generated when using JSON Web Tokens).
+:::
--- a/www/docs/configuration/pages.md
+++ b/www/docs/configuration/pages.md
@@ -7,7 +7,7 @@ NextAuth.js automatically creates simple, unbranded authentication pages for han

 The options displayed on the sign up page are automatically generated based on the providers specified in the options passed to NextAuth.js.

-To add a custom login page, for example. You can use the `pages` option:
+To add a custom login page, you can use the `pages` option:

 ```javascript title="pages/api/auth/[...nextauth].js"
 ...
@@ -121,4 +121,4 @@ signIn('credentials', { username: 'jsmith', password: '1234' })

 :::tip
 Remember to put any custom pages in a folder outside **/pages/api** which is reserved for API code. As per the examples above, a location convention suggestion is `pages/auth/...`. 
-:::
+:::