How Can I Access localstorage from server Component?

[clevermiraz]

Is There Any Way to Get localstorage directly In the server component?

Or Now I Think In the Server Component,
make a client Component then Get The localstorage from there then Use It.

Basically, In localstorage we store accessToken we need that For Fetching Private Data.

[icyJoseph]

Well, the short lazy answer, is that you can't, because Server Components exist only on the Server Side. They do not have access to browser APIs, let alone data stored within those APIs.

It is the equivalent is trying to access the window innerWidth from a Server Component.

That being said, Server Actions, are the alternative, to activate server side work, from the client, and use the result of calling that Server Action to populate the UI. It'd be the equivalent of doing useState + useEffect.

Otherwise, you'd need to re-think your approach. It seems like you'd benefit from using httpOnly cookies, for this use case.

[clevermiraz]

Okay, I Understand.

So Now I Think, getting tokens from cookies is a good idea.

Or Should I Need to Rethink?

for getting cookies I'm using next/headers

https://nextjs.org/docs/app/api-reference/functions/headers

[prkagrawal]

First of all, private data should never be stored in local storage, why not

Now you can use http-only cookie or auth header for storing user token. Both have their pros and cons

Also if you are using http-only cookie you will have to use https for development, because they can't be tested on localhost.

[Shyam-Raghuwanshi]

Hi @prkagrawal @clevermiraz, i have this code and i want a value from localStorage and the value is not a private data the value is for redirect the user when user come on the website , and this is not a api call from anywhere so i can't set the headers

export async function getServerSideProps({ req, res }: GetServerSidePropsContext) {
  const session = await getServerSession({ req, res });

  if (!session?.user?.id) {
    return { redirect: { permanent: false, destination: "/auth/login" } };
  }

  return { redirect: { permanent: false, destination: "/event-types" } };
}

export default RedirectPage;

then what should i do?