Fetch only when payload-token is set

[Cuzart]

This is not really an issue but a proposal for a performance improvement. The component is initially fetching "me" to detect if a user is logged in. For regular visitors this increases the initial load even though they are not editors. In my own project I used a wrapper for the AdminBar to check if the payload-token HttpOnly Cookies is set. If so I render the admin bar which fetches "me". I could open a PR with this approach applied if someone else finds this useful.

const hasHttpOnlyCookie = (key: string) => {
    document.cookie = key + "=anything;path=/;";
    return document.cookie.indexOf(key + "=") == -1;
  }

  useEffect(() => {
    const tokenExists = hasHttpOnlyCookie("payload-token");
    if (tokenExists) setShowAdminBar(true);
  }, []);

[cbratschi]

Code snippet for Next.js SSR:

import { cookies } from 'next/headers';

...

function MyComponent() {
    const cookieStore = cookies();

    if (!cookieStore.has('payload-token')) {
        return null:
    }

    ...
}

This completely removes the admin bar for non-Payload users.

[notflip]

import { cookies } from 'next/headers';

Thanks for this @cbratschi Does this mean that you load the AdminBar in a server component? So without using 'use client'?

[cbratschi]

@notflip we implemented our own admin bar and just switched to the local API (payload.auth()) instead of using the cookies. It is mostly server rendered, menus are client components in our case.

[notflip]

@cbratschi That's what I've been working on yesterday as well, using a combo of server and client

export const AdminBar: React.FC<AdminBarProps> = async (props) => {
  const payload = await getPayload({config})
  const headers = await getHeaders()
  const {user} = await payload.auth({headers})

  if (!user) {
    return
  }

  return (
    <div>
      <AdminBarView {...props} />
    </div>
  )
}

One thing that bothers me, and it's also the case in the website template from Payload, is that you also see the admin bar when you use "live preview" in a collection, how do you deal with that?

[cbratschi]

@notflip thanks for mentioning this. We also render the admin bar in previews. We use a separate route for the previews and pass a preview property to the rendering component. Put it on our to do list 👍