I’m having trouble getting the access token to Spotify Api: Error getting the token [AxiosError: Request failed with status code 400]
.
Here is the code to see if you can help me to solve the problem.Thanks in advance.
config/adapters/async-storage.ts
<code>import AsyncStorage from '@react-native-async-storage/async-storage';
export class AsyncStorageAdapter {
static async getItem (key: string) : Promise<string | null>{
return await AsyncStorage.getItem(key);
static async setItem (key: string, value: string): Promise<void>{
await AsyncStorage.setItem(key, value);
throw new Error(`Error setting item ${key}- ${value}`);
<code>import AsyncStorage from '@react-native-async-storage/async-storage';
export class AsyncStorageAdapter {
static async getItem (key: string) : Promise<string | null>{
try{
return await AsyncStorage.getItem(key);
}catch(error){
console.log(error);
return null;
}
}
static async setItem (key: string, value: string): Promise<void>{
try{
await AsyncStorage.setItem(key, value);
}catch(error){
console.log(error);
throw new Error(`Error setting item ${key}- ${value}`);
}
}
}
</code>
import AsyncStorage from '@react-native-async-storage/async-storage';
export class AsyncStorageAdapter {
static async getItem (key: string) : Promise<string | null>{
try{
return await AsyncStorage.getItem(key);
}catch(error){
console.log(error);
return null;
}
}
static async setItem (key: string, value: string): Promise<void>{
try{
await AsyncStorage.setItem(key, value);
}catch(error){
console.log(error);
throw new Error(`Error setting item ${key}- ${value}`);
}
}
}
config/api/spotifyApi.ts
<code>import {API_URL_TOKEN} from '@env';
import axios from 'axios';
import {AsyncStorageAdapter} from '../adapters/async-storage';
import { getToken } from '../../actions/token/getToken';
// 1. Create a configured axios instance
export const spotifyApi = axios.create({
'Content-Type': 'application/x-www-form-urlencoded',
// 2. Middleware for adding the access token to requests
spotifyApi.interceptors.request.use(
let token = await AsyncStorageAdapter.getItem('token');
config.headers['Authorization'] = `Bearer ${token}`;
console.log('config', config);
return Promise.reject(error);
<code>import {API_URL_TOKEN} from '@env';
import axios from 'axios';
import {AsyncStorageAdapter} from '../adapters/async-storage';
import { getToken } from '../../actions/token/getToken';
// 1. Create a configured axios instance
export const spotifyApi = axios.create({
baseURL: API_URL_TOKEN,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
});
// 2. Middleware for adding the access token to requests
spotifyApi.interceptors.request.use(
async(config) =>{
let token = await AsyncStorageAdapter.getItem('token');
if(!token){
await getToken();
}
if(token){
config.headers['Authorization'] = `Bearer ${token}`;
}
console.log('config', config);
return config;
},
error => {
return Promise.reject(error);
}
)
</code>
import {API_URL_TOKEN} from '@env';
import axios from 'axios';
import {AsyncStorageAdapter} from '../adapters/async-storage';
import { getToken } from '../../actions/token/getToken';
// 1. Create a configured axios instance
export const spotifyApi = axios.create({
baseURL: API_URL_TOKEN,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
});
// 2. Middleware for adding the access token to requests
spotifyApi.interceptors.request.use(
async(config) =>{
let token = await AsyncStorageAdapter.getItem('token');
if(!token){
await getToken();
}
if(token){
config.headers['Authorization'] = `Bearer ${token}`;
}
console.log('config', config);
return config;
},
error => {
return Promise.reject(error);
}
)
actions/token/getToken.ts
<code>import {CLIENT_ID, CLIENT_SECRET, API_URL_TOKEN} from '@env';
import { AsyncStorageAdapter } from '../../config/adapters/async-storage';
import axios from 'axios';
import { TokenResponse } from '../../infrastructure/interface/token.response';
//function to obtain the token
export const getToken = async() =>{
console.log('Client_id', CLIENT_ID);
console.log('Client_Secret', CLIENT_SECRET);
console.log('url_token',API_URL_TOKEN);
const body = new URLSearchParams({
grant_type: 'client_credentials',
client_secret: CLIENT_SECRET,
const params = body.toString();
console.log('params', params);
const resp = await axios.post<TokenResponse>(API_URL_TOKEN, params, {
'Content-Type': 'application/x-www-form-urlencoded',
console.log('resp', resp);
const token = resp.data.access_token;
await AsyncStorageAdapter.setItem('token',token);
console.log('Error getting the token', error);
throw new Error('Error getting the token');
<code>import {CLIENT_ID, CLIENT_SECRET, API_URL_TOKEN} from '@env';
import { AsyncStorageAdapter } from '../../config/adapters/async-storage';
import axios from 'axios';
import { TokenResponse } from '../../infrastructure/interface/token.response';
//function to obtain the token
export const getToken = async() =>{
console.log('Client_id', CLIENT_ID);
console.log('Client_Secret', CLIENT_SECRET);
console.log('url_token',API_URL_TOKEN);
const body = new URLSearchParams({
grant_type: 'client_credentials',
client_id: CLIENT_ID,
client_secret: CLIENT_SECRET,
});
const params = body.toString();
console.log('params', params);
try{
const resp = await axios.post<TokenResponse>(API_URL_TOKEN, params, {
headers:{
'Content-Type': 'application/x-www-form-urlencoded',
},
});
console.log('resp', resp);
const token = resp.data.access_token;
await AsyncStorageAdapter.setItem('token',token);
return token;
}catch(error){
console.log('Error getting the token', error);
throw new Error('Error getting the token');
}
}
</code>
import {CLIENT_ID, CLIENT_SECRET, API_URL_TOKEN} from '@env';
import { AsyncStorageAdapter } from '../../config/adapters/async-storage';
import axios from 'axios';
import { TokenResponse } from '../../infrastructure/interface/token.response';
//function to obtain the token
export const getToken = async() =>{
console.log('Client_id', CLIENT_ID);
console.log('Client_Secret', CLIENT_SECRET);
console.log('url_token',API_URL_TOKEN);
const body = new URLSearchParams({
grant_type: 'client_credentials',
client_id: CLIENT_ID,
client_secret: CLIENT_SECRET,
});
const params = body.toString();
console.log('params', params);
try{
const resp = await axios.post<TokenResponse>(API_URL_TOKEN, params, {
headers:{
'Content-Type': 'application/x-www-form-urlencoded',
},
});
console.log('resp', resp);
const token = resp.data.access_token;
await AsyncStorageAdapter.setItem('token',token);
return token;
}catch(error){
console.log('Error getting the token', error);
throw new Error('Error getting the token');
}
}
Hi people. I’m having trouble getting the access token to Spotify Api: Error getting the token [AxiosError: Request failed with status code 400]
.
Here is the code to see if you can help me to solve the problem.Thanks in advance.