First Question
In my testing I ended up confusing myself on which part of my code would actually send the request to the spotify api for the user to login to their account. I asked ChatGPT for help.
Prompt: “I’m trying to write code to connect to the spotify and I’m working on using the PCKE Authorization method. I want to make the redirect to the spotify login page happen on a button press and even though I added an event listener, it still happens as soon as I load into the page. Which part of my code is triggering the spotify login or are there multiple parts that separately trigger it?” Followed by my code.
Chat GPT’s Response:
Chat GPT explained that urlParams.get(‘code’) will check if there is a code, and if there is a code it mean’s they’ve already redirected from the spotifiy login. It also recommended I put the redirectToSpotifyAuthorizeEndpoint(); function in the event listener. I thought I had done that, but I realized that I forgot the parenthesis, which is why ChatGPT thought it wasn’t in the eventlistener.
Turns out the issue I had of automatically redirecting was solved by an if statement, ChatGPT told me to check for the URLParams ode before creating the event listener and that fixed the automatic redirect.
Second Question
I still wasnt sure if I had done everything right though, so I asked ChatGPT if all of that code was actually supposed to be in the same file or if some was supposed to be in the page it redirects to.
Prompt:”That fixed the issue, but I’m not sure if I’m doing this right. Should all of this code be in the same file/page or should some of it be on the page it redirects to?” Followed by my code.
Chat GPT’s Response:
ChatGPT said that I need to seperate certain parts of my code between the frontend and backend. It said “In summary, you should separate the frontend and backend code, and the frontend should be responsible for initiating the Spotify login, while the backend should handle the actual OAuth2 flow, token exchange, and API requests. When the user is redirected back to your server with the authorization code, your server-side code can then exchange it for an access token.”
This was interesting to me, and definitely something I’m going to look into.