It's possible this could be a bug, but it feels more likely that I've done something wrong, but I haven't been able to figure out what it is.

My nuxt.config.js configuration for the auth module:

auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/users/sign_in',
            method: 'post'
          },
          logout: { url: '/users/sign_out' },
          user: { url: '/users/current', method: 'get' }
        }
      }
    }
  },
  router: {
    middleware: ['auth']
  },

My index.js store:

export const getters = {
  isAuthenticated(state) {
    return state.auth.loggedIn;
  },
  currentUser(state) {
    return state.auth.user;
  }
};

My login method on my Login.vue page:

login: function() {
      this.$auth
        .loginWith('local', {
          data: {
            user: {
              email: this.email,
              password: this.password
            }
          }
        })
        .catch(e => {
          this.error = e + '';
        });
    }

My issue is that everything seems to work. My api returns the token, it gets set, and I can see using the Vue dev tools that my Vuex store has the following value for auth:

{"user":{"id":1,"email":"[email protected]example.com"},"loggedIn":true,"strategy":"local"}

I have the following v-if on my Login.vue page:

<div v-if="isAuthenticated">
  <p class="content">Logged in as {{ currentUser.email }}.</p>
  <b-button type="is-danger" @click="logout">Log Out</b-button>
</div>
<div v-else>
# render login form here
</div>

And it works - after logging in, isAuthenticated returns true and I see the above content.

However, if I navigate to any other page in my application, including index (/), I get redirected back to the Login.vue page. For a split second I see the login form, then it's replaced with the Logged in as current_user content, with the log out button.

What's more weird is if I try to go to / while LOGGED OUT, I get sent to the login form, fill it out and hit login, and I get logged in and redirected back to /, and it DOES NOT try to redirect me back to Login.vue. The app seems to understand I'm logged in. BUT, if I hit the refresh button or manually navigate to any other page, I get redirected back to Login.vue despite my vuex store still showing loggedIn: true.

Edit: I've also noticed when loading Login.vue while logged in, I get:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

So it seems like when SSR happens it thinks the user is logged out, then when client side rendering happens, it realizes the user is logged in.

Version

v4.7.0

Reproduction link

https://codesandbox.io/embed/codesandbox-nuxt-tygsp

Steps to reproduce

• Set up a brand new universal Nuxt app
• Install the axios & auth modules
• Configure an external strategy inside nuxt.config.js
• Enable global auth middleware in nuxt.config.js with a valid client id
• Attempt login

What is expected ?

Auth prompt for the selected external strategy should open & accept a login. Local strategies work as expected.

What is actually happening?

OAuth flow does not start, throws an undefined TypeError

vendors.app.js:246 error TypeError: Cannot read property 'mounted' of undefined at Auth.mounted (app.js:406) at Auth.setStrategy (app.js:398) at Auth.loginWith (app.js:427) at VueComponent.handleLoginGoogle (login.js:53) at invokeWithErrorHandling (commons.app.js:13373) at HTMLButtonElement.invoker (commons.app.js:13698) at HTMLButtonElement.original._wrapper (commons.app.js:18421)

Additional comments?

I was extremely careful to follow the docs to the letter, so if I missed something I should have set, please let me know. Given that more people are not having issues, this could be a documentation gap or my inexperience with nuxt. Thanks!

Version

v4.7.0

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-m1so6

Steps to reproduce

1. Install and add the Auth module
2. Set the router middleware to auth
3. In a page component, set the auth property to guest
4. Click on "auth:guest" link

What is expected ?

To open the link if the user is not logged in and redirect to home if is logged in.

What is actually happening?

The link doesn't open.

Hi,

I'm trying to authenticate to an oAuth2 server that requires requests to the token endpoint to be authenticated. (default using HTTP basic auth header). Is there a way to modify the headers of the axios request performing the POST to the token endpoint, so I could add the client credentials?

Server reference:
https://www.ory.sh/docs/hydra/sdk/api#the-oauth-20-token-endpoint

Version

v4.7.0

Reproduction link

htttps://unvail.able

Steps to reproduce

I need localized redirects on login, so I have the following config:

In nuxt.config

        redirect: {
            …
            home: '/login-landing'
        }, 

in a plugin:

app.$auth.onRedirect((to, from) => {
        if (to === '/login-landing') {
            // return localized path
        }

        return to;
    });

This works great for normal logins, but is not triggered for an oAuth-Login via google.

Sorry I can not provide an example repo, but this needs a Google-oAuth setup to try it out.

What is expected ?

