search

sidebase / nuxt-auth

Authentication built for Nuxt 3! Easily add authentication via OAuth providers, credentials or Email Magic URLs!
https://auth.sidebase.io
MIT License
1.31k stars 164 forks source link

Redirect back to requested page after authentication #861

Closed andychukse closed 1 month ago

andychukse commented 3 months ago

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

https://github.com/sidebase/nuxt-auth/blob/de1dca620a88b1cec2b408bbe27b67aacd72c355/src/runtime/middleware/auth.ts#L100-L103

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

https://github.com/sidebase/nuxt-auth/blob/de1dca620a88b1cec2b408bbe27b67aacd72c355/src/runtime/composables/local/useAuth.ts#L41-L47

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

Provider