Auth-module: Redirect not working after login or logout

[Geminii]

Version
v4.5.1

Reproduction link
https://github.com/nuxt-community/auth-module

Configuration

auth: {
    // Options
    strategies: {
      local: {
        endpoints: {
          login: { url: process.env.BASE_URL + '/auth', method: 'post', propertyName: 'token' },
          logout: false,
          user: { url: process.env.BASE_URL + '/users/auth', method: 'get', propertyName: false }
        }
      }
    },
    redirect: {
      login: '/signin',
      logout: '/signin',
      home: '/home'
    },
    watchLoggedIn: true,
    rewriteRedirects: false,
    resetOnError: true
  }

Action to login :

this.$auth.loginWith('local', {
            data: {
              username: this.username,
              password: this.password
            }
          });

Action to logout :
await this.$auth.logout();

Steps to reproduce
I use local strategy with a token. After the token expires if i reload the page, the user is logged out because i have resetOnError=True. I'm redirect to my signin page. Then i try to reconnect, i get new token and when i check into VueX, i got this result :

auth: {
busy:false,
loggedIn:true,
strategy:"local",
user: { ... }
 }

But i'm not redirect to home page ... If i refresh, i'm connected into the home page.

Where i'm doing wrong ?
Thanks for your answers.

Regards,

[cmty[bot]]

This issue as been imported as question since it does not respect auth-module issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/auth-module/issues/c155.

[redijedi]

@Geminii I'm running into the same issue. Did you ever find the cause?

[NoahCardoza]

Me too, I have spent so much time with this I could have implemented my own auth system by now... I was hoping this would be more intuitive.

[NoahCardoza]

I came up with this which seems to work as I would have expected the redirects to work out of the box.

export default function ({ app }) {
  const oldLogout = app.$auth.logout.bind(app.$auth)
  const oldLogin = app.$auth.login.bind(app.$auth)

  app.$auth.logout = (...args) => {
    const _ = oldLogout(...args)
    _.then(() => app.$auth.redirect('logout'))
    return _
  }

  app.$auth.login = (...args) => {
    // sometimes doesn't work when the user tries to get to the admin page
    // before being logged in.

    const _ = oldLogin(...args)
    _.then(() => {
      app.$auth.redirect('home')
    })
    return _
  }
}

[sayx]

I came up with this which seems to work as I would have expected the redirects to work out of the box.

export default function ({ app }) {
  const oldLogout = app.$auth.logout.bind(app.$auth)
  const oldLogin = app.$auth.login.bind(app.$auth)

  app.$auth.logout = (...args) => {
    const _ = oldLogout(...args)
    _.then(() => app.$auth.redirect('logout'))
    return _
  }

  app.$auth.login = (...args) => {
    // sometimes doesn't work when the user tries to get to the admin page
    // before being logged in.

    const _ = oldLogin(...args)
    _.then(() => {
      app.$auth.redirect('home')
    })
    return _
  }
}

@NoahCardoza Where did you make these changes in the configuration?

[ConsoleTVs]

This lirbary seems dead. it's faster to create a few methods and states on vuex and manage the stuff alone...

[NoahCardoza]

@sayx I added this as an auth-module plugin.

nuxt.config.js

...
  auth: {
    plugins: ['~/plugins/auth.js'],
    strategies: {
      local: {
        endpoints: {
          login: { url: '/api/login', method: 'post' },
          logout: { url: '/api/logout', method: 'get' },
          user: { url: '/api/user', method: 'get', propertyName: 'username' }
        },
        tokenRequired: false,
        tokenType: false,
      }
    },
    redirect: {
      login: '/login',
      logout: '/login',
      home: '/admin',
      user: '/admin',
    },
  }
...

~/plugins/auth.js being what I shared earlier.

@ConsoleTVs I feel like the library is useful, it just didn't seem to function the way I thought it would.

[dzsessona]

