Inserting access token from session into API request - reactjs

Question

I have built a web app that allows me to login with Spotify and also gain the users access token which is required for the use of the API. However I am unsure on how to insert the users token from their session into the API's headers.
I can see in the console that the authorization request does return a user token and I have verified they do work.
I am using Next-Auth for authenticating the user through Spoitfy.
My current [...nextauth].js file
import NextAuth from "next-auth"
import Providers from "next-auth/providers"
import Spotify from "../../../providers/spotify"
import Twitch from "../../..//providers/twitch"
export default (req, res) => NextAuth(req, res, {
providers: [
Spotify({
clientId: process.env.SPOTIFY_CLIENT_ID,
clientSecret: process.env.SPOTIFY_CLIENT_SECRET,
}),
Twitch({
clientId: process.env.TWITCH_CLIENT_ID,
clientSecret: process.env.TWITCH_CLIENT_SECRET,
})
],
callbacks: {
async jwt(token, _, session) {
if (session) {
token.id = session.id
token.accessToken = session.accessToken
}
console.log(token);
return token
},
async session(session, user) {
session.user = user
return session
}
},
})
My current file for making the API request using axios
import axios from "axios";
import { VStack, Heading, Text, Box, Center } from "#chakra-ui/layout";
import { signIn, signOut, useSession } from 'next-auth/client'
const Spotify = ({ Spotify }) => { if(!Spotify){ return <div>Loading...</div> }
// eslint-disable-next-line react-hooks/rules-of-hooks
const [ session, loadings ] = useSession();
console.log(Spotify);
return (
<VStack>
{Spotify.map((Spoty) => (
<div key={Spoty.id}>
<Heading>{Spoty.name}</Heading>
<Text>Link: {Spoty.href}</Text>
<Text>Owner: {Spoty.owner.display_name}</Text>
</div>
))}
</VStack>
);
};
Spotify.getInitialProps = async (ctx) => {
try {
const res = await axios.get("https://api.spotify.com/v1/me/playlists", {
headers: {
Authorization: `Bearer ${session.user.accessToken}`
}
});
const Spotify = res.data.items;
return { Spotify };
} catch (error) {
return { error };
}
};
export default Spotify;