CODEWITHSUNDEEP
next.jsreact-hooksspotifyreact-strictmode
pepe
pepe

Reputation: 21

Callback function triggers several times

I'm trying to implement this logic:

User presses the button -> button calls "api/login" -> api/login constructs the Spotify authorization URL and redirects user to Spotify permission window -> then Spotify redirects to a callback page with Spotify query params -> after this I'm sending the code to my auth API and redirect back to my page.

But for some reasons callback triggers 3 times, while other pieces running only once.

Button Function

  const handler = (name) => {
    console.log("runnig"); 
    if (name === "Your account") {
      window.location.replace("/api/login");
    }
  };

login

export async function GET() {
  let url =
    "https://accounts.spotify.com/authorize?" +
    querystring.stringify({
      response_type: "code",
      client_id: process.env.CLIENT_ID, 
      scope: "",
      redirect_uri: process.env.REDIRECT_URI, 
      state: state, 
    });
  return NextResponse.redirect(url);
}

Callback

export default function Callback() {
// 3x running with reactStrict 2x running without 

  useEffect(() => {
// 2x running with reactStrict 1x runnig without 
    processQuery();
  }, []);

  return <div>Processing...</div>;
}
const processQuery = async () => {
  const querySearch = new URLSearchParams(window.location.search);
  await sendQuery(querySearch);
  window.location.href =
    process.env.NEXT_PUBLIC_API_BASE_URL + window.location.search;
};

I tried to disable reactStrict and now it triggers 2 times instead of one but my logic wrapped in useEffect so its working fine (running only once). If something is completely wrong and uncommon please tell me.

Upvotes: 1

Views: 77

Answers (0)

Related Questions