Redirect back to requested page after authentication

[andychukse]

Describe the feature

Redirect user back to requested page after authentication
Add redirect query parameter to middleware navigateTo when a guest visits authenticated page.
This will help users redirect back to previous page after sign in.

// nuxt.config.ts

provider: {
  type: 'local',
  refresh: { 
        isEnabled: true, 
        endpoint: { path: '/refresh', method: 'POST' }, 
        refreshOnlyToken: true
   },
  pages: {
    login: '/login',
  },
},
 sessionRefresh: {
   enablePeriodically: 90000,
   enableOnWindowFocus: true,
 },
globalAppMiddleware: {
   isEnabled: true,
   addDefaultCallbackUrl: '/account'
},

// login.vue

definePageMeta({
   auth: {
     unauthenticatedOnly: true,
   },
})

Currently when guest tries to access a protected page they are redirected to /login page and after login they are redirect to default callbackUrl unless they specify callbackUrl in the signIn function.

This feature will help automatically redirect a user back to the page they requested after login. For example, if they requested to access '/profile' and they are redirected to login page, after successful login, they will be redirected back to '/profile'

How would you implement this?

Current code
Current implementation redirects to login page

nuxt-auth/src/runtime/middleware/auth.ts

Lines 100 to 103 in de1dca6

	} else {
	return navigateTo(authConfig.provider.pages.login)
	}
	})

Modified code
Proposed implementation gets the current url page and append as redirect query to the login page

return navigateTo({
      path: authConfig.provider.pages.login,
      query: {
        redirect: to.fullPath,
      },
    })
  }

https://github.com/andychukse/nuxt-auth/blob/f3ccf913a9121ac874b30c8b4a9a6e534a036d36/src/runtime/middleware/auth.ts#L108C5-L113C7

Current signIn function or local and refresh providers checks if callbackUrl is set, if not get the default callbackUrl

nuxt-auth/src/runtime/composables/local/useAuth.ts

Lines 41 to 47 in de1dca6

	if (typeof callbackUrl === 'undefined') {
	callbackUrl = await determineCallbackUrl(runtimeConfig.public.auth, () => getRequestURLWN(nuxt))
	}
	if (redirect) {
	return navigateTo(callbackUrl)
	}
	}

To handle the redirect on refresh Provider and local provider.
Check for the presence of redirect query parameter on the url and navigate to that if no callbackUrl is set. If no redirect query parameter is detected, then fallback to the default callbackUrl.

implementation in local and refresh provider

if (typeof callbackUrl === 'undefined') {
    if (useRoute()?.query?.redirect){
      callbackUrl = useRoute().query.redirect?.toString()
    } else {
      callbackUrl = await determineCallbackUrl(runtimeConfig.public.auth, () => getRequestURLWN(nuxt))
    }
  }
  if (redirect) {
    return navigateTo(callbackUrl)
  }
}

https://github.com/andychukse/nuxt-auth/blob/f3ccf913a9121ac874b30c8b4a9a6e534a036d36/src/runtime/composables/local/useAuth.ts#L62C3-L69C4

Additional information

• Would you be willing to help implement this feature?

Provider

• AuthJS
• Local
• Refresh
• New Provider