Allow more control over cookiePrefix config

[ysfaran]

If you use a SSR framework like Next.js and payload in one server (e.g. like the custom-server example), you will have a problem with the live preview sooner or later.

In my case I use the live preview feature for logged in and logged out states of my Next.js app. For example I have a header global defined which will look different for logged in and logged out users (e.g. only the logged out user will see a login button on the top right). An admin can then change text of buttons and header items.

The problem in my case now is that both, the admin UI (e.g. http://localhost:3000/admin) and the Next.js UI (e.g. http://localhostlocalhost:3000/), use the same user collection for authentication, but the admin user has no access to the Next.js UI and the Next.js user has no access to the admin UI.
When you want to add a live preview to a page where logged in state is required you would ideally login into the admin UI with one account and to the Next.js UI with another account. The problem though is that this is not possible since both application use the same cookie name. So if you log in on the admin UI you wont see the Next.js UI in a logged in state and if you log into the Next.js UI you wont be able to access the admin UI.

There are two ways this could be solved:

1. Allow setting the cookiePrefix per collection, not only globally. With this approach you could create two collections, one for admins and one for users. This means you could have a different cookie name for for each UI.
2. Allow passing a function to the global cookiePrefix which gets the current request object, to distinguish between UI's

Currently I work arround this by using yarn path with following diff (payload 2.5.0):

diff --git a/dist/auth/operations/login.js b/dist/auth/operations/login.js
index cb25599583fcd3a3f2b7b267d294456823921d09..383ed01e7f9d6969654d21f81a1981d1b76e9a78 100644
--- a/dist/auth/operations/login.js
+++ b/dist/auth/operations/login.js
@@ -118,7 +118,7 @@ async function login(incomingArgs) {
                 secure: collectionConfig.auth.cookies.secure
             };
             if (collectionConfig.auth.cookies.domain) cookieOptions.domain = collectionConfig.auth.cookies.domain;
-            args.res.cookie(`${config.cookiePrefix}-token`, token, cookieOptions);
+            args.res.cookie(`${config.cookiePrefix(req)}-token`, token, cookieOptions);
         }
         req.user = user;
         // /////////////////////////////////////
diff --git a/dist/auth/operations/logout.js b/dist/auth/operations/logout.js
index 6f9194531e2f6e817ca2142fafa285bc60103b99..b0297865f4d5e7694a0736b86c1a85a08e6856e7 100644
--- a/dist/auth/operations/logout.js
+++ b/dist/auth/operations/logout.js
@@ -37,7 +37,7 @@ async function logout(incomingArgs) {
             res
         }) || args;
     }, Promise.resolve());
-    res.clearCookie(`${config.cookiePrefix}-token`, cookieOptions);
+    res.clearCookie(`${config.cookiePrefix(req)}-token`, cookieOptions);
     return req.t('authentication:loggedOutSuccessfully');
 }
 const _default = logout;
diff --git a/dist/auth/operations/refresh.js b/dist/auth/operations/refresh.js
index dc9ed4c64501ff6fa745b6fb0ce0d7330e8e07e7..340a811c0012684bf80f40b92dc3f0cde62dc85a 100644
--- a/dist/auth/operations/refresh.js
+++ b/dist/auth/operations/refresh.js
@@ -65,7 +65,7 @@ async function refresh(incomingArgs) {
             secure: collectionConfig.auth.cookies.secure
         };
         if (collectionConfig.auth.cookies.domain) cookieOptions.domain = collectionConfig.auth.cookies.domain;
-        args.res.cookie(`${config.cookiePrefix}-token`, refreshedToken, cookieOptions);
+        args.res.cookie(`${config.cookiePrefix(args.req)}-token`, refreshedToken, cookieOptions);
     }
     let result = {
         exp,
diff --git a/dist/auth/operations/resetPassword.js b/dist/auth/operations/resetPassword.js
index 6c00e2bd2ca7012c9c371a0d0bcf17371a669015..f1d5b2fa19c795be366ea750aafbde938f146e66 100644
--- a/dist/auth/operations/resetPassword.js
+++ b/dist/auth/operations/resetPassword.js
@@ -83,7 +83,7 @@ async function resetPassword(args) {
                 secure: collectionConfig.auth.cookies.secure
             };
             if (collectionConfig.auth.cookies.domain) cookieOptions.domain = collectionConfig.auth.cookies.domain;
-            args.res.cookie(`${config.cookiePrefix}-token`, token, cookieOptions);
+            args.res.cookie(`${config.cookiePrefix(req)}-token`, token, cookieOptions);
         }
         const fullUser = await payload.findByID({
             id: user.id,
diff --git a/dist/config/defaults.js b/dist/config/defaults.js
index 7f8cc64c1442d1062742f1e2a1b80f01f103adab..36a6e5a9f6e7289e99ad00ba783fd402eed388c0 100644
--- a/dist/config/defaults.js
+++ b/dist/config/defaults.js
@@ -30,7 +30,7 @@ const defaults = {
         }
     },
     collections: [],
-    cookiePrefix: 'payload',
+    cookiePrefix: () => 'payload',
     cors: [],
     csrf: [],
     custom: {},
diff --git a/dist/config/schema.js b/dist/config/schema.js
index 58c0bb63aff0c737f0dce491f65d03152727ec4a..2018ea5bec7cfc06ada028d488fe0df0b76a9bab 100644
--- a/dist/config/schema.js
+++ b/dist/config/schema.js
@@ -89,7 +89,7 @@ const _default = _joi.default.object({
         webpack: _joi.default.func()
     }),
     collections: _joi.default.array(),
-    cookiePrefix: _joi.default.string(),
+    cookiePrefix: _joi.default.func(),
     cors: [
         _joi.default.string().valid('*'),
         _joi.default.array().items(_joi.default.string())
diff --git a/dist/config/types.d.ts b/dist/config/types.d.ts
index 7d1efd38c513a96267936d7135f895c252e1111c..e79e21498c4d677d227d5b782e0b3ebe5c6cdca3 100644
--- a/dist/config/types.d.ts
+++ b/dist/config/types.d.ts
@@ -441,7 +441,7 @@ export type Config = {
      *
      * @default "payload"
      */
-    cookiePrefix?: string;
+    cookiePrefix?: (({ req: any }) => string);
     /** Either a whitelist array of URLS to allow CORS requests from, or a wildcard string ('*') to accept incoming requests from any domain. */
     cors?: '*' | string[];
     /** A whitelist array of URLs to allow Payload cookies to be accepted from as a form of CSRF protection. */

In my payload config I can define this:

cookiePrefix: (req: any) => {
    return (req as Request).headers.referer?.startsWith(
      `${process.env.PAYLOAD_PUBLIC_SERVER_URL}/admin`,
    )
      ? 'payload-admin'
      : 'next-user'
  },

Obviously this was just a dirty fix and you could still be backwards compatible by allowing a string OR a function for cookiePrefix.

If you are happy with the 2. solution I'm glad to open a PR with a proper implementation. (for the 1. solution I would need more time for digging deeper, but could still do it a bit later guess.)

[Kikky]

+1 to this. Have the same problem