Next.js Discord

Discord Forum

Using Cookies for axios.create headers

Unanswered
Billy posted this in #help-forum
Open in Discord
BillyOP
I'm using a snippet to short-cut the axios code using axios.create as the following example, so I can use short axios snippet for the action server functions in the "use server" file
import { getCookie } from "cookies-next";
import { cookies } from "next/headers";

const TOKEN = getCookie("token", { cookies });
console.log(TOKEN);

export const apiClient = axios.create({
  baseURL,
  headers: {
    Authorization: `Bearer ${TOKEN}`,
  },
});


but I got this error in he image

Conclusion: I wanna use the axios instance with the base URL and the token that is in the cookies, is there another solution for this example?

26 Replies

BillyOP
so I can not use it in the axios.create headers ?
@Billy so I can not use it in the `axios.create` headers ?
gin
u cant call cookies everywhere, ur function or component needs to be in the request scope
example in a ssr component or a function that runs in the middlware or anywhere on the edge
BillyOP
the way I used to use before in react axios.create is as I mentioned above that help me to make the code more short using axios is there a way to make it, I'm beginner in nextjs
take a look at this, from there u will find a way to implement it in your usecase
BillyOP
I read it before, but the main idea I used the axios.create inside a 'use server' file but the problem still exist
components and code by default runs on server
and cookies is only valid in a request response context
also, why are u using cookies-next when cookies already provided your typical cookie getter
i dont think u have read the docs
BillyOP
I used outside cookies library before because I was using the cookies to check if the user is logged in or not, but now I only depend on and endpoint to check the user validity.
in another way I do not need any cookies library but I used it from the biggening, so I can delete it now.

my question was can I use this snippet in and export it to make using axios more easy as I used in reactjs?

export const apiClient = axios.create({
  baseURL,
  headers: {
    Authorization: `Bearer ${cookies().get("token")?.value}`,
  },
});
@gin is this running on clientside?
BillyOP
ccokes-next library helps you to get the important cookies functions and the ability to use it in the client and the server side
gin
no, look
im asking if your apiClient is used on clientside
@gin im asking if your apiClient is used on clientside
BillyOP
absolutely I use it in the actions server file
gin
the issue is that your apiClient doesnt have the request context
BillyOP
what is the request context?
@Billy what is the request context?
gin
just completely remove your axios thing are write your own fetch wrapper that takes in the cookieStore as parameter
BillyOP
did not get it!