I'm attempting to display data with axios, promises, and other ES6 features. This project works in prod, but after changing the API endpoints around in dev (no longer working w/ old endpoints) I've run into issues.
For some reason, the variable I'm working with (kkUser) is coming up as undefined. I'm not sure if it has to do with the different endpoints or something else.
Helper file:
const kkObj = {};
export async function loadKKProperties(obj) {
kkObj.spUrl = _spPageContextInfo.siteAbsoluteUrl;
kkObj._KKRestHost = "https://ha----dev.com";
kkObj._BaseHost = "https://in-url.com";
// other code
JS:
import { loadKKProperties } from "./helperfile";
import axios from "axios";
function getDocFolders(kkUser, places) {
return kkUser
.userValidatedPostRequest({
// stuff
}
})
// more code
async function globalInitPromise() {
const kkObj = await loadKKProperties();
const token = await permissionToCallKKAPI(kkObj.hsHost);
const kkUser = new KKUser(kkObj, token);
class KKUser {
constructor(kkObj, token) {
this.kkObj = kkObj;
this.token = token;
}
// other code
userValidatedPostRequest(dataObj) {
dataObj.Params.SAMAcct = this.kkObj.currentAccount;
return axios
.post(this.kkObj._KKRestHost + "/myAPI/api/Query/Post", dataObj, { // debugger gets stuck here
"query": {
"__metadata":{"type":"SP.CamlQuery"}
},
withCredentials: true,
headers: {
Accept: "application/json;odata=verbose",
Authorization: this.token,
"X-RequestDigest": $("#__REQUESTDIGEST").val()
}
})
// .then
// .catch
Console:
404 error
Related
I am calling an API defined using RTK Query, within a React Native + Redux Toolkit + Expo app. This is secured with an authentication / authorization system in place i.e. access token (short expiration) and refresh token (longer expiration).
I would like to avoid checking any access token expiration claim (I've seen people suggesting to use a Redux middleware). Rather, if possible, I'd like to trigger the access token renewal when the API being requested returns a 403 response code, i.e. when the access token is expired.
This is the code calling the API:
const SearchResults = () => {
// get the SearchForm fields and pass them as the request body
const { fields, updateField } = useUpdateFields();
// query the RTKQ service
const { data, isLoading, isSuccess, isError, error } =
useGetDataQuery(fields);
return ( ... )
the RTK Query API is defined as follows:
import { createApi, fetchBaseQuery } from "#reduxjs/toolkit/query/react";
import * as SecureStore from "expo-secure-store";
import { baseUrl } from "~/env";
export const api = createApi({
reducerPath: "api",
baseQuery: fetchBaseQuery({
baseUrl: baseUrl,
prepareHeaders: async (headers, { getState }) => {
// retrieve the access_token from the Expo SecureStore
const access_token = await SecureStore.getItemAsync("access_token");
if (access_token) {
headers.set("Authorization", `Bearer ${access_token}`);
headers.set("Content-Type", "application/json");
}
return headers;
},
}),
endpoints: (builder) => ({
getData: builder.query({
// body holds the fields passed during the call
query: (body) => {
return {
url: "/data",
method: "POST",
body: body,
};
},
}),
}),
});
export const { useGetDataQuery } = api;
I understand that when the API returns isError = true and error = something 403 I need to renew the access token within the Expo SecureStore (and there's a function already in place for that). However I have no idea about how can I query the RTKQ API again, on the fly, when it returns a 403 response code, and virtually going unnoticed by the user.
Can someone please point me in the right direction?
I got the hang of it, massive thanks to #phry! I don't know how I could have missed this example from RTKQ docs but I'm a n00b for a reason after all.
This being said, here's how to refactor the RTKQ api to renew the access token on the fly, in case some other react native beginner ever has this problem. Hopefully this is a reasonable way of doing this
import { createApi, fetchBaseQuery } from "#reduxjs/toolkit/query/react";
import * as SecureStore from "expo-secure-store";
import { baseUrl } from "~/env";
import { renewAccessToken } from "~/utils/auth";
// fetchBaseQuery logic is unchanged, moved out of createApi for readability
const baseQuery = fetchBaseQuery({
baseUrl: baseUrl,
prepareHeaders: async (headers, { getState }) => {
// retrieve the access_token from the Expo SecureStore
const access_token = await SecureStore.getItemAsync("access_token");
if (access_token) {
headers.set("Authorization", `Bearer ${access_token}`);
headers.set("Content-Type", "application/json");
}
return headers;
},
});
const baseQueryWithReauth = async (args, api) => {
let result = await baseQuery(args, api);
if (result.error) {
/* try to get a new token if the main query fails: renewAccessToken replaces
the access token in the SecureStore and returns a response code */
const refreshResult = await renewAccessToken();
if (refreshResult === 200) {
// then, retry the initial query on the fly
result = await baseQuery(args, api);
}
}
return result;
};
export const apiToQuery = createApi({
reducerPath: "apiToQuery",
baseQuery: baseQueryWithReauth,
endpoints: (builder) => ({
getData: builder.query({
// body holds the fields passed during the call
query: (body) => {
return {
url: "/data",
method: "POST",
body: body,
};
},
}),
}),
});
export const { useGetDataQuery } = apiToQuery;
I'm trying out the WebAPI and have run into a snag that doesn't make sense.
In the developer console a search for the episode list for show id 4rOoJ6Egrf8K2IrywzwOMk returns a list.
Even accessing the given URL (https://api.spotify.com/v1/shows/4rOoJ6Egrf8K2IrywzwOMk/episodes) in the browser returns the episode list, if I'm logged into my spotify account.
I'm not sure what's broken in my code.
async function listPodcastEpisodes(id) {
const access_token = await getAuth()
const api_url = `https://api.spotify.com/v1/shows/${id}/episodes`
console.log(api_url)
try {
const response = await axios.get(api_url, setAxiosOptions(access_token))
return response.data
} catch(err) {
console.log(`Error: ${JSON.stringify(err?.response?.data, null, 2)}`)
}
}
listPodcastEpisodes(process.argv[2])
.then(x => console.log(x))
This code returns:
$ node getInfo.js 4rOoJ6Egrf8K2IrywzwOMk
https://api.spotify.com/v1/shows/4rOoJ6Egrf8K2IrywzwOMk/episodes
Error: {
"error": {
"status": 404,
"message": "non existing id"
}
}
undefined
The other functions and variable settings:
const auth = `${process.env.ID}:${process.env.SECRET}`
const auth_encoded = Buffer.from(auth, 'utf-8').toString("base64")
function setAxiosOptions(data) {
return {
headers: {
'Authorization': `Bearer ${data}`,
'Content-Type': 'application/json'
}
}
}
async function getAuth () {
try {
const token_url = 'https://accounts.spotify.com/api/token';
const data = qs.stringify({'grant_type':'client_credentials'});
const response = await axios.post(token_url, data, {
headers: {
'Authorization': `Basic ${auth_encoded}`,
'Content-Type': 'application/x-www-form-urlencoded'
}
})
return response.data.access_token;
} catch(error) {
console.log(error);
}
}
It looks like you may need to include the market parameter.
I found this GitHub issue on the official Web API repo describing the same problem you're experiencing. This issue is referenced by this issue, where GitHub user MrXyfir posts their workaround:
Edit: For anyone else who ends up with this issue, the solution for me was to set the market param. https://api.spotify.com/v1/shows/4rOoJ6Egrf8K2IrywzwOMk/episodes?market=US
I have a Home.js component that signs the user up to the API and logs in and then gets the token received from the response authorization header and saves it in the state 'token' variable.
This token will be used in all other components to access the API when requests are made, so what is the best way of using this value for all other components?
Home.js:
const SIGNUP_URL = 'http://localhost:8080/users/signup';
const LOGIN_URL = 'http://localhost:8080/login';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated:false,
token: ''
};
}
componentDidMount() {
const payload = {
"username": "hikaru",
"password": "JohnSmith72-"
};
fetch(SIGNUP_URL, {
method: 'POST',
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
})
.then(response => response.json())
.then((data) => {
console.log(data);
});
fetch(LOGIN_URL, {
method: 'POST',
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
})
.then(response =>
this.setState({token: response.headers.get("Authorization"), isAuthenticated:true})
)
}
For example the userList component which will fetch the user data from the API, but requires the API token stored in the Home component's token state variable to send the request successfully via the authorization header.
Thanks for any help
You can create a custom function called authenticated_request for example. This function could fetch your token from the CookieStorage in case of web or async storage in case of react-native or even if you have it in some state management library. Doesn't matter. Use this function instead of the fetch function and call fetch inside it. Think of it as a higher order function for your network requests.
const authenticated_request(url, config) {
fetch(url, {
...config,
headers: {
...config.headers,
Authorization: getToken()
}
});
}
You can also leverage the usage of something like axios and use request interceptors to intercept requests and responses. Injecting your token as needed.
You should be using AuthContext and localStorage to do this, save the token in the state or localStorage and make a config file which uses the same token when calling an api i have done it in axios. Axios has a concept of interceptors which allows us to attach token to our api calls, Im saving the token in the localStorage after a successfull login and then using the same token from localStorage to add to every call which needs a token, if the api doesnt need a token (some apis can be public) i can use axios directly, check out the below code:
import axios from 'axios';
let apiUrl = '';
let imageUrl = '';
if(process.env.NODE_ENV === 'production'){
apiUrl = `${process.env.REACT_APP_LIVE_URL_basePath}/web/v1/`;
}else{
apiUrl = `http://127.0.0.1:8000/web/v1/`;
}
const config = {
baseURL: apiUrl,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
"Access-Control-Allow-Origin": "https://www.*******.com",
'Access-Control-Allow-Methods': 'GET, POST, PATCH, DELETE',
},
};
const authAxios = axios.create(config);
authAxios.interceptors.request.use(async function(config) {
config.headers.Authorization = localStorage.getItem('access_token') ?
`Bearer ${localStorage.getItem('access_token')}` :
``;
return config;
});
export { apiUrl, axios, authAxios };
now on making api call u can do something like below:
import { apiUrl, authAxios } from '../config/config'
export async function saveAssignment(data) {
try {
const res = await authAxios.post(apiUrl + 'assignment/save-assignment', data)
return res.data;
}
catch(e){
}
}
here pay attention im not using axios to make api call but using authAxios to make calls(which is exported from the config file) which will have token in the header.
(You can also use a third party library like Redux but the concept remains the same)
You need a centralized state that's what State Management libraries are for. You can use third-party libraries such as Redux, or simply use React's own context. You can search on google for state management in React and you'll find a lot of helpful recourses
You can place the token into a cookie if your app is SSR. To do that, you have to create the following functions:
export const eraseCookie = (name) => {
document.cookie = `${name}=; Max-Age=-99999999;`;
};
export const getCookie = (name) => {
const pairs = document.cookie.split(';');
const pair = pairs.find((cookie) => cookie.split('=')[0].trim() === name);
if (!pair) return '';
return pair.split('=')[1];
};
export const setCookie = (name, value, domain) => {
if (domain) {
document.cookie = `${name}=${value};path=/`;
} else {
document.cookie = `${name}=${value}`;
}
};
You can also place your token into the local storage:
Set into local storage via built-in function:
localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c');
Get the token via built-in function:
const token = localStorage.getItem('token');
I want to declare 2 axios instance,so 1 is for API call using access_token,another 1 is using refresh_token.
So I have a code like this:
config.js
import axios from 'axios';
const axiosAccessClient =function () {
const defaultOptions = {
baseURL: 'my_url',
headers: {
'Content-Type': 'application/json',
}
};
let instance = axios.create(defaultOptions);
instance.interceptors.request.use(function (config) {
const token = localStorage.getItem('access_token');
config.headers.Authorization = token ? `Bearer ${token}` : '';
return config;
});
return instance;
};
const axiosRefreshClient =function () {
const defaultOptions = {
baseURL: 'my_url',
headers: {
'Content-Type': 'application/json',
}
};
let instance = axios.create(defaultOptions);
instance.interceptors.request.use(function (config) {
const token = localStorage.getItem('refresh_token');
config.headers.Authorization = token ? `Bearer ${token}` : '';
return config;
});
return instance;
};
export {
axiosAccessClient,
axiosRefreshClient
}
So in my Request.js I do something like this:
import {axiosAccessClient,axiosRefreshClient} from "./config";
static async access(url,body) {
return await axiosAccessClient.post(url, body)
.then(function (response) {
return response;
}).catch(function (error) {
throw error;
})
}
static async refresh(url,body){
return await axiosRefreshClient.post(url, body)
.then(function (response) {
return response;
}).catch(function (error) {
throw error;
})
}
but when I run the app,it crash at the point of access() in Request.js show this error:
_AxiosConfig__WEBPACK_IMPORTED_MODULE_2__.axiosAccessClient.post is not a function
But if I do the following:
export default axiosAccessClient() in config.js,
import axiosAccessClient from "./config" in Request.js
then the code work(which is weird),but by this I cant access axiosRefreshClient from refresh() in Request.js
Question:
Can somebody tell me why is this happen? I read all this example,but still cant figure it out:
this question
this question and so on
How can solve this?? Export multiple function from a single file
Your config.js exports functions; you need to rewrite it so it exports the result of the function calls instead, i.e. the instances.
// change name of functions
function generateAccessClient() {
..
}
// create instances
const axiosAccessClient = generateAccessClient();
const axiosRefreshClient = generateRefreshClient();
// export them
export {
axiosAccessClient,
axiosRefreshClient
}
This way you can import both. Having a default export is unrelated to your problem, you just accidentally solved it by adding the () at the end.
Another way is to do this:
const axiosAccessClient = (function () {
...
})();
Same for axiosRefreshClient.
Now your original code will work.
Your two functions (axiosAccessClient and the other) return an axios instance, but the function itself is not an axios instance (that's why you can't call .post() on it). You should create the two clients in the same module and save them as const variables, and then export the instances (instead of functions that create instances). It makes no sense to re-create the same instance every time you wish to make a request. The parameters of the instance do not change, so saving the instance is better.
I am using Axios to post to an api from within the Vuex store and when the api gets an error back from the sever, it throws an error, which fails to be caught in a try catch block.
// the action
async register({ commit }, params) {
// I use an axios interceptor to format all responses like this
// so I can avoid having to use try-catch at least when using axios.
const [res, { error }] = await Vue.axios.post(`${params.type}`, params);
if (error) {
throw new Error(error);
}
// In the component
try {
const response = await this.$store.dispatch('handleAuthEvent', payload);
// do stuff with response
} catch (error) {
// `error` here is not defined, even though I passed it in the `throw` from the backend
this.showError();
}
// main.js
import axios from './axiosConfig.js'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
// axiosConfig.js
import axios from 'axios'
const API_URL = process.env.API_URL || 'http://localhost:3030/'
const instance = axios.create({
baseURL: API_URL,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + localStorage.token
}
})
// format response data to avoid having to use try/catch blocks with async/await
instance.interceptors.response.use(data => {
return [data, null];
}, error => {
return [null, error.response.data.error || "server error"];
});
export default instance;