I am having the same problem,

  auth: {
    rewriteRedirects: true,
    strategies: {
      local: {
        endpoints: {
          login: { url: 'user/login', method: 'post', propertyName: 'data.token' },
          user: { url: 'user/me', method: 'get', propertyName: 'data' },
          logout: false
        }
      },
      facebook: {
        client_id: process.env.FB_APP_ID,
        userinfo_endpoint: 'https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email',
        scope: ['public_profile', 'email'],
        redirect_uri: process.env.FB_REDIRECT_URI
      },
      google: {
        client_id: process.env.GOOGLE_APP_ID,
        scope: ['profile', 'email'],
        redirect_uri: process.env.GOOGLE_REDIRECT_URI
      },
    },
    redirect: {
      login: '/login',
      logout: '/',
      home: '/privacy',
    }
  },

A guarded route profile, when trying to access it withought being logged in it redirects to the login page, after login (on any strategy... local or oauth) it always redirects to /privacy instead of the original guarded route as per documentation.

Please note that even by default rewriteRedirects should be true i am making sure of it in the config options.

[sfgn]

I can't actually get the auth module to redirect after login. It just never emits the routeChange event after I log in it seems. I can get it to redirect on logout, or from an authed page when not logged in.

auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/login',
            method: 'get',
            propertyName: 'token'
          },
          logout: {
            url: '/logout',
            method: 'delete'
          },
          user: {
            url: '/me',
            method: 'get',
            propertyName: 'data'
          }
        }
      }
    },
    redirect: {
      login: '/auth/login',
      logout: '/',
      home: '/',
      callback: '/'
    },
    watchLoggedIn: true,
    rewriteRedirects: true
  },

I'm still not sure what callback is for in redirects, but I've changed it to every possible value I can think of, as well as omitting it, with no difference.

I've tried running as SSR and SPA, with no difference as well.

[shawnlauzon]

Duplicate of #134. See workaround in that thread which resolved the problem for me.

[AllanPinheiroDeLima]

I actually found that when you set the property user on endpoints to false, it starts working as expected.

The thing is that is seems that the nuxt auth plugin waits this property to be defined to redirect to homepage. There is no need to make workarounds, but a PR may be welcome.

Here is my code:

auth: {
strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/login', method: 'post', propertyName: 'token' },
          user: { url: '/auth/user', method: 'get', propertyName: false },
          logout: { url: '/auth/logout', method: 'post' }
        },
        // tokenRequired: true,
        // tokenType: 'Bearer'
      }
    },
    redirect: {
      login: '/public/login',
      home: '/',
      logout: '/public/login'
    }
  }

[pirmax]

I've the same problem.

I'm using auth-module and when submitting the login form, I am redirected to the same login page, not to the requested page via a $router.push()...

Someone has an idea please?

async submitLogin() {
    try {
      // @ts-ignore
      await this.$auth.loginWith('local', {
        data: {
          email: this.email,
          password: this.password,
        }
      })

      console.log('on push ici');
    } catch (e) {
      this.error = e.response.data.message
    }
  }

[brianshepanek]

I think the issue is related to the default redirects.

If the redirects for 'logout' and 'home' are the same (as is the default), the internal redirect function gets confused because after a successful login, it always redirects to 'home' first and then checks for a stored redirect path if 'rewriteRedirects' is set to true.

However, if 'logout' and 'home' are the same path, the name of the path is set to 'logout' not 'home' so the actual redirect you want never occurs.

Changing the redirect for 'logout' seems to fix this issue.

{
  auth: {
    redirect: {
      logout: '/logout',
      home: '/'
    }
  }
}

Note that this needs to be a distinct path, the same path with query parameters, even with 'fullPathRedirect' set to true does not appear to fix this.

[blackinitial]

@AllanPinheiroDeLima thanks for the solution, my auth now work succesfully.

[samcyn]

I got the same issue but got it fixed by put a forward slash in front of my urls
redirect: { login: '/public/login/', home: '/', logout: '/public/login/' } instead of redirect: { login: '/public/login', home: '/', logout: '/public/login' }
N.B: Notice the forward slash.

[ifty-rahman]

