I am trying to get basic information from Vimeo API about searched video by it's ID
I have Token Client Identifier and Secrets but Api documentation is pretty complicated
The question is how to make a simple call to fetch data?
I already tried with axios:
const GetByIdVimeo = async (ID) => {
const Token = 'MY_TOKEN'
const response = await axios.get({
url: `https://api.vimeo.com/videos/${ID}`,
Authorization: `bearer ${Token}`
}
)
const mofifiedResponse = {
resp: response
}
return mofifiedResponse
}
export default GetByIdVimeo
But response is 404 not Found status rejected
Thanks for help
The following code works.
First argument of axios.get() method is the url and the second a configuration object where you can specify your headers property. There you should place your authorization token.
const GetByIdVimeo = async (ID) => {
const Token = "YOUR_TOKEN";
const response = await axios.get(`https://api.vimeo.com/videos/${ID}`, {
headers: {
Authorization: `Bearer ${Token}`,
},
});
const mofifiedResponse = {
resp: response,
};
return mofifiedResponse;
};
export default GetByIdVimeo
Keep in mind that you have to generate an unauthenticated access token to access data this way. Otherwise you have to use OAuth to authenticate, which may be more complicated.
Related
For each request to the backend, I send an access token. If the token has not passed verification, then I save the config of the original request and make a request to update the tokens. If everything is fine, then I re-send the original request. The problem is that the original request is sent with the old token. Tell me how I can update the value in headers.Authorization?
import axios from 'axios'
import { setAccessToken } from '../store/authSlice'
export const axiosConfig = (accessToken: any, dispatch: any) => {
const API_URL = 'http://localhost:3001/api'
const $api = axios.create({
withCredentials: false,
baseURL: API_URL
})
$api.interceptors.request.use((config) => {
config.headers!.Authorization = `Bearer ${accessToken}`
return config
})
$api.interceptors.response.use(
(config) => {
return config
},
async (error) => {
const originalRequest = error.config
if (error.response.status === 403 && error.config && !error.config._isRetry) {
originalRequest._isRetry = true
try {
const response = await axios.get(`${API_URL}/auth/refresh-tokens`, {
withCredentials: false,
headers: {
Authorization: `Bearer ${localStorage.refreshToken}`
}
})
localStorage.setItem('refreshToken', response.data.refreshToken)
dispatch(setAccessToken(response.data.accessToken)) // new token
return $api.request(originalRequest) // <=== original request with old token
} catch (e) {
console.log('error')
}
}
throw error
}
)
return $api
}
You are using $api.interceptors.response.use() which is on the response not the request. You will not be able to change the Authorization header on a request that has already been sent.
I would use some type of error handler or axios response intercepter to direct user to the login page if they are expired/not logged in. Then I would have an error handler function that can try to attempt a re-authorization then have the error handler function resend the original request that would then have the updated Authorization token. But remember you still cant change the request that has already been sent.
myAxoisInstance.interceptors.request.use(
function (config) {
// This is run on each request so if you have or then update
the token for local storage your next request will get that updated token
const token = localStorage.getItem("token");
if (token) {
//Assign the token to the config
//If you need to send a request here to see if token is valid I don't recommend that. If you are using a JWT token you can check if it is expired here and do something else like a redirect to login.
config.headers!.Authorization = `Bearer ${token}`;
} else {
//Can retrieve and assign token here I typically like to do a redirect here as they are likely not logged or sesson expired. in or something like that. Then allow the sign-in process to add the token to the local storage.
}
return config;
},
function (error) {
return Promise.reject(error);
}
);
I know this question has been asked many times but there is no clear answer so far and the suggested options (cookies, local storage etc..) have all pros and cons. I'm new to React SPA and I'm very confused about the right method to adopt.
For now I've based my application on the "cookie-to-header token" premise.
The API I work with returns a token meant to be used with the Authorization header for the POST PUT and DELETE requests.
So on the login page a cookie is created in order to store the token value:
const login = { email, password };
const [error, setError] = useState(null);
fetch('https://apidomain.net/api/login', {
method: 'POST',
headers: { "Content-Type": "application/json" },
body: JSON.stringify(login)
}).then((res) => {
if (!res.ok) {
throw Error('Could not fetch the data for this resource. Status: '+res.status+' Message: '+res.statusText);
}
return res.json();
})
.then((data) => {
document.cookie = "auth_token="+data.auth_token;
}).catch((err) => {
setError(err.message);
});
Then, the token value is retrieved by Javascript whenever a POST PUT or DELETE request is sent:
fetch('https://apidomain.net/api/post/4', {
method: 'DELETE',
headers: { 'Authorization': 'Bearer '+getAuthToken()}
})
It works fine but is it safe ?
Is there a better way to do that ?
I'm playing around with the Spotify Web API, and I'm trying to fetch my most played songs. I'm using the client credentials OAuth flow (you can read more about it at https://developer.spotify.com/documentation/general/guides/authorization/client-credentials/) to get an access token so that I can create requests. I'm getting the access token just fine, but when I try to fetch the data with the token, I'm getting a 403, indicating that my request is not being authorized.
Error code:
GET https://api.spotify.com/v1/me/top/tracks 403
I'm using React, so I'm fetching the data on page load with useEffect.
API File (spotify.ts)
import { Buffer } from 'buffer';
const clientId = "" // omitted for privacy
const clientSecret = "" // omitted for privacy
const getToken = async (): Promise<string> => {
const res = await fetch('https://accounts.spotify.com/api/token', {
method: 'POST',
headers: {
'Authorization': 'Basic ' + Buffer.from(clientId + ':' + clientSecret).toString('base64'),
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
grant_type: 'client_credentials',
scope: 'user-top-read',
}),
});
const data = await res.json();
return data.access_token;
};
const getMostRecentSong = async (token: string) => {
const res = await fetch('https://api.spotify.com/v1/me/top/tracks', {
headers: {
'Authorization': `Bearer ${token}`,
},
});
const data = await res.json();
return data;
}
App.tsx
import React, { useEffect } from 'react'
import { getToken, getMostRecentSong } from './services/spotify'
const App = () => {
useEffect(() => {
const getData = async () => {
const accessToken = await getToken();
const data = await getMostRecentSong(accessToken);
console.log(data);
}
getData();
}, [])
return (
...
)
}
I've included my App.tsx file as well for convenience, but the only error I'm getting is with the request itself. Any help is greatly appreciated :)
The /me/top/{type} route requires the user-top-read scope, so using the Client Credentials flow will always result in an error. Here's a summary of the Client Credentials flow:
The Client Credentials flow is used in server-to-server authentication. Since this flow does not include authorization, only endpoints that do not access user information can be accessed.
Instead, you will need to use the Authorization Code flow and proxy the Spotify requests using a request mechanism that isn't restricted by CORS (e.g. a server or serverless function), or use the Implicit Grant flow which can be implemented without an additional cooperating process (you can do it all in your client React app).
I am using axios in my react project to fetch data from an API which is authenticated using a token. Now, I m able to get the data but the when I inspect, the token is clearly visible in the Request Headers which is risky.
Please suggest If there is a way to abstract or hide the token in the request headers to make it more secure.
Below the snippet.
const makeRequest = async () => {
const response = await axios.get(BACKEND_API_URL, { headers: { 'Authorization': 'Token 9944b09199c62bcf9418ad846dd0e4bbdfc6ee4b' } });
if (response.status === 200) {
// do something...
}
}
makeRequest()
I'm new to code and react. I am trying to make an API call to get the data. The problem is that the bearer token given to me expires every 24hrs and I don't know how to insert the Token code as a variable to my header authorization in my request in react to make it renew when it needs and deliver to me the JSON information.
something like this might work
import React from 'react';
const App = () => {
const token = "yourtokenhere";
const [result, setResult] = React.useState();
React.useEffect(()=>{
fetch('https://example.test/', {
method: "POST",
headers: {"Authorization": `Bearer ${token}`}
}).then(res => res.json()).then(json => setResult(json));
},[]);
return (
<>
{JSON.stringify(result)}
</>
);
};
For the authorization header, I would suggest interceptor.
Interceptors can perform tasks such as URL manipulation, logging, adding tokens to the header, etc before and after making an API request and response.
for fetch() API use, npm install fetch-intercept --save
import fetchIntercept from 'fetch-intercept';
const registerIntercept = fetchIntercept.register({
request: function (url, config) {
// Modify the url or config here
const authHeader = new Headers(config.headers);
authHeader.append('Authorization', 'Bearer 232Qefsg4fg4g'); // your token
config.headers = authHeader;
return [url, config];
},
requestError: function (error) {
// Called when an error occured during another 'request' interceptor call
return Promise.reject(error);
},
response: function (response) {
// Modify or log the reponse object
console.log(response);
return response;
},
responseError: function (error) {
// Handle a fetch error
return Promise.reject(error);
}
});
for Axios use, npm install axios
axios.interceptors.request.use(req => {
// `req` is the Axios request config, so you can modify
// the `headers`.
req.headers.authorization = 'my secret token';
return req;
});