I made a music quizz using Next 14 and the spotify API.
To make it works I need to get an access token with client ID and SECRET, no need for user auth as I'm only using the songs previews.
In dev env I only used a service file with functions that send the API requests.
As you might know I can't have access to the .env.local with that setting.
When deploying on vercel this became an issue cause I can't access the env variable there either.
So I found out I need to use a route handler so I can keep my client keys outside the client side.
I still want to be able to use the fucntions I wrote on the service file, to keep most of the data treatment on the server side.
For the GET part it seems fine, I can call a getPlaylist in my route handler.
But for the POST function to send API keys to get the access token, it's more complicated and I'm not sure how to process.
For now I created a new Request in my route handler POST function to which I attached the headers with my API key as env variable :
export async function POST(request: NextRequest) {
request = new NextRequest("", {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
Authorization: `Basic ${btoa(
`${process.env.REACT_APP_CLIENT_KEY}:${process.env.REACT_APP_CLIENT_SECRET}`
)}`,
},
});
}
export async function GET(request: NextRequest, response: NextResponse) {
const playlist = await getShuffledPlaylist();
return Response.json({ playlist });
}
Then my getAccessToken function is called inside my getPlaylist function, so I guess the request I created add the headers on the POST method I'm using on the same route? The weird thing is I need to keep my getAccessToken as it is or it's not working, and it's kinda odd to have twice the same headers declared? I think despite that the solution is working, this is not exactly what am I supposed to do? I'm not sure what I should do from there to make my code "more proper". If needed I could for example move the whole getAccessTOken into the route handler, but then I don't know how to retrieve the access token in my getPlaylist function... Here is my service file :
const getAccessToken = async () => {
return fetch("https://accounts.spotify.com/api/token", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
Authorization: `Basic ${btoa(
`${process.env.REACT_APP_CLIENT_KEY}:${process.env.REACT_APP_CLIENT_SECRET}`
)}`,
},
body: new URLSearchParams({
grant_type: "client_credentials",
}),
})
.then((response) => {*data treatment blalblalbal*}
};
const getPlaylist = async (offsetNumber: string) => {
return getAccessToken()
.then((accessToken) =>
fetch(
`https://api.spotify.com/v1/playlists/uniuhn898798frefe9ghjb67f/tracks?offset=${offsetNumber}`,
{
method: "GET",
headers: {
Authorization: `Bearer ${accessToken}`,
},
}
)
)
.then((response) => *blablabla*);
};
I'm open to all sort of solutions, thanks!
EDIT: maybe it's a better solution?
I came to think about doing this in my route handler, and slightly modifying my service file accordingly, it seems it's a better solution, there's no more headers declared twice, and everything is happening server side.
Here my new route handler :
export async function GET(request: NextRequest) {
cookies().delete("access_token");
const accessToken = await getAccessToken();
cookies().set("access_token", accessToken);
const playlist = await getShuffledPlaylist();
return Response.json({ playlist });
}