title: access token from auth0provider outside of react components
body: <p>I'm using the auth0 token provided by the user on login to make api calls via useAuth0.getTokenSilently.</p>
  
  <p>In this example, <code>fetchTodoList</code>, <code>addTodoItem</code>, and <code>updateTodoItem</code> all require a token for authorization. I'd like to be able to extract these functions out in to a separate file (like <code>utils/api-client.js</code> and import them without having to explicitly pass in the token.</p>
  
  <pre><code>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 = () =&gt; {
  
    const { getTokenSilently } = useAuth0()
  
    const fetchTodoList = async (todoListId: number): Promise&lt;TodoList&gt; =&gt; {
      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&lt;TodoItem&gt; =&gt; {
      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) =&gt; {
      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: () =&gt; {
        queryCache.refetchQueries(['todoList', todoListId])
      }
    })
  
    const [addTodoItemMutation] = useMutation(addTodoItem, {
      onSuccess: () =&gt; {
        console.log('success')
        queryCache.refetchQueries(['todoList', todoListId])
      }
    })
  
    const onAddTodoItem = async (todoItem: TodoItem) =&gt; {
      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], () =&gt; fetchTodoList(todoListId))
    const { todoLists, setTodoList } = useContext(TodoListsContext)
    const todoListIndex = todoLists.findIndex(
      list =&gt; todoListId === list.id.toString()
    )
  
    const setTodoItems = (todoItems: TodoItem[]) =&gt; {
      // if(todoList) {
      //   const list = { ...todoList, todoItems }
      //   setTodoList(todoListIndex, list)
      // }
    }
  
    const setTodoListName = (name: string) =&gt; {
      // setTodoList(todoListIndex, { ...todoList, name })
    }
  
    return (
      &lt;&gt;
        &lt;Link className="block flex align-items-center mt-8" to="/"&gt;
          &lt;span className="fa-layers fa-fw fa-3x block m-auto group"&gt;
            &lt;FontAwesomeIcon 
              icon={faCircle} 
              className="text-teal-500 transition-all duration-200 ease-in-out group-hover:text-teal-600" 
            /&gt;
            &lt;FontAwesomeIcon icon={faList} inverse transform="shrink-8" /&gt;
          &lt;/span&gt;
        &lt;/Link&gt;
  
        {status === 'success' &amp;&amp; !!todoList &amp;&amp; (
          &lt;&gt;
            &lt;TodoListName
              todoListName={todoList.name}
              setTodoListName={setTodoListName}
            /&gt;
            &lt;TodoInput 
              onAddTodoItem={onAddTodoItem} 
            /&gt;
  
            &lt;TodoListComponent
              todoItems={todoList.todoItems}
              setTodoItems={setTodoItems}
              updateTodo={updateTodoItemMutation}
            /&gt;
          &lt;/&gt;
        )}
      &lt;/&gt;
    )
  }
  </code></pre>
  
  <p>Here's a link to the repo: <a href="https://github.com/gpspake/todo-client" rel="noreferrer">https://github.com/gpspake/todo-client</a></p>