onRedirect should be triggered

What is actually happening?

onRedirect is not triggered

I'm a bit confused by the token received when using the nuxt-auth module, specifically with Auth0. For consistency, I'll reference the demo app available here.

When I log in with Auth0, I can see the token by typing $nuxt.$auth.getToken('auth0') from the browser. The return value is something like this 'Bearer 4A6xy9T-pUDzdjyYhntoRTrkqbceMpt3'. I noticed this isn't the normal format of a JWT token I'm used to.

If I used the demo app and login using a local strategy, I receive a token by typing $nuxt.$auth.getToken('local') and see a return like this: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFueXRoaW5nIiwicGljdHVyZSI6Imh0dHBzOi8vZ2l0aHViLmNvbS9udXh0LnBuZyIsIm5hbWUiOiJVc2VyIGFueXRoaW5nIiwic2NvcGUiOlsidGVzdCIsInVzZXIiXSwiaWF0IjoxNTYwNDc5NzQ4fQ.tcuOQL7h83j8NthYd2rKlXYC5n2L27JBqvq5VvVlgVg'

The token received from Auth0 doesn't even seem to be able to be decoded by JWT.io.

Does anyone know what type of token Auth0 is providing, and how I may be able to get the same format token as provided by the local strategy?

Thank you!

This is the main application layout. I am brand new to Vue/Nuxt, but I am really struggling on the easiest way to have this layout update "live" without refreshing the page. When the user logs in, the content in this component should update accordingly. I know nothing about vuex, which I suspect is going to be the answer, but I'm not sure that's going to trigger a "digest cycle" (a throwback from the old angular days).

The layout doesn't update until the page refreshes or you navigate to/from it.

<template>
  <v-app>
    <v-navigation-drawer
      v-model="drawer"
      fixed
      app
    >
      <v-list>
        <v-list-tile
          v-for="(item, i) in getMenu()"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title v-text="item.title" />
          </v-list-tile-content>
        </v-list-tile>
       <v-bottom-nav
      :value="true"
      v-if="$auth.loggedIn"
      absolute
      color="transparent"
    >
      <v-btn
        color="teal"
        flat
        value="recent"
      >
        <span>Log Out</span>
        <v-icon @click="$auth.logout('local')">power_settings_new</v-icon>
      </v-btn>

      </v-bottom-nav> </v-list>
    </v-navigation-drawer>
    <v-toolbar
      fixed
      app
      color="primary"
    >
     <v-btn icon @click="drawer = !drawer" >
         <v-icon v-if="!drawer">play_arrow</v-icon>
         <v-icon v-if="drawer">clear</v-icon>
     </v-btn>
      <v-toolbar-title><nuxt-link to="/">{{title}}</nuxt-link></v-toolbar-title>
      {{$auth.$state.loggedIn}}
      <v-spacer />
   </v-toolbar>
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
   <v-footer
      app
    >
      <span>&copy; 2019 geekevents.io</span>
    </v-footer>
  </v-app>
</template>

<script>

export default {

   data() {
    return {
      drawer: false,
      title: 'geekevents.io'
    }
  },

  methods: {
      getMenu() {
         let userItem = this.$auth.$state.loggedIn ?    {
              icon: 'person',
              title: this.$auth.user.nickname,
              to: `/g/${this.$auth.user.nickname}`
        } : {
            icon: 'power_settings_new',
            title: 'Log On',
            to: '/login'
        };
        const menu = [{
              icon: 'home',
              title: 'Home',
              to: '/'
            },
            userItem,
            {
              icon: '',
              title: 'Geekouts',
              to: '/geekouts'
            },
            {
              icon: '',
              title: 'Gatherings',
              to: '/gatherings'
            }
            ]

       return  menu
    }

  },

  }

</script>

I have a running system which needs a new UI and I decided to go with Nuxt. This system have Local and Facebook options to login. The backend of this system runs in PHP, so I use the Facebook's PHP SDK to do access control after Facebook confirms the user identity.

I was able to get the Local strategy working with auth-module, but couldn't get the Facebook provider to work. It redirects correctly to the callback and everything, but the access token is always empty on PHP. So, I figure that, maybe, it's because the Facebook provider is not a "pure" Facebook login flow, it's actually an OAuth based flow and I should use the OAuth PHP SDK on the backend, not the Facebook's one. Is that correct?

In this case, I don't want to use OAuht, and I'd like simply to get the new UI working with the same API I already have in place on the backend. So, I figure that I could write a custom provider/scheme where I could use the Facebook native JavaScript login stuff. But then, there's no docs on how to write custom providers/schemes.

