Repository auth-module

Not redirecting after login when going directly on the route

mathieutu
16
mathieutu
commented 7 months ago

Version

v4.1.0

Reproduction link

https://nuxt-auth.herokuapp.com/secure

Steps to reproduce

Hi,
When accessing directly on a secured page, the redirect key is not set in the state, and there is not redirection after login.
This is visible in the demo: access directly this page without be logged, and you will not have the $auth.$state.redirect message: https://nuxt-auth.herokuapp.com/secure

What is expected ?

Screen Shot 2018-04-11 at 11.19.27.png

And redirection after login

What is actually happening?

Screen Shot 2018-04-11 at 11.19.36.png

And no redirection after login.

Additional comments?

Thanks!

bug
1
stevepop
5
stevepop
commented 6 months ago

Hi,

I am having the same issue myself on a project I am currently working on. When an un-authenticated user visits /member/profile, the user is redirected to the login page. After logging in, they are not redirected to the intended page but to the normal link redirect from login.

I see that this issue was raised since 22 days ago and not responded to. Is there a work-around I can implement before this issue is resolved?

Thanks!

0
Lahori-Jawan
0
Lahori-Jawan
commented 6 months ago

I raised this issue on nuxt community but no one responded. @pi0 would you shed some light on this issue?

0
Lahori-Jawan
0
Lahori-Jawan
commented 6 months ago

After failing to find any easy/reliable solution I came up with this one:
login.vue

methods: {
      login () {
    localStorage.setItem('redirect', this.$route.path)
    this.$auth.loginWith('google')
      }
}

and then in callback/redirect route
callback.vue

export default {
    mounted () {
        this.$router.push(localStorage.getItem('redirect'))
    }
}

Although everything works just fine but after redirecting to desired link it is redirected back to home page which i don't understand why.

0
stevepop
5
stevepop
commented 6 months ago

@Lahori-Jawan,The problem with relying on LocalStorage is that it is client side which can change at any point in time.
I am not so sure this is the best way to deal with this but if it works for you, it may be a temporary work-around

0
Lahori-Jawan
0
Lahori-Jawan
commented 6 months ago

yeah, for now I am just looking for a work around but the problem is that after redirecting to the page it redirects back to homepage, can you guess Why @stevepop ?

0
SnooHD
5
SnooHD
commented 6 months ago

@Lahori-Jawan I think this happens because the loggedIn watcher is still triggered, redirecting you to the login redirect option.

It is surely possible to prevent this through a custom middleware where you set store.auth.redirect
Because the watcher redirects you to this value.

But i think the solution using a cookie or the solution @belak came up with using a query would be better.

0
Lahori-Jawan
0
Lahori-Jawan
commented 6 months ago

@SnooHD Thank you for the input. Actually I am avoiding those solutions for now bec. they both seem pretty daunting for this simple scenario. Could you give me a bit more insight to your suggestion? do you mean like store.auth.redirect = false ?

0
SnooHD
5
SnooHD
commented 6 months ago

@Lahori-Jawan store.auth.redirect = '/path-you-want-to-redirect-to' so in your case localStorage.getItem('redirect').

Obviously because its a vuex store property, you will have to use a commit.

0
belak
0
belak
commented 6 months ago

It obviously needs to be cleaned up, but I think the query param is better because it allows you to handle multiple redirects… like if you open a browser that's been closed for a while and a number of tabs open on the same site - with the localStorage method, you can only track one of those (as it's stored in a single key). Once a user logs in to one tab, they lose the redirects on all the other pages, but with query params, they can still be redirected.

Unfortunately, while it's better for that situation, it's a bit less flexible. It would be nice to maintain state between redirects, but I feel like it would be a lot of complication for minimal benefit.

0
nitescent
0
nitescent
commented 5 months ago

Is someone working on a fix for this bug?

0
SnooHD
5
SnooHD
commented 5 months ago

@nitescent If you truly want to solve this right now, there are 2 ways to do it until a better solution is integrated.
Both can be found here: #165

0
zolotyx
0
zolotyx
commented 4 months ago

Please, take a look at my workaround

Create plugins/auth.js file
Add plugins: ['~/plugins/auth.js'], to auth section of the nuxt.config.js
here is a content of the auth.js file: https://gist.github.com/zolotyx/b4e7fda234b3572fb7adaf11391f8eef

0
nitescent
0
nitescent
commented 4 months ago

Thanks @zolotyx, I'm using your solution now

0
redijedi
0
redijedi
commented 3 months ago

@zolotyx The workaround continually results in Cannot read property 'options' of undefined. I've added it to the plugins section of auth. Is there something I'm missing?

0
joshink
0
joshink
commented 3 months ago

@redijedi not sure if you figured it out by now, but you need to add the plugin to the auth setting, not the global plugins:

auth: {
  ...
  plugins: ['~/plugins/auth.js']
}
0
redijedi
0
redijedi
commented 3 months ago

@joshink Thanks, but that still doesn't work. It is only in the auth block but I get

[1] Caught error: TypeError TypeError: Cannot read property 'options' of undefined
[1]     at Auth.redirect (src/plugins/auth.js:8:0)
[1]     at module.exports.__WEBPACK_IMPORTED_MODULE_0__middleware__.a.auth (.nuxt/auth/middleware.js:31:0)
[1]     at promisify (.nuxt/utils.js:203:0)
[1]     at middlewareSeries (.nuxt/utils.js:184:0)
[1]     at module.exports.__webpack_exports__.default (.nuxt/server.js:114:0)
[1]     at <anonymous>
[1]     at process._tickDomainCallback (internal/process/next_tick.js:228:7)
0
redijedi
0
redijedi
commented 3 months ago

@joshink Actually, it was my fault. I was rewriting the redirect function as an arrow function to make eslint happy. Not doing that got rid of the error, but the app still doesn't redirect to the path in the query string. Could be my fault…digging.

0
joshink
0
joshink
commented 3 months ago

@redijedi Yeah, I think all that code actually does is pass the redirect to the login page for you. It was not redirecting automatically for me either. You should be able to do something like this in your login page's methods.

async handleLogin () {
  await this.$auth.login( { data } )
  this.$router.go(decodeURIComponent(this.$route.query.redirect || "/"))
}

Hope that helps!

0
shawnlauzon
0
shawnlauzon
commented 4 days ago

The workaround provided by @zolotyx resolves the problem for me. As @SnooHD says, the problem is that when Vuex is used, the redirect is stored in Vuex but after the redirect, the store is lost and so it forgot where to redirect to.

The workarounds referenced in #165 may be "better" (I don't really know), but they seem to be more effort than the above workaround, and so I prefer the simpler workaround until something is integrated into the system itself.

0
SnooHD
5
SnooHD
commented 4 days ago

@shawnlauzon
My solution uses cookies, @belak uses a query and @zolotyx's is using the localStorage.
I would say it hardly matters.

It's just that the localStorage will be cleared when the session ends (when tab / browser closes).
The other solutions should work for a new session as well.

0
Informations
Bug ReportOpen
#c100 - Created 7 months ago