[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-settings":3,"blogpost-nuxt-auth-refresh-token-authentication-in-your-nuxt-app":76},{"footer":4,"contact_form":6,"chat_widget":11,"accolades":19,"seo_social":67},{"iso_notice":5},"Wolfpack Digital is an ISO 9001:2015, ISO 27001:2013 and ISO 14001:2015 certified company - © _YEAR_ Wolfpack Digital. All rights reserved.",{"budgets":7},[8,9,10],"Under $50.000","Between $50.000 - 200.000","Over $200.000",{"consent":12},{"greeting":13,"title":14,"body":15,"accept_label":16,"decline_label":17,"declined_message":18},"Awoo! I'm Wolfpack Digital's AI assistant. Ask me anything about our services, process, or team, and if you want a project estimate, I can point you to our AI Estimator.","Data Privacy","\u003Cp>Hi there! We would love to talk with you. Under the EU General Data Protection Regulation, we need your approval for our use of personal information (e.g. your name and email address) you may provide as we communicate:\u003C\u002Fp>\n\u003Col>\n  \u003Cli>We'll store your personal information so that we can pick up the conversation if we talk later.\u003C\u002Fli>\n  \u003Cli>We may send you emails to follow up on our discussion here.\u003C\u002Fli>\n  \u003Cli>We may send you emails about our upcoming services and promotions.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Is this okay with you?\u003C\u002Fp>","Yes, I Accept","No, Not Now","No problem. Come back if you change your mind.",{"winnersOfList":20,"awardsList":33,"inHouseAppImages":50,"certificationsList":54},[21,25,29],{"alt":22,"href":23,"image":24},"European Awards","https:\u002F\u002Fwww.theeuropeanawards.eu\u002Fpremiado\u002Fwolfpack-digital-awarded-in-the-app-development-category","\u002Fimages\u002Fabout-us\u002Fwinners\u002Feuropean.svg",{"alt":26,"href":27,"image":28},"Webby Awards","https:\u002F\u002Fwinners.webbyawards.com\u002F2024\u002Fwebsites-and-mobile-sites\u002Fresponsible-technology\u002Fresponsible-ai\u002F275408\u002Fequality-ai-fair-and-unbiased-algorithms-to-eliminate-discrimination-in-machine-learning-models","\u002Fimages\u002Fabout-us\u002Fwinners\u002Fwebby.svg",{"alt":30,"href":31,"image":32},"Wolfpack Digital — Gold, Digital & Creative Agency Excellence, eir business Chambers Ireland Awards 2026","https:\u002F\u002Fchambersawards.ie\u002F2026-winners\u002F","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fcb786b7ba09fce584e78fac33bc70a07.png",[34,38,42,46],{"alt":35,"href":36,"image":37},"Clutch 1000 List Reveals Top-Rated Business Service Providers of 2023","https:\u002F\u002Fclutch.co\u002Fpress-releases\u002Fclutch-1000-fall-2023","\u002Fimages\u002Fabout-us\u002Fawards\u002Fclutch.svg",{"alt":39,"href":40,"image":41},"Clutch Recognizes the 1000 Best B2B Service Providers in its Exclusive 2019 Clutch 1000 List","https:\u002F\u002Fclutch.co\u002Fpress-releases\u002Frecognizes-1000-best-b2b-service-providers-its-exclusive-2019-1000-list","\u002Fimages\u002Fabout-us\u002Fawards\u002Fglobal.svg",{"alt":43,"href":44,"image":45},"Mobile App Daily Award","","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmobile-app-daily.svg",{"alt":47,"href":48,"image":49},"Manifest Award","https:\u002F\u002Fthemanifest.com\u002Fro\u002Fweb-development\u002Fcompanies","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmanifest.svg",[51],{"alt":52,"href":44,"image":53},"Wolfpack Labs","\u002Fimages\u002Fhomepage\u002Fawards\u002Flabs.svg",[55,59,63],{"alt":56,"href":57,"image":58},"ISO 27001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LD367","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-27001.svg",{"alt":60,"href":61,"image":62},"ISO 9001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LBDB0","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-9001.svg",{"alt":64,"href":65,"image":66},"ISO 14001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fma\u002Fissued-certificates\u002F?certID=_7690LZSGS","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-14001.svg",{"default_og_image_urls":68,"default_og_image_alt":72,"og_site_name":72,"og_locale":73,"twitter_site":74,"page_type_defaults":75},[69],{"style":70,"url":71},"og","\u002Fimages\u002Fsocial_share_preview.jpg","Wolfpack Digital","en_US","@DigitalWolfpack",{},["Reactive",77],{"title":78,"body":79,"slug":80,"featured_image_urls":81,"meta_tags":106,"reading_time":116,"title_size":117,"tag_list":118,"formatted_published_at":119,"short_description":120,"categories":121,"alt_text":114,"published_at":123,"content_updated_at":124,"formatted_content_updated_at":125,"key_takeaways":126,"faqs":132,"updated_at":145,"canonical_override":44,"no_index":146,"canonical_url":147,"publishers":148},"Nuxt Auth - Refresh Token Authentication in Your Nuxt App","\u003Cp dir=\"ltr\">User authentication is something we handle on almost every Nuxt project. This feature is widely used, especially in JavaScript, where implementation approaches vary a lot. The good news is that the Nuxt ecosystem offers dedicated auth modules with solid documentation.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">A quick note before we start. This guide covers the \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fauth.nuxtjs.org\u002F\" target=\"_blank\">\u003Cspan style=\"color:#fa357b\">nuxt-auth\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fstrong> module, also known as \u003Ccode>auth-next\u003C\u002Fcode>. It was built for Nuxt 2 and the Options API. Nuxt has since moved on. Nuxt 4 is now the current stable release, and Nuxt 3 is in maintenance mode. For a new Nuxt 3 or Nuxt 4 app, the community now recommends newer modules such as sidebase nuxt-auth or the Nuxt team's nuxt-auth-utils. This article still explains the core ideas of token refresh authentication, which apply across modules. But check the \u003Ca href=\"https:\u002F\u002Fnuxt.com\u002Fmodules?category=Security\" target=\"_blank\">\u003Cspan style=\"color:#fa357b\">official Nuxt modules directory\u003C\u002Fspan>\u003C\u002Fa> before you start a fresh project.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">With that said, nuxt-auth is the module we cover here. It lets you configure a flow that fits your needs. You can use one of the supported providers or strategies, or create a custom scheme of your own.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">This article covers a complete setup for a Nuxt app that handles a token refresh scheme.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">At the time of writing, the auth module had two major versions to choose from. Their statuses can be checked \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fauth.nuxtjs.org\u002Fstatus\" target=\"_blank\">\u003Cspan style=\"color:#fa357b\">here\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fstrong>. The v5 option came with more documentation, features, and fixes, though its API could still change. The v4 option did not support the refresh strategy, as the Nuxt contributors confirmed \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnuxt-community\u002Fauth-module\u002Fissues\u002F761\" target=\"_blank\">\u003Cspan style=\"color:#fa357b\">here\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fstrong>. So let's get started.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Ch2 dir=\"ltr\">Setup\u003C\u002Fh2>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">First, we add \u003Ccode>auth-next\u003C\u002Fcode> and \u003Ccode>axios\u003C\u002Fcode> as dependencies.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"Terminal commands running yarn add for the nuxtjs auth-next and axios packages\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F489\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_1n.png\" style=\"width: 800px; height: 53px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">Then we add them to the modules in \u003Ccode>nuxt.config.js\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"nuxt.config.js code adding the axios and auth modules to the modules array\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F491\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_2n.png\" style=\"width: 800px; height: 239px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">Make sure you use \u003Ccode>auth-next v5\u003C\u002Fcode>, since it has more features, including the refresh token strategy. Also make sure the \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002Fdirectory-structure\u002Fstore\" target=\"_blank\">\u003Cspan style=\"color:#fa357b\">Vuex store is active\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fstrong>.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Ch2 dir=\"ltr\">The 'auth' middleware\u003C\u002Fh2>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">The \u003Ccode>auth\u003C\u002Fcode> middleware can be enabled per route or globally. It's the default middleware, but you can also create custom ones.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cstrong>Setting it per route:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"Vue page component code setting the auth middleware for a single route\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F492\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_3n.png\" style=\"width: 800px; height: 80px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cstrong>Setting it globally:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"nuxt.config.js router code enabling the auth middleware globally for every route\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F493\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_4n.png\" style=\"width: 800px; height: 80px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cstrong>Removing the middleware for specific components after setting it globally:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"Vue component code disabling the auth middleware on a page after it was set globally\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F494\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_5n.png\" style=\"width: 800px; height: 79px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cstrong>Setting custom middleware. For example, with multiple user types, you would add an option to the middleware:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"Vue component code adding a custom middleware option to handle multiple user types\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F495\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_6n.png\" style=\"width: 800px; height: 78px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Ch2 dir=\"ltr\">Other tweaks\u003C\u002Fh2>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">There are many tweaks you can make. For example, you can set the default redirects for your auth middleware.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"nuxt.config.js auth code defining default redirect routes for login, logout and home\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F496\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_7n.png\" style=\"width: 800px; height: 186px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Ch2 dir=\"ltr\">Let's implement a login\u003C\u002Fh2>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">First, we start with our Axios settings.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"Axios configuration code setting the API base URL and default headers for the Nuxt app\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F498\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_8n.png\" style=\"width: 800px; height: 318px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">Then we handle the login inside our component. For this example, we use a regular email and password login, but you can customize it.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"Vue component code with a handleLogin method that calls this.$auth.loginWith local using email and password\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F497\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_9n.png\" style=\"width: 800px; height: 373px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">You can see we used \u003Ccode>login with local\u003C\u002Fcode> inside our component. This is also set up in our \u003Ccode>nuxt.config.js\u003C\u002Fcode> file.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"nuxt.config.js auth strategies code defining the local strategy with login, logout and user endpoints\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F500\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_10n.png\" style=\"width: 800px; height: 531px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">Now, when you hit the button that calls \u003Ccode>handleLogin\u003C\u002Fcode>, you'll see the response from the login method of our API. In my case, that's \u003Ccode>localhost:3000\u002Fapi\u002Fv1\u002Flogin\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">The case I considered returns a JSON like this.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"JSON login response showing an access token and a refresh token returned by the API\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F501\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_11n.png\" style=\"width: 800px; height: 267px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">That's why the user endpoint has \u003Ccode>false\u003C\u002Fcode> as a value. If we needed another call to fetch the user after login, we would set that up and use the \u003Ccode>autoFetch\u003C\u002Fcode> option.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">For now, we only have the successful API call. But visiting any component that uses \u003Ccode>middleware: ['auth']\u003C\u002Fcode> will redirect us back to login. To fix this, we set the token and the user in the store so that \u003Ccode>$auth\u003C\u002Fcode> treats our user as logged in.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"Component code setting the auth token and user in the store after a successful login\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F506\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_12n.png\" style=\"width: 800px; height: 133px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">Say we want to redirect to the user's profile page after login. Fetching the user right after login is a good idea, since it goes into the store and we can read it from there. So right after login, our page handles two things: refreshing the user data and logging out.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Ch2 dir=\"ltr\">Logging out\u003C\u002Fh2>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">Inside our \u003Ccode>nuxt.config.js\u003C\u002Fcode>, we already set \u003Ccode>logout: false\u003C\u002Fcode> in the endpoints object. Here you would add the URL if the backend also handles logout, but that's not required in our case.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">After that, we can use logout. Inside our component, the button action is \u003Ccode>@click=\"handleLogout\"\u003C\u002Fcode> with this logic.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"Component code for a handleLogout method that calls this.$auth.logout to clear the session\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F507\u002Fcontent_Nuxt_Auth_-_Refresh_Tonek_Authentication_in_your_nuxt_app_final.png\" style=\"width: 800px; height: 78px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">This automatically removes the logged-in details from the store. After that, the middleware redirects the user to the chosen route when the state is not logged in.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Ch2 dir=\"ltr\">Getting the user\u003C\u002Fh2>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">By default, nuxt-auth has a \u003Ccode>user\u003C\u002Fcode> option that stores the user details right after login. It can fetch them right after a successful login, or, in our case, get them from the login API response.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">The way we configured this, our user comes from \u003Ccode>user: { url: '\u002Fapi\u002Fv1\u002Fprofile', method: 'get' }\u003C\u002Fcode>. The \u003Ccode>property\u003C\u002Fcode> value is \u003Ccode>false\u003C\u002Fcode> because, for that call, the details sit at the root of the object.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">On the profile page, we can read the user like this.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"Profile page component code reading the logged-in user from this.$auth.user\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F503\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_13n.png\" style=\"width: 800px; height: 292px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">This way, even when the page refreshes, the user stays stored and we don't get logged out.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Ch2 dir=\"ltr\">Refreshing the token\u003C\u002Fh2>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">Nuxt-auth v5 added the refresh token strategy. It has a default \u003Ccode>refresh scheme\u003C\u002Fcode>. It requires us to add these to our \u003Ccode>nuxt.config.js\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"nuxt.config.js refresh strategy code with the refresh scheme, token and refreshToken endpoint options\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F504\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_14n.png\" style=\"width: 800px; height: 505px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">This setup has default logic built in. When you call \u003Ccode>this.$auth.refreshTokens()\u003C\u002Fcode>, it uses the data in \u003Ccode>$auth.refreshToken.get()\u003C\u002Fcode> and sends it to the defined endpoint. Without the scheme refresh and the \u003Ccode>refreshToken\u003C\u002Fcode> option in the strategy, we couldn't set these up. Having both also makes the next line make more sense: the first parameter is the access token, and the second is the refresh token, which we can only use now.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"Single line of code calling setUserToken with the access token and the refresh token as arguments\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F502\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_15n.png\" style=\"width: 800px; height: 28px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">But in our case, the refresh token API call needs a little more. Using the example above, the call is \u003Ccode>POST \u002Fapi\u002Fv1\u002Ftoken with { refresh_token: 'refresh_token_from_$auth' }\u003C\u002Fcode>. Our API needs parameters like \u003Ccode>{ grant_type: 'refresh_token', refresh_token: 'refresh_token' }\u003C\u002Fcode>. To fix this, we can use \u003Ccode>url: '\u002Fapi\u002Fv1\u002Ftoken?grant_type=refresh_token'\u003C\u002Fcode> as the refresh endpoint URL.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Ch2 dir=\"ltr\">Custom refresh logic\u003C\u002Fh2>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">If you need more complex refresh token logic, you can create a custom scheme and refresh controller. It looks something like this.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"JavaScript code for a custom auth refresh scheme and controller overriding the refreshTokens method\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F505\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App_16n.png\" style=\"width: 800px; height: 974px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">This way, whenever the \u003Ccode>refreshTokens\u003C\u002Fcode> method is called, your custom refresh logic runs.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">The logic to intercept all 401 requests can live in the \u003Ccode>plugins\u002Faxios.js\u003C\u002Fcode> file, with something like this.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">\u003Cimg alt=\"axios plugin code with a response interceptor that catches 401 errors and triggers a token refresh\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F490\u002Fcontent_Nuxt_Auth_-_Refresh_Token_Authentication_in_Your_Nuxt_App__17n.png\" style=\"width: 800px; height: 134px\">\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Ch2 dir=\"ltr\">Conclusion\u003C\u002Fh2>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">The benefit of this approach is that your code looks much cleaner, with all the auth methods in one place. You can read the token, the user, or the state through \u003Ccode>$auth\u003C\u002Fcode>. You don't need to implement auth methods with \u003Ccode>$axios\u003C\u002Fcode> directly, which makes everything easier to separate and handle.\u003C\u002Fp>\u003Cp>\r\n\r\n\u003C\u002Fp>\u003Cp dir=\"ltr\">I hope this guide helped you learn more about nuxt-auth and how to use it. If you'd like to build with Nuxt, take a look at our \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Ftechnologies\u002Fnuxt-js\" target=\"_blank\">Nuxt.js development\u003C\u002Fa>\u003C\u002Fstrong> and \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Ftechnologies\u002Fvue-js\" target=\"_blank\">Vue.js development\u003C\u002Fa>\u003C\u002Fstrong> services, or see how our \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fservices\u002Fweb-development\" target=\"_blank\">web development team\u003C\u002Fa>\u003C\u002Fstrong> works. Want to go deeper on Nuxt itself? Read \u003Cstrong style=\"color: rgb(250, 53, 123)\">\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Funderstanding-nuxt-3-part-i\" target=\"_blank\">Understanding Nuxt 3 - Part I\u003C\u002Fa>\u003C\u002Fstrong>, or \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts?page=1&categories=web-development\">\u003Cspan style=\"color:#fa357b\">check out the other web development topics on our blog\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fstrong>.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>","nuxt-auth-refresh-token-authentication-in-your-nuxt-app",[82,85,88,91,94,97,100,103],{"style":83,"url":84},"640","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F190\u002Ffeatured_image\u002F640\u002FNuxt%20Auth_Landscape.webp",{"style":86,"url":87},"768","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F190\u002Ffeatured_image\u002F768\u002FNuxt%20Auth_Landscape.webp",{"style":89,"url":90},"1024","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F190\u002Ffeatured_image\u002F1024\u002FNuxt%20Auth_Landscape.webp",{"style":92,"url":93},"1366","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F190\u002Ffeatured_image\u002F1366\u002FNuxt%20Auth_Landscape.webp",{"style":95,"url":96},"1600","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F190\u002Ffeatured_image\u002F1600\u002FNuxt%20Auth_Landscape.webp",{"style":98,"url":99},"1920","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F190\u002Ffeatured_image\u002F1920\u002FNuxt%20Auth_Landscape.webp",{"style":101,"url":102},"thumb","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F190\u002Ffeatured_image\u002Fthumb\u002FNuxt%20Auth_Landscape.webp",{"style":104,"url":105},"original","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F190\u002Ffeatured_image\u002Foriginal\u002FNuxt%20Auth_Landscape.webp",{"title":107,"description":108,"keywords":109,"contact_form:title":110,"contact_form:cta":111,"og:site_name":72,"og:type":112,"og:locale":73,"twitter:card":113,"twitter:site":74,"twitter:creator":74,"og:title":107,"og:image:alt":114,"twitter:title":107,"og:description":115,"twitter:description":115},"Nuxt Auth: Refresh Token Guide | Wolfpack Digital","Nuxt auth guide: set up refresh token authentication with the nuxt-auth module, from login and logout to custom refresh logic, plus current module options.","nuxt auth, nuxt authentication, refresh token, jwt refresh token, nuxt js, wolfpack digital","contact us","send message","article","summary_large_image","3D illustration of a login screen in a browser window with a user avatar, password fields and a padlock, on a pink background","Set up refresh token authentication in your Nuxt app with the nuxt-auth module: login, logout, fetching the user, and custom refresh logic.","5",32,[],"May 6, 2022","A complete Nuxt auth walkthrough: set up refresh token authentication with the nuxt-auth module, covering login, logout, fetching the user, and custom refresh logic. We also flag the current auth modules to use for a new Nuxt 3 or Nuxt 4 project.",[122],"web-development","2022-05-06T06:43:49.000Z","2026-07-02T06:49:56.304Z","Jul 2, 2026",[127,128,129,130,131],"Nuxt auth centralises authentication so you can read the token, user, and login state through a single $auth object instead of wiring up axios calls yourself.","The nuxt-auth (auth-next) module covered here targets Nuxt 2; for a new Nuxt 3 or Nuxt 4 app, use current modules like sidebase nuxt-auth or nuxt-auth-utils.","Only auth-next v5 supports the refresh token strategy, so choose that version if you need token refresh.","A full flow covers setup, auth middleware (per route or global), login, logout, fetching the user, and refreshing the token.","For custom needs, you can define a custom refresh scheme and intercept all 401 responses in the axios plugin to trigger a token refresh.",[133,136,139,142],{"answer":134,"question":135},"Not for new projects. The nuxt-auth \u002F auth-next module covered in this guide was built for Nuxt 2. Nuxt 4 is now the current stable release and Nuxt 3 is in maintenance mode. For a new Nuxt 3 or Nuxt 4 app, the community recommends newer modules such as sidebase nuxt-auth or the Nuxt team's nuxt-auth-utils. The token refresh concepts here still apply across modules.","Is the nuxt-auth (auth-next) module still recommended for Nuxt 3?",{"answer":137,"question":138},"Refresh token authentication uses two tokens. A short-lived access token authorises API requests, and a longer-lived refresh token obtains a new access token when the old one expires. This keeps users signed in without asking them to log in again, while limiting how long any single access token stays valid.","What is refresh token authentication?",{"answer":140,"question":141},"Only auth-next v5 supports the refresh token strategy. The older v4 option does not include refresh support, which the Nuxt contributors confirmed. If you need token refresh with this module, use v5 and make sure the Vuex store is active.","Which nuxt-auth version supports the refresh token strategy?",{"answer":143,"question":144},"Enable the refresh scheme and add the refreshToken option to your strategy in the Nuxt config. Then call this.$auth.refreshTokens(), which reads the stored refresh token and sends it to your refresh endpoint. If your API needs extra parameters, such as a grant type, you can pass them as query parameters on the refresh endpoint URL, or write a custom refresh scheme.","How do I refresh tokens with nuxt-auth?","2026-07-06T12:08:44.909Z",false,"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Fnuxt-auth-refresh-token-authentication-in-your-nuxt-app",[149],{"id":150,"author":151,"short_description":152,"role":153,"avatar_urls":154,"cover_urls":162,"linkedin_link":181,"instagram_link":44,"x_link":44,"meta_tags":182,"last_published_at":186,"same_as":187},14,"Victor Motogna","\u003Cp>Victor Motogna is the Head of Web Development at Wolfpack Digital, leading the web development team and driving innovation in scalable, secure web applications. With a Bachelor's in Computer Science and a Master's in High Performance Computing & Big Data Analytics, he brings deep technical expertise and a forward-thinking approach to building enterprise-grade solutions.\u003C\u002Fp>\u003Cbr>\u003Cp>As both a technical leader and hands-on contributor, Victor works across the full technology stack including Ruby on Rails, Vue.js, Nuxt.js, JavaScript, and Python, with extensive experience in DevOps frameworks and cloud infrastructure (Azure, AWS, Kubernetes). His role extends beyond traditional web development—he plays a key part in architecting AI-powered features, training machine learning models, and ensuring AI integration delivers genuine business value rather than following trends.\u003C\u002Fp>\u003Cbr>\u003Cp>Victor's leadership philosophy centers on balancing technical excellence with practical delivery. He excels at translating complex technical concepts into clear business language, architecting solutions that strike the right balance between technical sophistication and MVP speed, and staying ahead of rapid technological change. His approach emphasizes building stable, secure end-to-end solutions while constantly seeking smarter, more efficient development processes.\u003C\u002Fp>\u003Cbr>\u003Cp>A frequent speaker at technology conferences across Europe, Victor shares insights on modern web development practices, AI integration strategies, cloud architecture, and building high-performing development teams. His writing draws on real-world experience delivering 250+ digital products and reflects his commitment to using technology to create meaningful solutions that improve people's lives.\u003C\u002Fp>\u003Cbr>\u003Cp>Through his blog contributions, Victor explores topics at the intersection of web development, AI, and entrepreneurship, focusing on practical implementation strategies, technology decision-making, and fostering knowledge exchange within development teams.\u003C\u002Fp>\u003Cbr>\u003Cp>\u003Cstrong>Areas of expertise:\u003C\u002Fstrong> Web application architecture, Ruby on Rails development, Vue.js\u002FNuxt.js, AI integration, machine learning model training, DevOps and cloud infrastructure, team leadership, full-stack development, technical strategy, scalable systems design.\u003C\u002Fp>","Head of Web Development",[155,157,160],{"style":101,"url":156},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Favatar\u002Fthumb\u002Fimage_processing20211021-4-tz7chx%20%281%29.webp",{"style":158,"url":159},"medium","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Favatar\u002Fmedium\u002Fimage_processing20211021-4-tz7chx%20%281%29.webp",{"style":104,"url":161},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Favatar\u002Foriginal\u002Fimage_processing20211021-4-tz7chx%20%281%29.webp",[163,165,167,169,171,173,175,177,179],{"style":83,"url":164},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Fcover_image\u002F640\u002FVictor.webp",{"style":86,"url":166},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Fcover_image\u002F768\u002FVictor.webp",{"style":89,"url":168},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Fcover_image\u002F1024\u002FVictor.webp",{"style":92,"url":170},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Fcover_image\u002F1366\u002FVictor.webp",{"style":95,"url":172},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Fcover_image\u002F1600\u002FVictor.webp",{"style":98,"url":174},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Fcover_image\u002F1920\u002FVictor.webp",{"style":101,"url":176},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Fcover_image\u002Fthumb\u002FVictor.webp",{"style":158,"url":178},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Fcover_image\u002Fmedium\u002FVictor.webp",{"style":104,"url":180},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F14\u002Fcover_image\u002Foriginal\u002FVictor.webp","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fvictor-motogna\u002F",{"title":183,"description":184,"keywords":44,"contact_form:title":110,"contact_form:cta":111,"og:site_name":72,"og:type":185,"og:locale":73,"twitter:card":113,"twitter:site":74,"twitter:creator":74},"Victor - Head of Web Development | Wolfpack Digital Blog","Web development leader specializing in Ruby on Rails, Vue.js, and AI integration. Victor shares insights on scalable architecture, cloud infrastructure, and modern web development.","website","2025-09-26T09:15:00.000Z",[181]]