Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fetch only when payload-token is set #2

Open
Cuzart opened this issue May 23, 2023 · 1 comment
Open

Fetch only when payload-token is set #2

Cuzart opened this issue May 23, 2023 · 1 comment

Comments

@Cuzart
Copy link

Cuzart commented May 23, 2023

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants