fix(plugin-multi-tenant): not setting cookie properly on login (#14107)

When using something like oauth, the cookie needs to be set.

This is because the login happens elsewhere and the user is redirected.
When the admin panel loads, there is already a user so the `useEffect`
does not run since the user does not change like it does when logging in
without oauth.

The fix was to check if there is an intialValue and no matching cookie,
then sync the tenants which will also set the cookie. Also useful if a
user logs in and has a stale tenant cookie set.

Author: JarrodMFlesch

packages/plugin-multi-tenant/src/providers/TenantSelectionProvider/index.client.tsx

@@ -65,26 +65,40 @@ const Context = createContext<ContextType>({
   updateTenants: () => null,
 })
 
-const setCookie = (value?: string) => {
+const DEFAULT_COOKIE_NAME = 'payload-tenant'
+
+const setTenantCookie = (args: { cookieName?: string; value: string }) => {
+  const { cookieName = DEFAULT_COOKIE_NAME, value } = args
   document.cookie = generateCookie<string>({
-    name: 'payload-tenant',
+    name: cookieName,
     maxAge: 60 * 60 * 24 * 365, // 1 year in seconds
     path: '/',
     returnCookieAsObject: false,
     value: value || '',
   })
 }
 
-const deleteCookie = () => {
+const deleteTenantCookie = (args: { cookieName?: string } = {}) => {
+  const { cookieName = DEFAULT_COOKIE_NAME } = args
   document.cookie = generateCookie<string>({
-    name: 'payload-tenant',
+    name: cookieName,
     maxAge: -1,
     path: '/',
     returnCookieAsObject: false,
     value: '',
   })
 }
 
+const getTenantCookie = (args: { cookieName?: string } = {}): string | undefined => {
+  const { cookieName = DEFAULT_COOKIE_NAME } = args
+  const value = `; ${document.cookie}`
+  const parts = value.split(`; ${cookieName}=`)
+  if (parts.length === 2) {
+    return parts.pop()?.split(';').shift()
+  }
+  return undefined
+}
+
 export const TenantSelectionProviderClient = ({
   children,
   initialTenantOptions,
@@ -119,9 +133,9 @@ export const TenantSelectionProviderClient = ({
     ({ id, refresh }: { id: number | string | undefined; refresh?: boolean }) => {
       setSelectedTenantID(id)
       if (id !== undefined) {
-        setCookie(String(id))
+        setTenantCookie({ value: String(id) })
       } else {
-        deleteCookie()
+        deleteTenantCookie()
       }
       if (refresh) {
         router.refresh()
@@ -171,7 +185,7 @@ export const TenantSelectionProviderClient = ({
 
         if (result.tenantOptions.length === 1) {
           setSelectedTenantID(result.tenantOptions[0].value)
-          setCookie(String(result.tenantOptions[0].value))
+          setTenantCookie({ value: String(result.tenantOptions[0].value) })
         }
       }
     } catch (e) {
@@ -199,21 +213,21 @@ export const TenantSelectionProviderClient = ({
   )
 
   React.useEffect(() => {
-    if (userChanged) {
+    if (userChanged || (initialValue && String(initialValue) !== getTenantCookie())) {
       if (userID) {
         // user logging in
         void syncTenants()
       } else {
         // user logging out
         setSelectedTenantID(undefined)
-        deleteCookie()
+        deleteTenantCookie()
         if (tenantOptions.length > 0) {
           setTenantOptions([])
         }
       }
       prevUserID.current = userID
     }
-  }, [userID, userChanged, syncTenants, tenantOptions])
+  }, [userID, userChanged, syncTenants, tenantOptions, initialValue])
 
   /**
    * If there is no initial value, clear the tenant and refresh the router.