Using the promise handler worked for me.

let data = {
  username: this.username,
  password: this.password
}

this.$auth.login({data: data})
    .then(() => {
        this.$router.push("/dashboard")
    })
    .catch((error)=> {
        console.log(error)
    })

[shouvikfullstack]

Thank you @NoahCardoza, your solution worked like champ! :)

[caroait]

I was fighting with this error too and I solve it adding this line before redirect to the login

$auth.$storage.setUniversal('redirect', path)

[donmb1]

I found this very hard to understand and its still not working as expected.
Tried all the suggested solutions above. I will probably start building my own auth using a bit of vuex :/

[samcyn]

@donmb1 that's what I had to do then but with the recent updates and fixes in the latest version. I think you can find your way around this.
Last Year I fixed this issue using the solution quoted below.. but due to some other requirements for my auth system I had to build an Auth system customized for my application. If you've the time I'll suggest you take a break and get back on it later. Use the latest version as well. You never know until you give it all. Stay safe.

I got the same issue but got it fixed by put a forward slash in front of my urls
redirect: { login: '/public/login/', home: '/', logout: '/public/login/' } instead of redirect: { login: '/public/login', home: '/', logout: '/public/login' }
N.B: Notice the forward slash.

[westofer]

@donmb1

I came up with this which seems to work as I would have expected the redirects to work out of the box.

export default function ({ app }) {
  const oldLogout = app.$auth.logout.bind(app.$auth)
  const oldLogin = app.$auth.login.bind(app.$auth)

  app.$auth.logout = (...args) => {
    const _ = oldLogout(...args)
    _.then(() => app.$auth.redirect('logout'))
    return _
  }

  app.$auth.login = (...args) => {
    // sometimes doesn't work when the user tries to get to the admin page
    // before being logged in.

    const _ = oldLogin(...args)
    _.then(() => {
      app.$auth.redirect('home')
    })
    return _
  }
}

Worked for me

see https://github.com/nuxt-community/auth-module/issues/205#issuecomment-424385896

[westofer]

YES Finally
just remove auth: false from your login.vue

   export default {                                                                                                   
     components: {},                                                                                                  
      data() {                                                                                                         
        return {                                                                                                       
          login: {                                                                                                     
            username: '',                                                                                              
            password: '',                                                                                              
          },                                                                                                           
        }                                                                                                              
      },                                                                                                               
      // auth: false, <========================                                                                                                  
      methods: {                                                                                                       
        async userLogin() {                                            
...
...
...

[AllanPinheiroDeLima]

They seem to be moving to nuxt 3.0 though. I think maybe we should abandon this implementation next few months,
Link to the new docs: https://dev.auth.nuxtjs.org/guide

[donmb1]

I ended up building my own auth. As simple as fetching jwt token, writing to a localStorage and making a top-level request which decides if I am logged in or not.

[ConsoleTVs]

If you're not using http only cookies for auth on the web, you're vulnerable to xss. Does not matter if u save the token in localstorage, memory or nom-http only cookies.

The only way is to have a server http only cookie with the session information. This requires the api and app to be in the same tld, but it's mostly the case anyway.

[kamerat]

I had the same issues and fixed it the following way:

May people suggested setting propertyName: false as @AllanPinheiroDeLima suggested:

endpoints: {
    login: { url: '/api/login', method: 'post' },
    logout: { url: '/api/logout', method: 'post' },
    user: { url: '/api/me', method: 'get', propertyName: false },
},

However, seems this did nothing for me, the user was still undefined in vuex (remember to activate vuex by adding index.js in stores folder)

what worked for me was to use the user object and set property to false. This is probably the new way to do the suggestion @AllanPinheiroDeLima suggested.

local: {
    endpoints: {
        login: { url: '/api/login', method: 'post' },
        logout: { url: '/api/logout', method: 'post' },
        user: { url: '/api/me', method: 'get' },
    },
    user: {
        property: false, // <---
    },
    token: {
        property: 'access_token',
        required: true,
        type: 'Bearer',
    },
},