Блог

Я создал веб-приложение, которое позволяет мне входить в систему с помощью Spotify, а также получать токен доступа пользователей, необходимый для использования API. Однако я не уверен в том, как вставить маркер пользователей из их сеанса в заголовки API.

Я вижу в консоли, что запрос на авторизацию возвращает токен пользователя, и я убедился, что они работают.

Я использую Next-Auth для аутентификации пользователя через Spoitfy. Мой текущий файл […nextauth].js

 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
    }
  },
})
 

Мой текущий файл для выполнения запроса API с помощью 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;