Related
I have created the following custom hook, and I'm having trouble mocking the hook in a way that the returned data would be updated when the callback is called.
export const useLazyFetch = ({ method, url, data, config, withAuth = true }: UseFetchArgs): LazyFetchResponse => {
const [res, setRes] = useState({ data: null, error: null, loading: false});
const callFetch = useCallback(() => {
setRes({ data: null, error: null, loading: true});
const jwtToken = loadItemFromLocalStorage('accessToken');
const authConfig = {
headers: {
Authorization: `Bearer ${jwtToken}`
}
};
const combinedConfig = Object.assign(withAuth ? authConfig : {}, config);
axios[method](url, data, combinedConfig)
.then(res => setRes({ data: res.data, loading: false, error: null}))
.catch(error => setRes({ data: null, loading: false, error}))
}, [method, url, data, config, withAuth])
return { res, callFetch };
};
The test is pretty simple, when a user clicks a button to perform the callback I want to ensure that the appropriate elements appear, right now I'm mocking axios which works but I was wondering if there is a way to mock the useLazyFetch method in a way that res is updated when the callback is called. This is the current test
it('does some stuff', async () => {
(axios.post as jest.Mock).mockReturnValue({ status: 200, data: { foo: 'bar' } });
const { getByRole, getByText, user } = renderComponent();
user.click(getByRole('button', { name: 'button text' }));
await waitFor(() => expect(getByText('success message')).toBeInTheDocument());
});
Here's an example of how I'm using useLazyFetch
const Component = ({ props }: Props) => {
const { res, callFetch } = useLazyFetch({
method: 'post',
url: `${BASE_URL}/some/endpoint`,
data: requestBody
});
const { data: postResponse, loading: postLoading, error: postError } = res;
return (
<Element
header={header}
subHeader={subHeader}
>
<Button
disabled={postLoading}
onClick={callFetch}
>
Submit Post Request
</Button>
</Element>
);
}
axios is already tested so there's no point in writing tests for that. We should be testing useLazyFetch itself. However, I might suggest abstracting away the axios choice and writing a more generic useAsync hook.
// hooks.js
import { useState, useEffect } from "react"
function useAsync(func, deps = []) {
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
const [data, setData] = useState(null)
useEffect(_ => {
let mounted = true
async function run() {
try { if (mounted) setData(await func(...deps)) }
catch (e) { if (mounted) setError(e) }
finally { if (mounted) setLoading(false) }
}
run()
return _ => { mounted = false }
}, deps)
return { loading, error, data }
}
export { useAsync }
But we can't stop there. Other improvements will help too, like a better API abstraction -
// api.js
import axios from "axios"
import { createContext, useContext, useMemo } from "react"
import { useLocalStorage } from "./hooks.js"
function client(jwt) {
// https://axios-http.com/docs/instance
return axios.create(Object.assign(
{},
jwt && { headers: { Authorization: `Bearer ${jwt}` } }
))
}
function APIRoot({ children }) {
const jwt = useLocalStorage("accessToken")
const context = useMemo(_ => client(jwt), [jwt])
return <ClientContext.Provider value={context}>
{children}
</ClientContext.Provider>
}
function useClient() {
return useContext(ClientContext)
}
const ClientContext = createContext(null)
export { APIRoot, useClient }
When a component is a child of APIRoot, it has access to the axios client instance -
<APIRoot>
<User id={4} /> {/* access to api client inside APIRoot */}
</APIRoot>
// User.js
import { useClient } from "./api.js"
import { useAsync } from "./hooks.js"
function User({ userId }) {
const client = useClient() // <- access the client
const {data, error, loading} = useAsync(id => { // <- generic hook
return client.get(`/users/${id}`).then(r => r.data) // <- async
}, [userId]) // <- dependencies
if (error) return <p>{error.message}</p>
if (loading) return <p>Loading...</p>
return <div data-user-id={userId}>
{data.username}
{data.avatar}
</div>
}
export default User
That's helpful, but the component is still concerned with API logic of constructing User URLs and things like accessing the .data property of the axios response. Let's push all of that into the API module -
// api.js
import axios from "axios"
import { createContext, useContext, useMemo } from "react"
import { useLocalStorage } from "./hooks.js"
function client(jwt) {
return axios.create(Object.assign(
{ transformResponse: res => res.data }, // <- auto return res.data
jwt && { headers: { Authorization: `Bearer ${jwt}` } }
))
}
function api(client) {
return {
getUser: (id) => // <- user-friendly functions
client.get(`/users/${id}`), // <- url logic encapsulated
createUser: (data) =>
client.post(`/users`, data),
loginUser: (email, password) =>
client.post(`/login`, {email,password}),
// ...
}
}
function APIRoot({ children }) {
const jwt = useLocalStorage("accessToken")
const context = useMemo(_ => api(client(jwt)), [jwt]) // <- api()
return <APIContext.Provider value={context}>
{children}
</APIContext.Provider>
}
const APIContext = createContext({})
const useAPI = _ => useContext(APIContext)
export { APIRoot, useAPI }
The pattern above is not sophisticated. It could be easily modularized for more complex API designs. Some segments of the API may require authorization, others are public. The API module gives you a well-defined area for all of this. The components are now freed from this complexity -
// User.js
import { useAPI } from "./api.js"
import { useAsync } from "./hooks.js"
function User({ userId }) {
const { getUser } = useAPI()
const {data, error, loading} = useAsync(getUser, [userId]) // <- ez
if (error) return <p>{error.message}</p>
if (loading) return <p>Loading...</p>
return <div data-user-id={userId}>
{data.username}
{data.avatar}
</div>
}
export default User
As for testing, now mocking any component or function is easy because everything has been isolated. You could also create a <TestingAPIRoot> in the API module that creates a specialized context for use in testing.
See also -
react-query
useSWR
useLocalStorage
So what I'm trying to do is to refresh access token stored in ContextAPI by refresh token stored in a cookie. I use axios response interceptor to check 401 & 403 status codes and then call refresh function from useGetNewAccessToken hook which sends new access token from the server. The problem is, React app always keeps pushing me back to the login page on page refresh instead of calling this function and adding newly acquired access token to the Authorization header. Here is how I set my interceptors:
import axios from "axios";
import useGetNewAccessToken from "./useGetNewAccessToken";
import { AuthContext } from "./useAuth";
import { useContext, useEffect } from "react";
export const instance = axios.create({
baseURL: "http://localhost:8080",
headers: {
"Content-Type": "application/json",
},
withCredentials: true,
});
export const useSetInterceptors = () => {
const { accessToken } = useContext(AuthContext);
const refresh = useGetNewAccessToken();
useEffect(() => {
const requestInterceptor = instance.interceptors.request.use(
(config) => {
if (!config.headers["Authorization"]) {
console.log("No authorization header is present");
config.headers["Authorization"] = `Bearer ${accessToken}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
const responseInterceptor = instance.interceptors.response.use(
(response) => {
return response;
},
async (error) => {
const prevRequest = error?.config;
console.log("Request failed");
if (
error?.response?.status === 401 &&
error?.response?.status === 403 &&
!prevRequest.sent
) {
prevRequest.sent = true;
const accessToken = await refresh();
prevRequest.headers["Authorization"] = `Bearer ${accessToken}`;
return instance(prevRequest);
}
return Promise.reject(error);
}
);
return () => {
instance.interceptors.request.eject(requestInterceptor);
instance.interceptors.request.eject(responseInterceptor);
};
}, [accessToken, refresh]);
return instance;
};
export default useSetInterceptors;
I handle authentication process in a custom useAuth hook:
import React, { useState, createContext, useContext, useEffect } from "react";
import axios from "axios";
import { instance } from "../hooks/useSetInterceptors";
import { Link, useNavigate, useLocation } from "react-router-dom";
export const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [authed, setAuthed] = useState(false);
const [moderator, setModerator] = useState(false);
const [accessToken, setAccessToken] = useState("");
const [refreshToken, setRefreshToken] = useState("");
const [authorities, setAuthorities] = useState([]);
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
const location = useLocation();
const from = location.state?.from?.pathname || "/";
const signIn = async (e, username, password) => {
e.preventDefault();
const result = await getTokens(username, password);
if (result) {
console.log("User has signed in");
}
};
const getTokens = async (username, password) => {
const api = `http://localhost:8080/api/v1/public/signIn?username=${username}&password=${password}`;
const res = await instance.get(api, {
withCredentials: true,
params: {
username: username,
password: password,
},
});
const data = await res.data;
setAccessToken(data["access_token"]);
navigate(from, { replace: true });
};
return (
<AuthContext.Provider
value={{
authed,
setAuthed,
moderator,
setModerator,
getTokens,
getAccessTokenAuthorities,
username,
password,
setUsername,
setPassword,
signIn,
isModerator,
accessToken,
setAccessToken,
refreshToken,
setRefreshToken,
}}
>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);
This is the hook to send new access token by refresh token:
import axios from "axios";
import { AuthContext } from "./useAuth";
import { useContext } from "react";
export const useGetNewAccessToken = async (props) => {
const { accessToken, setAccessToken } = useContext(AuthContext);
const api = `http://localhost:8080/api/v1/public/getNewAccessToken`;
const refresh = async () => {
try {
const refreshToken = document.cookie.slice(14);
const res = await axios.get(api, {
withCredentials: true,
headers: {
Authorization: `Bearer ${refreshToken}`,
"Access-Control-Allow-Origin": "localhost:8080",
},
});
const data = await res.data;
setAccessToken(data["access_token"]);
return res.data["access_token"];
} catch (error) {
console.log(error);
}
};
return refresh();
};
export default useGetNewAccessToken;
Finally this is how I use interceptors inside my Inventory component:
import React, { useContext, useEffect, useState } from "react";
import useSetInterceptors from "../hooks/useSetInterceptors";
import { AuthContext } from "../hooks/useAuth";
import { useNavigate, useLocation } from "react-router-dom";
const Inventory = (props) => {
const [inventoryItems, setInventoryItems] = useState([]);
const { moderator, accessToken } = useContext(AuthContext);
const setInterceptors = useSetInterceptors();
const navigate = useNavigate();
const location = useLocation();
useEffect(() => {
const getInventoryItems = async () => {
const api = `http://localhost:8080/api/v1/moderator/inventory`;
try {
const res = await setInterceptors.get(api, {
withCredentials: true,
});
const data = await res.data;
console.log(data);
setInventoryItems(data);
} catch (err) {
console.log("Request failed..." + err);
navigate("/signIn", { state: { from: location }, replace: true });
}
};
getInventoryItems();
}, []);
return (
<div>
<h1>Inventory</h1>
</div>
);
};
Inventory.propTypes = {};
export default Inventory;
Can it have anything to do with the fact that interceptors call themselves multiple times instead of one even though I check that in response interceptor if statement and eject them after usage? Calls are shown in here
I have a signup/login workflow in React (NextJS), and everything is working correctly; i made a custom hook to remotely check if the user is authenticated based on localStorage jwt:
import React, { useState, useEffect } from 'react';
import axios from '../lib/api';
const useUser = () => {
const [logged, setIsLogged] = useState(false);
const [user, setUser] = useState('');
useEffect(async () => {
const jwt = localStorage.getItem('jwt');
if (!jwt) return;
await axios
.get('/api/users/me', {
headers: {
Authorization: `Bearer ${jwt}`,
},
})
.then((response) => {
setUser(response.data);
setIsLogged(true);
})
.catch((error) => {});
}, []);
return [logged, user, setIsLogged];
};
export default useUser;
This hooks works corectly in 99% of cases, but when i go on login form page, the login form flashes for a sec to logged in users, since the logged status is false before the check is initialized
import React, { useEffect, useState } from 'react';
import useUser from '../../lib/useUser';
import { useRouter } from 'next/router';
import LoginForm from '../../components/LoginForm';
function Login() {
const { push } = useRouter();
const [logged] = useUser();
console.log(ljwt, logged);
if (logged) {
//push('/');
return <p>nored</p>;
}
if (!logged) {
return <LoginForm />;
}
}
export default Login;
how can i avoid this? i tried to pass to useUser the jwt, so it assume the user is logged in while performing the remote check, but it is not really working as expected.
any suggestion?
Don't render the login form when the login state is still indeterminate.
By the way, useEffect functions can't be async in themselves, since they need to either return nothing or a cleanup function; async functions always return a promise.
async function getLoginState() {
const jwt = localStorage.getItem("jwt");
if (!jwt) return [false, null];
const resp = await axios.get("/api/users/me", {
headers: {
Authorization: `Bearer ${jwt}`,
},
});
return [true, response.data];
}
/**
* Get user login state.
*
* Returns undefined if the login state is not yet known.
* Returns a 2-item array [loginState, user] otherwise.
* `user` can be null when `loginState` is false.
*/
function useLoginState() {
const [loginState, setLoginState] = useState(undefined);
useEffect(() => {
getLoginState().then(setLoginState);
}, []);
return loginState;
}
function Login() {
const { push } = useRouter();
const loginState = useLoginState();
if (loginState === undefined) {
return <>Loading...</>;
}
const [logged, user] = loginState;
if (logged) {
return <p>Hi, {JSON.stringify(user)}</p>;
} else {
return <LoginForm />;
}
}
I'm using the auth0 token provided by the user on login to make api calls via useAuth0.getTokenSilently.
In this example, fetchTodoList, addTodoItem, and updateTodoItem all require a token for authorization. I'd like to be able to extract these functions out in to a separate file (like utils/api-client.js and import them without having to explicitly pass in the token.
import React, { useContext } from 'react'
import { Link, useParams } from 'react-router-dom'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCircle, faList } from '#fortawesome/free-solid-svg-icons'
import axios from 'axios'
import { queryCache, useMutation, useQuery } from 'react-query'
import { TodoItem } from '../models/TodoItem'
import { TodoInput } from './TodoInput'
import { TodoList as TodoListComponent } from './TodoList'
import { TodoListsContext } from '../store/todolists'
import { TodoListName } from './TodoListName'
import { TodoList } from '../models/TodoList'
import { useAuth0 } from '../utils/react-auth0-wrapper'
export const EditTodoList = () => {
const { getTokenSilently } = useAuth0()
const fetchTodoList = async (todoListId: number): Promise<TodoList> => {
try {
const token = await getTokenSilently!()
const { data } = await axios.get(
`/api/TodoLists/${todoListId}`,
{
headers: {
Authorization: `Bearer ${token}`
}
}
)
return data
} catch (error) {
return error
}
}
const addTodoItem = async (todoItem: TodoItem): Promise<TodoItem> => {
try {
const token = await getTokenSilently!()
const { data } = await axios.post(
'/api/TodoItems',
todoItem,
{
headers: {
Authorization: `Bearer ${token}`,
}
}
)
return data
} catch (addTodoListError) {
return addTodoListError
}
}
const updateTodoItem = async (todoItem: TodoItem) => {
try {
const token = await getTokenSilently!()
const { data } = await axios.put(
'/api/TodoItems',
todoItem,
{
headers: {
Authorization: `Bearer ${token}`,
}
}
)
return data
} catch (addTodoListError) {
return addTodoListError
}
}
const [updateTodoItemMutation] = useMutation(updateTodoItem, {
onSuccess: () => {
queryCache.refetchQueries(['todoList', todoListId])
}
})
const [addTodoItemMutation] = useMutation(addTodoItem, {
onSuccess: () => {
console.log('success')
queryCache.refetchQueries(['todoList', todoListId])
}
})
const onAddTodoItem = async (todoItem: TodoItem) => {
try {
await addTodoItemMutation({
...todoItem,
todoListId: parseInt(todoListId, 10)
})
} catch (error) {
// Uh oh, something went wrong
}
}
const { todoListId } = useParams()
const { status, data: todoList, error } = useQuery(['todoList', todoListId], () => fetchTodoList(todoListId))
const { todoLists, setTodoList } = useContext(TodoListsContext)
const todoListIndex = todoLists.findIndex(
list => todoListId === list.id.toString()
)
const setTodoItems = (todoItems: TodoItem[]) => {
// if(todoList) {
// const list = { ...todoList, todoItems }
// setTodoList(todoListIndex, list)
// }
}
const setTodoListName = (name: string) => {
// setTodoList(todoListIndex, { ...todoList, name })
}
return (
<>
<Link className="block flex align-items-center mt-8" to="/">
<span className="fa-layers fa-fw fa-3x block m-auto group">
<FontAwesomeIcon
icon={faCircle}
className="text-teal-500 transition-all duration-200 ease-in-out group-hover:text-teal-600"
/>
<FontAwesomeIcon icon={faList} inverse transform="shrink-8" />
</span>
</Link>
{status === 'success' && !!todoList && (
<>
<TodoListName
todoListName={todoList.name}
setTodoListName={setTodoListName}
/>
<TodoInput
onAddTodoItem={onAddTodoItem}
/>
<TodoListComponent
todoItems={todoList.todoItems}
setTodoItems={setTodoItems}
updateTodo={updateTodoItemMutation}
/>
</>
)}
</>
)
}
Here's a link to the repo: https://github.com/gpspake/todo-client
I was having a similar issue on how to use getAccessTokenSilently outside of a React component, what I ended up with was this:
My HTTP client wrapper
export class HttpClient {
constructor() {
HttpClient.instance = axios.create({ baseURL: process.env.API_BASE_URL });
HttpClient.instance.interceptors.request.use(
async config => {
const token = await this.getToken();
return {
...config,
headers: { ...config.headers, Authorization: `Bearer ${token}` },
};
},
error => {
Promise.reject(error);
},
);
return this;
}
setTokenGenerator(tokenGenerator) {
this.tokenGenerator = tokenGenerator;
return this;
}
getToken() {
return this.tokenGenerator();
}
}
On my App root, I pass the getAccessTokenSilently from auth0
useEffect(() => {
httpClient.setTokenGenerator(getAccessTokenSilently);
}, [getAccessTokenSilently]);
And that's it!
You now have an axios instance ready to do authenticated requests with
This is a variant of the answer by #james-quick, where I am using a "RequestFactory" to generate requests in the axios format, and then just adding the auth header from Auth0
I was facing the same issue, and I got around this limitation by moving all my API call logic into a custom hook that I created:
import { useAuth0 } from '#auth0/auth0-react';
import { useCallback } from 'react';
import makeRequest from './axios';
export const useRequest = () => {
const { getAccessTokenSilently } = useAuth0();
// memoized the function, as otherwise if the hook is used inside a useEffect, it will lead to an infinite loop
const memoizedFn = useCallback(
async (request) => {
const accessToken = await getAccessTokenSilently({ audience: AUDIANCE })
return makeRequest({
...request,
headers: {
...request.headers,
// Add the Authorization header to the existing headers
Authorization: `Bearer ${accessToken}`,
},
});
},
[isAuthenticated, getAccessTokenSilently]
);
return {
requestMaker: memoizedFn,
};
};
export default useRequest;
Usage Example:
import { RequestFactory } from 'api/requestFactory';
const MyAwesomeComponent = () => {
const { requestMaker } = useRequest(); // Custom Hook
...
requestMaker(QueueRequestFactory.create(queueName))
.then((response) => {
// Handle response here
...
});
}
RequestFactory defines and generates the request payload for my different API calls, for example:
export const create = (queueName) => ({ method: 'post', url: '/queue', data: { queueName } });
Here is a full Auth0 integration PR for reference.
I'm not exactly sure why you couldn't access the token inside of your individual functions? Is it because they wouldn't be React function components but just regular functions?
One of the things I have done is create a useFetch hook that can get the user token and attach it to a request itself. Then, instead of exporting those functions specifically,I can just call this new fetch hook. Here's an example of what I mean.
import React from "react"
import { useAuth0 } from "../utils/auth"
const useFetch = () => {
const [response, setResponse] = React.useState(null)
const [error, setError] = React.useState(null)
const [isLoading, setIsLoading] = React.useState(false)
const { getTokenSilently } = useAuth0()
const fetchData = async (url, method, body, authenticated, options = {}) => {
setIsLoading(true)
try {
if (authenticated) {
const token = await getTokenSilently()
if (!options.headers) {
options.headers = {}
}
options.headers["Authorization"] = `Bearer ${token}`
}
options.method = method
if (method !== "GET") {
options.body = JSON.stringify(body)
}
const res = await fetch(url, options)
const json = await res.json()
setResponse(json)
setIsLoading(false)
if (res.status === 200) {
return json
}
throw { msg: json.msg }
} catch (error) {
console.error(error)
setError(error)
throw error
}
}
return { response, error, isLoading, fetchData }
}
export default useFetch
Ok, got it!
Now that I understand better, my real question was how to provide an auth0 token to axios requests such that they don't need to be declared in components.
The short answer:
Get the token when auth0 is initialized and register an axios interceptor to set that token as a header value for all axios requests.
The long answer (examples in typescript):
Declare a function that takes a token and registers an axios interceptor
const setAxiosTokenInterceptor = async (accessToken: string): Promise<void> => {
axios.interceptors.request.use(async config => {
const requestConfig = config
if (accessToken) {
requestConfig.headers.common.Authorization = `Bearer ${accessToken}`
}
return requestConfig
})
}
In the auth0provider wrapper, when the auth0 client is initialized and authenticated, get the token with setAxiosTokenInterceptor and pass it to the function that registers the interceptor (Modified example from the Auth0 React SDK Quickstart):
useEffect(() => {
const initAuth0 = async () => {
const auth0FromHook = await createAuth0Client(initOptions)
setAuth0(auth0FromHook)
if (window.location.search.includes('code=')) {
const { appState } = await auth0FromHook.handleRedirectCallback()
onRedirectCallback(appState)
}
auth0FromHook.isAuthenticated().then(
async authenticated => {
setIsAuthenticated(authenticated)
if (authenticated) {
auth0FromHook.getUser().then(
auth0User => {
setUser(auth0User)
}
)
// get token and register interceptor
const token = await auth0FromHook.getTokenSilently()
setAxiosTokenInterceptor(token).then(
() => {setLoading(false)}
)
}
}
)
}
initAuth0().catch()
}, [])
Calling setLoading(false) when the promise is resolved ensures that, if auth0 is finished loading, the interceptor has been registered. Since none of the components that make requests are rendered until auth0 is finished loading, this prevents any calls from being made without the token.
This allowed me to move all of my axios functions in to a separate file and import them in to the components need them. When any of these functions are called, the interceptor will add the token to the header
utils/todo-client.ts
import axios from 'axios'
import { TodoList } from '../models/TodoList'
import { TodoItem } from '../models/TodoItem'
export const fetchTodoLists = async (): Promise<TodoList[]> => {
try {
const { data } = await axios.get(
'/api/TodoLists'
)
return data
} catch (error) {
return error
}
}
export const fetchTodoList = async (todoListId: number): Promise<TodoList> => {
try {
const { data } = await axios.get(
`/api/TodoLists/${todoListId}`
)
return data
} catch (error) {
return error
}
}
export const addTodoItem = async (todoItem: TodoItem): Promise<TodoItem> => {
try {
const { data } = await axios.post(
'/api/TodoItems',
todoItem
)
return data
} catch (addTodoListError) {
return addTodoListError
}
}
...
Full source on github
I like to have my API calls in their own directory (under /api for example) and have the code to call to the API be as small as possible. I took a similar approach to others on here, using Auth0, TypeScript, Axios (including an interceptor) and React hooks.
The TLDR answer
Place your Axios interceptor within a hook, and then use that hook within segmented API hooks (ie, useUserApi, useArticleApi, useCommentApi and so on). You can then cleanly call your API using Auth0.
The long answer
Define your Axios hook, I've only covered the HTTP methods I'm currently using:
# src/api/useAxios.ts
import { useAuth0 } from '#auth0/auth0-react';
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
// We wrap Axios methods in a hook, so we can centrally handle adding auth tokens.
const useAxios = () => {
const { getAccessTokenSilently } = useAuth0();
axios.interceptors.request.use(async (config: any) => {
if (config.url.indexOf('http') === -1) {
config.url = `${process.env.REACT_APP_API_ENDPOINT}/${config.url}`;
}
if (typeof config.headers.Authorization === 'undefined') {
config.headers.Authorization = `Bearer ${await getAccessTokenSilently()}`;
}
return config;
});
return {
get: async (url: string, config?: AxiosRequestConfig<any> | undefined): Promise<AxiosResponse> => axios.get(url, config),
delete: async (url: string, config?: AxiosRequestConfig<any> | undefined): Promise<AxiosResponse> => axios.delete(url, config),
post: async (url: string, data?: any, config?: AxiosRequestConfig<any> | undefined): Promise<AxiosResponse> => axios.post(url, data, config),
put: async (url: string, data?: any, config?: AxiosRequestConfig<any> | undefined): Promise<AxiosResponse> => axios.put(url, data, config),
patch: async (url: string, data?: any, config?: AxiosRequestConfig<any> | undefined): Promise<AxiosResponse> => axios.patch(url, data, config),
}
};
export default useAxios;
What I'm doing here is adding a bearer token by calling getAccessTokensSilently() if one is not already defined. Additionally, if HTTP isn't present in my URL then I append the default API URL from my environment variables - this means I can keep my request short and not have to use the full URL every time.
Now I define a hook based on my user API as following:
# src/api/useUserApi.ts
import { UserInterface } from '[REDACTED]/types';
import { AxiosResponse } from 'axios';
import useAxios from './useAxios';
const useUserApi = () => {
const { get, post, put } = useAxios();
return {
getUser: (id: string): Promise<AxiosResponse<UserInterface>> => get(`user/${id}`),
putUser: (user: UserInterface) => put('user', user),
postUser: (user: UserInterface) => post('user', user),
}
};
export default useUserApi;
You can see I expose the underlying HTTP methods from Axios, and then use them in API specific scenarios, getUser, putUser, and postUser.
Now I can go ahead and call my API in some application logic, keeping the API code to the absolute minimum but still allowing full pass through and typing of the Axios objects.
import { useAuth0 } from '#auth0/auth0-react';
import { useNavigate } from 'react-router';
import useUserApi from '../../../api/useUserApi';
const LoginCallback = (): JSX.Element => {
const navigate = useNavigate()
const { user, isAuthenticated, isLoading } = useAuth0();
const { getUser, putUser, postUser} = useUserApi();
const saveUserToApi = async () => {
if (!user?.sub) {
throw new Error ('User does not have a sub');
}
// Try and find the user, if 404 then create a new one for this Auth0 sub
try {
const userResult = await getUser(user.sub);
putUser(Object.assign(user, userResult.data));
navigate('/');
} catch (e: any) {
if (e.response.status === 404) {
postUser({
id: user.sub,
email: user.email,
name: user.name,
givenName: user.givenName,
familyName: user.familyName,
locale: user.locale,
});
navigate('/');
}
}
}
if (isLoading) {
return <div>Logging you in...</div>;
}
if (isAuthenticated && user?.sub) {
saveUserToApi();
return <p>Saved</p>
} else {
return <p>An error occured whilst logging in.</p>;
}
};
export default LoginCallback;
You can note the above postUser, putUser and getUser API requests are all one liners, with only the declaration (const { getUser, putUser, postUser} = useUserApi();) and import being required otherwise.
This answer is definitely standing on the shoulders of giants, but I thought it would be useful all the same to someone who likes to keep their API calls as clean as possible.
There are different ways to solve this.
To not change your code base too much. I would go with a store with a provider and a hook. There are many store libraries out there.
Here is a tiny version which also can be used outside React rendering.
https://github.com/storeon/storeon
This was just one example of a very small store I could find that might fit the bill.
Using a store library outside React could look like:
import store from './path/to/my/store.js;'
// Read data
const state = store.get();
// Save data in the store
store.dispatch('foo/bar', myToken);
I want to test if the loginReset() function is being called every time there's an unauthorized request or response status code 401.
My code is what follows:
use-request.js
import axios from "axios"
import { axiosDefaultOptions } from "../config"
import { useSelector, useDispatch } from "react-redux"
import { loginReset } from "../store/reducers/login-slice"
const useRequest = (auth=false) => {
const request = axios.create(axiosDefaultOptions)
const dispatch = useDispatch()
if(auth){
const token = useSelector( state => state.login.data ? state.login.data.accessToken : null )
request.interceptors.request.use(config => {
config.headers.Authorization = token ? `Bearer ${token}` : ''
return config
})
request.interceptors.response.use(response => {
return response
}, error => {
if(error.response.status === 401) {
dispatch(loginReset())
}
return Promise.reject(error)
})
}
return request
}
export default useRequest
use-request.test.js
import { testHookwithStore } from "../utils"
import faker from "faker"
import { useRequest } from "../../components/hooks"
import configureStore from "redux-mock-store"
import MockAdapter from "axios-mock-adapter"
import { axiosDefaultOptions } from "../../components/config"
import thunk from "redux-thunk"
describe("useRequest", () => {
faker.seed(123);
let request = null
let authRequest = null
let token = faker.random.uuid()
const mockStore = configureStore([thunk])
let authRequestAdapter = null
const fakeDomainWord = faker.internet.domainWord()
const fakeUrl = `${axiosDefaultOptions.baseURL}/${fakeDomainWord}`
beforeEach(() => {
let store = mockStore({
login: { data: { accessToken: token } }
})
testHookwithStore(store, () => {
request = useRequest()
authRequest = useRequest(true)
authRequestAdapter = new MockAdapter(authRequest)
authRequestAdapter.onPost(fakeDomainWord, {}).reply(401, { code: 401, message: "Bad credentials" })
})
})
test("Request should have no headers", () => {
request.interceptors.request.use( config => {
expect(config.headers.Authorization).toBeNull()
})
})
test("Auth request should have Authentication Headers", () => {
authRequest.interceptors.request.use( config => {
expect(config.headers.Authorization).toBe(`Bearer ${token}`)
})
})
test("Auth request resets login when 401", async () => {
const loginReset = jest.fn()
try{
await authRequest.post(fakeUrl, {})
}
catch(error){
expect(loginReset).toHaveBeenCalledTimes(1)
}
})
})
testHookwithStore basically just creates a component wrapped around a provider. The last test is failing and I'm not sure how I would verify if the dispatch is actually working. Any clues here?
Apparently, there's a getActions() function on the mocked store.
test("Auth request resets login when 401", async () => {
try{
await authRequest.post(fakeUrl, {})
}
catch(error){
expect(store.getActions()[0].type).toBe("loginReset")
}
})