Nuxt•14mo ago

Does plugins run after server middlewares?

I have a module plugin like

plugin.ts

plugin.ts

import { defineNuxtPlugin, useRuntimeConfig } from '#app'

export default defineNuxtPlugin(async (nuxtApp) => {
  
  const config = useRuntimeConfig();
  const { fetchUser } = useAuth();
  const { token, checkAutoRefresh } = useToken();
  const user = useUser();

  async function checkIfUserExists() {
      if (!user.value && token.value) {
        await fetchUser();
      }
  }

  // do the checks server-side, instead of using hook 'app:created', 
  // as this hook is not called on SSR=true (static generation)
  await checkAutoRefresh();
  await checkIfUserExists();

  nuxtApp.hook('page:start', async () => {
    if (import.meta.client) {
      await checkAutoRefresh();
      await checkIfUserExists();
    }
  })
})

import { defineNuxtPlugin, useRuntimeConfig } from '#app'

export default defineNuxtPlugin(async (nuxtApp) => {
  
  const config = useRuntimeConfig();
  const { fetchUser } = useAuth();
  const { token, checkAutoRefresh } = useToken();
  const user = useUser();

  async function checkIfUserExists() {
      if (!user.value && token.value) {
        await fetchUser();
      }
  }

  // do the checks server-side, instead of using hook 'app:created', 
  // as this hook is not called on SSR=true (static generation)
  await checkAutoRefresh();
  await checkIfUserExists();

  nuxtApp.hook('page:start', async () => {
    if (import.meta.client) {
      await checkAutoRefresh();
      await checkIfUserExists();
    }
  })
})

The plugin checks if the token is expired and refreshes it on the SSR. I am trying to get the refreshed token in the server middleware so i can fetch the currently logged in user in the server. But it seems like the server middlewares are run first before the plugin ever runs.

I need to use plugin to make the SSR auth work.

How do i get the refreshed token in the middleware so i can fetch for the user?

kapa.ai•10/24/24, 6:38 AM

Hi @Nisthar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•10/24/24, 6:39 AM

----------------------
Based on the information provided in the knowledge sources, I can answer your question about the execution order of plugins and server middlewares in Nuxt, as well as provide some suggestions for your specific use case.

Plugins in Nuxt typically run after server middlewares. However, the exact order of execution can be controlled to some extent. Here are some key points to consider:

By default, plugins are loaded sequentially as mentioned in the Nuxt documentation on parallel plugins (https://nuxt.com/docs/guide/directory-structure/plugins#parallel-plugins).
You can control the order of plugin execution using the option when adding plugins. As stated in the Nuxt documentation on plugin options (https://nuxt.com/docs/api/kit/plugins#pluginoptions), lower numbers run first, and user plugins default to . It's recommended to set to a number between for pre-plugins (plugins that run before Nuxt plugins) and for post-plugins (plugins that run after Nuxt plugins).
You can also use the option to specify dependencies between plugins, ensuring that certain plugins run after others as described in the Nuxt documentation on plugins with dependencies (https://nuxt.com/docs/guide/directory-structure/plugins#plugins-with-dependencies).

Regarding your specific question about getting the refreshed token in the middleware to fetch the user, here are a few suggestions:

Consider using a plugin with a lower value to ensure it runs earlier in the Nuxt lifecycle. This might allow your token refresh logic to run before the server middleware.

kapa.ai•10/24/24, 6:39 AM

Another approach could be to use Nuxt's state management capabilities, such as Pinia, to store the token and user information. You could initialize this store in your plugin and then access it in your server middleware. This is similar to the approach suggested in this Stack Overflow answer about using cookies in Nuxt 3 APIs and Middlewares (https://stackoverflow.com/questions/77590950).
If the above approaches don't work, you might need to refactor your authentication logic. Consider moving the token refresh and user fetching logic into a separate utility or composable that can be called from both your plugin and your server middleware.

It's important to note that the exact behavior might depend on your Nuxt version and configuration. If you're still having issues, you might want to consult the Nuxt documentation on rendering modes (https://nuxt.com/docs/guide/concepts/rendering#universal-rendering) to ensure you're handling server-side and client-side rendering correctly in your authentication flow.

Remember that when working with authentication in a server-side rendered application, you need to be careful about when and where you're running certain code. The Nuxt documentation states: "Middlewares and pages run in the server and on the client during hydration. Plugins can be rendered on the server or client or both."

If you continue to face issues, you might want to consider opening an issue on the Nuxt GitHub repository, as there have been recent discussions and fixes related to plugin and middleware execution order, such as this pull request about loading layer middlewares before project middlewares (https://github.com/nuxt/nuxt/pull/22925).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•10/24/24, 6:39 AM

@155692068675518464 Kapa.ai is still learning and improving, please let me know how I did by reacting below.