title: Vue TypeScript Cookie auth
body: <p>I have some problems with Vue Typescript authentication.
  I have 2 files, Auth.ts and Api.ts. So every time when the user is logged in, API needs to update the token for Authentication, but I will need to refresh the page for that.</p>
  <p>So here is the deal. Starting with Api.ts</p>
  <pre><code>export default function useCometAPI(secured_api = true) {
    const error = ref(null);
  
    const Token: Ref&lt;string | undefined&gt; = ref(
      useCookies().cookies.get(&quot;token&quot;)
    );
  
    const { CurrentUserToken } = useAuth(); // not used in that case
  
    console.log(&quot;test &quot; + Token.value);
   
    const API_URL: ComputedRef&lt;string&gt; = computed(() =&gt; {
      const RAW_URI = new URL(&quot;http://127.0.0.1:8000&quot;);
      RAW_URI.port = &quot;8000&quot; || &quot;80&quot;;
      return RAW_URI.href;
    });
  
    const AxiosInstance = axios.create({
      headers: {
        Accept: &quot;application/json&quot;,
        &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;,
        &quot;Content-Type&quot;: &quot;application/json&quot;,
        &quot;X-Requested-With&quot;: &quot;XMLHttpRequest&quot;,
        Authorization: `Bearer ` + Token.value,
      },
      baseURL: &quot;http://127.0.0.1:8000/&quot; || API_URL.value,
      withCredentials: true,
    });
  </code></pre>
  <p>as you see I have CurrentUserToken that is const from the Auth function, but it's not used in that case, because it's not even updated from there. So why I did `const Token like that is, because I have a function to update that token, and it looks like this:</p>
  <pre><code>const setToken = async (token: string) =&gt; {
      Token.value = token;
    };
  </code></pre>
  <p>And I'm calling that function in Auth file like:</p>
  <pre><code>const Login = async (payload: ILogin): Promise&lt;void&gt; =&gt; {
      await get(&quot;/sanctum/csrf-cookie&quot;).then(() =&gt; {
        post(&quot;/api/auth/login&quot;, payload)
          .then((response: any) =&gt; {
            cookie.set(&quot;token&quot;, response.data.data.token);
            setToken(response.data.data.token);
            Token.value = response.data.data.token; // Even trying with direct const
            _populateReactivity(response);
            router.push({ name: &quot;home&quot; });
          })
          .catch((e: any) =&gt; {
            notify({
              type: &quot;error&quot;,
              title: e.response.data?.message,
            });
          });
      });
    };
  </code></pre>
  <p>So here is that function _populateReactivity, that is setting CurrentUserToken (I mentioned it in Api.ts), and It's still not updated in the Api.ts file. And here is how it looks:</p>
  <pre><code>const _populateReactivity = (result: any): void =&gt; {
      CurrentUserToken.value = cookie.get(&quot;token&quot;) ?? result?.data.data.token;
      CurrentUser.value = result?.data.data.name;
    };
  </code></pre>
  <p>I tried to put cookies in the computed function, but we all know it could not work.</p>
  <p>So I didn't show the full code, but Api.ts has get, post, drop... methods as functions, and I'm calling that get method in Auth.ts for example:</p>
  <pre><code>const put = async (
      path: string,
      payload: Record&lt;string, any&gt;,
      config?: AxiosRequestConfig
    ): Promise&lt;AxiosResponse&gt; =&gt; {
      try {
        return AxiosInstance.put(path, payload, config);
      } catch (e) {
        const err: any = e;
        error.value = err.response.data;
        throw e;
      }
    };
  </code></pre>
  <p>And those methods are called before exporting useAuth function like:</p>
  <pre><code>const { get, post, drop, setToken, Token } = useCometAPI(true);
  
  export default function useAuth() {
  </code></pre>
  <p>Solution (I hope not to use it) is to call all methods separately for example in login function like:</p>
  <pre><code>const Login = async (payload: ILogin): Promise&lt;void&gt; =&gt; {
      const { get, post, setToken, Token } = useCometAPI(true);
      await get(&quot;/sanctum/csrf-cookie&quot;).then(() =&gt; {
         post(&quot;/api/auth/login&quot;, payload)...
  </code></pre>
  <p>And it would work, but is that the best solution? I think there should be a simpler one to update that useCometAPI function because it's called before exporting Auth function, and it's blocking it from updating, as I said, when I refresh the page it would work
  Any ideas on how to simplify this?</p>