node.js - No token provided Spotify Api nodejs react

Question

I have this function that returns the access token for users to consult Spotify api, I import the function into my component document in the constant token, whit this token I wanted to get some data from a route I have in the backend, but According to the documentation I got to transform or recipt the token in someting like this Authorization: Bearer NgCXRK...MzYjw. (I dont have any idea)

if i send directly the acces token as a parameter always get no token provided.

I am new whit this and actualy I dont know what I have to do with that acces_token. I am so confused about it, Hope you can help me, thanks

export default function Authenticate() {
    let token = window.location.hash.substr(1);
    if(token) {
        const tk = Object.fromEntries(new URLSearchParams(token));
        return tk.access_token;
    }else{
        redirectToSpotifyAuthentication();
    }
}

  
    function redirectToSpotifyAuthentication() {
        const authEndpoint = 'https://accounts.spotify.com/authorize';
        const clientId = 'b88799f29a3a473fa100004e82650e7d';
        const redirectUri = 'http://localhost:3000/home';
        let query = `client_id=${clientId}&redirect_uri=${redirectUri}&response_type=token&show_dialog=true`;
        window.location = `${authEndpoint}?${query}`;
    }

Component

import React, {useState} from 'react'
import Authenticate from '../utils/Authenticate'
import axios from 'axios'


export default function SearchingBar() {
    const [keyWord, getValue] = useState(''); 

    const token = Authenticate();
    const c = `Authorization: Bearer ${token}`;
    console.log(c);
    const getInputValue = (e) => {
        getValue(e.target.value);
    }

    const onSubmit = async (e) => {
        e.preventDefault();
        if(keyWord){
            const res = await axios.get(`http://localhost:4000/home/${keyWord}/${token}`);
            console.log(res);
        }else{
            alert("datos incorrectos");
        }
        
    }



    return (
        <div className="container mt-5">
            {keyWord}
            <form className="d-flex" onSubmit={onSubmit}>
                <input type="text"
                    id="inputPassword5"
                    className="form-control border-end-0 rounded-0"
                    //El input inicia con valor 0
                    value={keyWord}
                    onChange={getInputValue}>
                </input>
                <button type='submit' className="btn btn-info rounded-0 pl-5 pr-5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                    </svg>
                </button>
            </form>
        </div>
    )
}

Backend route

const fetch = require('node-fetch');
const ctrl = {}

ctrl.search = (req, res) => {
    var keyword = req.params.keyword;
    var token = req.params.token;
    console.log(keyword);
    console.log(token);

    async function getSongs(url){
        const fetchUrl = await fetch(url);
        const jsonData = await fetchUrl.json();
        console.log(jsonData);
    }

    getSongs(`https://api.spotify.com/v1/search?q=${keyword}&type=track" -H "Accept: application/json" -H "Content-Type: application/json" -H "Authorization: Bearer ${token}`)
}


module.exports = ctrl;

question from:https://stackoverflow.com/questions/65851655/no-token-provided-spotify-api-nodejs-react

Answer 1

Waitting for answers