Spotify invalid_client error

[aaburgos4]

hi, I am trying to connect to Spotify for my app on localhost, but it is not working. I followed these Next-Auth installation instructions: https://authjs.dev/getting-started/installation and I am following the Spotify Provider directions on this page: https://authjs.dev/getting-started/authentication/oauth.

When I go to connect to Spotify, I am able to, but when it tries to redirect back to the app it says there is a problem with the server configuration and I land on an error page back on my app. My logs look like the following:

 ✓ Compiled /api/auth/[...nextauth] in 56ms (439 modules)
error { error: 'invalid_client' }
[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror
[auth][cause]: Error: TODO: Handle OAuth 2.0 response body error
    at handleOAuth (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/oauth/callback.js:112:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Module.callback (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/index.js:37:41)
    at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:39:24)
    at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:126:34)
    at async C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:55038
    at async ek.execute (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:45808)
    at async ek.handle (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:56292)
    at async doRender (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\base-server.js:1377:42)
    at async cacheEntry.responseCache.get.routeKind (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\base-server.js:1587:40)
    at async DevServer.renderToResponseWithComponentsImpl (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\base-server.js:1507:28)
    at async DevServer.renderPageComponent (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\base-server.js:1931:24)
    at async DevServer.renderToResponseImpl (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\base-server.js:1969:32)
    at async DevServer.pipeImpl (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\base-server.js:920:25)
    at async NextNodeServer.handleCatchallRenderRequest (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\next-server.js:272:17)
    at async DevServer.handleRequestImpl (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\base-server.js:816:17)
    at async C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\dev\next-dev-server.js:339:20
    at async Span.traceAsyncFn (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\trace\trace.js:154:20)
    at async DevServer.handleRequest (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\dev\next-dev-server.js:336:24)
    at async invokeRender (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\lib\router-server.js:353:24)
    at async requestHandlerImpl (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (C:\Users\aburgos3\Documents\Dev_Stuff\Continuous_Learning\NextJS\patchwerk\node_modules\next\dist\server\lib\start-server.js:141:13)
[auth][details]: {
  "provider": "spotify"
}
 GET /api/auth/callback/spotify?code=AQA5P_mh-VokqYqFuJWIro-rtu8a9TsgTN2EdEqT4uOK5uN7OK0ehyICou7T4YgQimoNtbg5dand9n4odmOKYZLZDNDHttSCXPvbdfpY9h70_Y4KVPJXlVm0W8Bm0xf1D62qeqegTXthY3ZjSRjNiviKTjFuuq28aNQByCgvT_1VK8vxudYz5VgG3KCE--un6vKro1O1FGlwE4ljZAUUKGSU6IzeCip6QlZjDGpoXEK7SbT6IBXYox5xuRFzsemVsI-nJTzv1K1RB0GnPL9C0H_hXvmzA24 302 in 243ms
 GET /api/auth/error?error=Configuration 500 in 11ms

I am not sure if I am missing any steps or if there is any other things I need to configure. Has anyone else had luck doing this? I ensured my redirect uri was http://localhost:3000/api/auth/callback/spotify.

Any help is appreciated. Thanks!