API call is repeated upon re-login after logout without user action

[andre-silva9975]

Environment

---

• Operating System: Linux
• Node Version: v20.14.0
• Nuxt Version: 3.12.2
• CLI Version: 3.12.0
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, build, modules, vite, css, auth, runtimeConfig
• Runtime Modules: (), @sidebase/[email protected]
• Build Modules: -

---

Reproduction

https://github.com/andre-silva9975/nuxt-auth-playground

Describe the bug

I am experiencing an issue with the authentication module where ,for example, a POST request is unintentionally repeated upon re-login after logging out. Here are the steps to reproduce the issue:

• Log in to the application.
• Make a POST request to a specific endpoint (e.g., submitting a form or creating a resource).
• Log out of the application.
• Log in again.

The README file explains the actions necessary to reproduce this problem.

One workaround I found was to reload the page before calling the "signOut method. The if I log in the the previous request is not performed.

Expected Behavior:

After logging in again, no previous POST requests should be automatically repeated.

Actual Behavior:

When re-login, the POST request made in step 2 is repeated without any user action.

Additional context

No response

Logs

No response

[andre-silva9975]

I realized that the api calls that are performed again after logging in, are those which have the token in the headers and are called using useFetch(). I changed to $fetch() and those calls are no longer perform when doing log in. However, when fetching data in the created() method I have to use useFetch() since I believe it's the correct way to fetch data. This does not cause any severe problems to me, because GET requests do not change the database state.

[warflash]

Just quickly checked your reproduction, useFetch should also be called top level in your setup only since it's a composable. Incorrect registration might cause duplicate requests due to inproper cleanup

[zoey-kaiser]

Hi @andre-silva9975 👋

As mentioned by @warflash, useFetch will re-run anytime that the dependencies passing into it are updated. In this case, you reference const { token } = useAuth() inside the useFetch method, which changes from your token to null after logging out, hence triggering another fetch.

We have discussed adding a composable like useAuthenticatedFetch() to make requests out of the box with your token set. You can follow along in the conversation and also see how other solved making authenticated requests here in #688

[andre-silva9975]

Hi @andre-silva9975 👋

As mentioned by @warflash, useFetch will re-run anytime that the dependencies passing into it are updated. In this case, you reference const { token } = useAuth() inside the useFetch method, which changes from your token to null after logging out, hence triggering another fetch.

We have discussed adding a composable like useAuthenticatedFetch() to make requests out of the box with your token set. You can follow along in the conversation and also see how other solved making authenticated requests here in #688

Hello.

I was able to fix this problem by changing from options API to composition API and by calling the composable inside setup like @warflash told before. Thanks for the explanation!