I have a component in Nextjs AddressPage
and I want to take advantage of Nextjs SSR to display all my HTML in page source using getServerSideProps
.
In the getServerSideProps
I am calling an API to fetch the addresses and the API needs access_token
to be passed, and access_token
is stored in local storage.
What is the best implementation to fetch access to local storage for the access_token
?
access_token
is set while the login API is called before fetching addresses.
Here are my codes:
AddressPage.component.tsx:
import React, { useState, useEffect } from "react";
import { get } from "@/services/http-apis";
const AddressPage = ({ addressListSSR, addressListSSR }: any) => {
return (
<div>{addressListSSR}-{addressListSSR}</div>
);
};
export const getServerSideProps = async (context: any) => {
const isUserLoggedInSSR = true;
let addressListSSR = [];
try {
let res = await get(`/api/v1/address`);
addressListSSR = res?.data || [];
} catch (error) {
console.error("RESPONSE Error:", error);
}
return {
props: {
addressListSSR,
isUserLoggedInSSR,
},
};
};
export default AddressPage;
http-apis.js:
import { api } from "../config/config";
const { baseURL: BASE_URL } = api;
export const get = async (url = {}) => {
try {
const URL = `${BASE_URL}${url}`;
const ISSERVER = typeof window === "undefined";
console.log("ISSERVER:", ISSERVER);
let auth = "{}";
if (!ISSERVER) {
auth = localStorage.getItem("auth");
const { access_token } = JSON.parse(auth || {}) || {};
const headers = {
"Content-Type": "application/json",
};
if (access_token) {
headers["Authorization"] = `Bearer ${access_token}`;
}
const response = await fetch(URL, {
method: "GET",
mode: "cors",
headers,
});
return response;
} else {
console.log("Cant use local storage in SSR");
return undefined;
}
} catch (error) {
throw error;
}
};
When I am calling API /api/v1/address
, it fails because this API need an access token and we can not use local storage in the SSR context. but I need token anyhow to pass in the API.
What can I change in the code to achieve the same? any kind of support will be appreciated
2
Answers
you cant access local storage from the server because local storage is in user’s browser
you should use cookies to store your token
cookies is something that can be a access in client side and server side
You can’t access
localStorage
in theNode.js
‘s environment. One of the standard methods for persisting some data across server and client environments inNext.ts
is to usecookies
.Here are the changes you need to make to use
cookies
instead oflocalStorage
:access_token
in thecookies
after a user logged in successfullyaccess_token
fromcookies
ingetServerSideProps
:get
function to accept theaccess_token
as an argument(or retrieve the access token inside the function instead of passing it as an argument)