Is there a place where I can get this info? Thanks in advance…

Version

v4.6.6

Steps to reproduce

Set "cookies: false" in nuxt.config.js and within the pages with auth middleware, reload the page and immediately take you to login

What is expected ?

that does not do that redirection

What is actually happening?

That the middleware is not working correctly, because the store still has the same data as before doing the redirection

Nuxt auth module always call user endpoint url even for non-authenticated page.
This request makes error because it has no token in the request header.

How to make call user endpoint only happen once only while user login?

I've looked through the source code but can't seem to find where it uses the refresh token?

Hi everyone,
i have a behavioral problem with nuxt auth-module, so i wanted to ask for your help before reporting it as a bug.

This is my current auth module configuration, and the app runs in universal mode using nuxt start after running nuxt build.

The problem is that when a user logs in and then reload the page, the nuxt server redirect to the login page. When i try to watch for the cookie and the localstorage i notice the user internally logged out, but not call to logout was made.

This problem only occurs when i deploy the application, when i run in dev mode it doesn't happen.

Does anyone have any clue about was is going on and/or how to solve this?

Thanks

Version

v4.6.6

Reproduction link

N/A

Steps to reproduce

The issue isn't the code per-se. It's a config change on Auth0's end.

• Create a new tenant in Auth0. If you have an old tenant (2018 and earlier) go into Tenant Settings > Advanced > Log In Session Management and enable the setting Enable Seamless SSO
• Add the auth module as per the docs in a new Nuxt project
• Configure it with your tenant
• Add ability to login with this.$auth.loginWith('auth0')
• Use the this.$auth.logout method
• Login again.

What is expected ?

To see Auth0's universal login screen

What is actually happening?

You don't see the login screen. You will immediately log back in with your previous account

Additional comments?

The issue isn't the library per se. It's Auth0, who have changed the default configuration. I was able to confirm this problem by enabling Enable Seamless SSO in an old project I created in 2017. Now that I've enabled it I'm not asked which of the three account types (GitHub, Twitter or Google) I'd like to login with. It auto-logins https://www.wolftracker.nz/

A simple workaround is to hit the https://statusvue.au.auth0.com/v2/logout endpoint before calling this.$auth.logout(). This will force the logout on Auth0's end. I learned about this solution here.

Alternatively you can pass a param to the authorize link prompt=login to ask for credentials each time.

Trouble is this could be viewed as a positive by some people. For me, it annoyed the heck out of me (what if I wanted to login with a different account?).

We could look at a config change but I feel the best solution would be to add a warning in the documentation, if you use Auth0. I'm happy to write it up and submit a PR if you like.

What problem does this feature solve?

The nuxt-auth demo Auth0 tenant seems to have some configuration modifications that requires a prompt each time a known user logs in. With the default configuration, a user will struggle to change accounts as after logging in there seems to be a silent login process where auth0 automatically redirects to the callback route rather than confirming the account for which the user wishes to log in with.

I've been really struggling to find a solution. I'd be more than happy to add this to the docs as a pull request, I was just hoping someone could help me understand what changes were made to the tenant.

What does the proposed changes look like?

I'll make a PR documenting the config process of a new Auth0 tenant.

hi i have a problem i set my token to 1 minute when 401 happens i am still loggedin but auth failes on server and the user is still loggedin on the client and i get this page

i am not sure this happens because i use try catch arround the axios request?

auth config

 auth: {
    resetOnError: true,

    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'auth/login',
            method: 'post',
            propertyName: 'data.access_token'
          },
          logout: { url: '/logout', method: 'post' },
          user: { url: '/auth/check', propertyName: 'data.user' }
        }
      }
    }
  },

axios config

  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: process.env.BASE_URL
  },

Is it possible to have Firebase like authentication where auth state is persisted so user won't have to log in when they haven't logged out earlier?

Here is more information about authentication state presistence in Firebase https://firebase.google.com/docs/auth/web/auth-state-persistence

After logging in using the Google / Facebook provider, the user gets redirected to /login and back to the homepage. I use the /login redirect to post data to another API, yet the user and token are only set after the redirect.

Is there a way to wait for the auth module to set the user and then redirect?

Hi team !
I thinks that the file have an issue (typo)
You call the function instead of the value returned

https://github.com/nuxt-community/auth-module/blob/4d3feff1cd859dd6894db0bd224ae0a98f3d4cc5/lib/core/storage.js#L230