How do I make this library work with NextAuth?

[jkohlin]

I'm sorry if this is a newbie question, but I can't get the SpotifyApi to understand that it is authenticated. So I am using the nextAuth SpotifyProvider to authenticate agains Spotify. This works.

But what I can't figure out is how to use this library on the client side to make the API calls to Spotify Currently I do this in a custom useSpotify hook (not the one in this example react folder) I there I do

// NextAuth session
const { data: session, status } = useSession() as { data: SpotifySession | null; status: string };
const sessionAT = session.user.token.accessToken;

// You can also use this method if you already have an access token and don't want to use the built-in authentication strategies.
const sdk = SpotifyApi.withAccessToken(clientId, sessionAT);
const {authenticated, accessToken } =  await sdk.authenticate();

//debugging:
console.log(accessToken === sessionAT) // true
console.log(status, authenticated) // 'authenticated' false

So, How do I inform SpotifyApi that I am authenticated?

[martinmiglio]

You have to configure a few things to get this working:

• Tell NextAuth to request an access token with the desired API scopes
• Save the access token in the JWT managed by NextAuth and expose it to the session
• Create an Auth Strategy for the Spotify SDK which accesses the NextAuth session

In this gist is my implementation of these components, I hope this helps.

[davidwhitney]

@martinmiglio that gist is awesome 🖤 @thisisjofrank should probably look into incorporating it into the docs as an example!

[martinmiglio]

@davidwhitney thank you 😅

I would be open to contributing an example following the example_react, maybe example_next? Let me know if that is something of interest.

[jkohlin]

That'd be awesome! ❤️

[thisisjofrank]

@martinmiglio an example_next would be absolutely incredible, thank you!