Using HttpOnly Secure Cookies in Client Component via Server Action

[abhishekmardiya]

Summary

I’m using secure (HttpOnly) cookies in a client component by accessing them through a server action. Are there any potential drawbacks to this approach?

For context, I’m not passing the token through layout.tsx or page.tsx since the client component is deeply nested in the DOM, and I want to avoid prop drilling.

Server Action

"use server"

import { cookies } from "next/headers";

export const getSecureCookies = async () => {
  const cookieStore = await cookies();
  const token = cookieStore?.get(CookieStorageKeys.TOKEN)?.value || "";
}

Client Component

"use client"

import { useEffect, useState } from "react";
import { getSecureCookies } from "@/server-actions/common/actions";

export const DashboardBtn = () => {
  const [token, setToken] = useState("");

  const getToken = async () => {
    const { token } = await getSecureCookies();
    setToken(token);
  };

  useEffect(() => {
    getToken();
  }, []);

 return (
    <Link href={`${OTHER_ROUTES?.adminPanel}?token=${token}`}>Dashboard</Link>
  );
};

Additional information

No response

Example

No response