I'm using a local strategy. In the example, I can see
propertyName: 'token.accessToken' in the auth definition in nuxt.config.js.
But in the express middleware, I can see
res.json({
token: {
accessToken
}
})
So it should be
propertyName: 'token'
This is how it works for me locally
I'm missing something?

Version

v4.8.4

Reproduction link

http://www.nourl.com

Steps to reproduce

I have 2 auth strategies set up in nuxt.config.js.

Renaming 'local' to 'local2' or 'social_login' refuses to keep the user logged-in on refreshing the page.

This is what I do before triggering the login.
this.$auth.setStrategy('social_login');

But after I am logged in, if I refresh the page, I do not stay logged in. Looking at the local storage and cookies, it seems that the auth.strategy flips back to local. Looks like a bug to me.

Here's my code:

nuxt.config.js:

strategies: {
      // For login with email and password
      local: {
        endpoints: {
          login: {
            url: `${backendApiUrl}/api/v1/auth/login`,
            method: "post",
            propertyName: 'access_token', // the name of the token object that comes back from this API request
          },
          user: {
            url: `${backendApiUrl}/api/v1/auth/loggedinUser`,
            method: 'get',
            propertyName: 'user', // the name of the user object that comes back from this API request
          },
          logout: {
            url: `${backendApiUrl}/api/v1/auth/logout`,
            method: 'post',
          },
        },
      },

      // For Social Auth using Laravel Socialite
      social_login: {
        _scheme: "local",
        endpoints: {
          login: {
            url: "auth/login",
            method: "post",
            propertyName: 'token', // the name of the token object that comes back from this API request
          },
          user: {
            url: "auth/me",
            method: "get",
            propertyName: 'data', // the name of the user object that comes back from this API request
          },
          logout: {
            url: "auth/logout",
            method: "get"
          }
        }
      },

My social login code looks like this:

socialLogin.vue:

<template>
    <div class="social-login">
        <button @click="socialLogin('google')" class="social-login-btn google">
            <i class="fab fa-google"></i>
        </button>
        <button @click="socialLogin('github')" class="social-login-btn github">
            <i class="fab fa-github"></i>
        </button>
        <button @click="socialLogin('facebook')" class="social-login-btn facebook">
            <i class="fab fa-facebook"></i>
        </button>
        <button @click="socialLogin('twitter')" class="social-login-btn twitter">
            <i class="fab fa-twitter"></i>
        </button>
        <button @click="socialLogin('linkedin')" class="social-login-btn linkedin">
            <i class="fab fa-linkedin"></i>
        </button>
    </div>
</template>

<script>
export default {
    methods: {
        socialLogin(service) {
            this.$auth.setStrategy('social_login');
            window.location.href = process.env.backendApiUrl + `/api/v1/auth/login/${service}`;
        }
    }
}
</script>

social-callback.vue:

<template>
    <div class="tw-container">
        <div class="loader"></div>
        <p>Please wait while we're logging you in...</p>
    </div>
</template>

<script>
export default {
    middleware: ["guest", "hideTestRoutes"],
    data() {
        return {
            token: this.$route.query.token ? this.$route.query.token : null
        }
    },
    mounted() {
        this.$auth.setToken('social_login', 'Bearer ' + this.token);
        this.$auth.setStrategy('social_login');

        this.$auth.fetchUser().then( () => {
            return this.$router.push('/');
        }).catch( (e) => {
            this.$auth.logout();
            return this.$router.push(`/auth/${this.$route.query.origin ? this.$route.query.origin : 'register'}?error=1`);
        });
    }
}
</script>

What is expected ?

User should STAY logged-in on refresh

What is actually happening?

The user does not stay logged-in on refresh

Hello,

I'm using the auth-module in my nuxt project, and I noticed that the call to fetch the user information is happening client-side and not server-side, which is a huge issue because when you load a page, the middlewares are evaluated server-side.

For example, I have an "admin" middleware that is the following:

export default function({ $auth, error }) {
  if (!($auth.loggedIn && $auth.user.roles.includes('ROLE_ADMIN'))) {
    return error({ statusCode: 401 })
  }
}

And obviously, because of that, this middleware do not work server-side, since $auth.user is null.

When I try to access the /admin page directly, I get that. You can see the XHR request in the inspector at the bottom.

If I access the home, and then click a link to the admin, it's working fine.

Is this intended? Is it a bug?

Here's my config:

  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/login', method: 'post', propertyName: 'token' },
          logout: false,
          user: { url: '/user/me/basic', method: 'get', propertyName: false }
        },
        tokenRequired: true,
        tokenType: 'Bearer'
      }
    },
    redirect: {
      login: '/?login=1',
      logout: '/',
      user: '/profile',
      callback: '/'
    },
    cookie: {
      options: {
        maxAge: 60 * 60 * 24 * 365 // 1 year
      }
    }
  },

delete

Version

v4.8.4

Reproduction link

https://jsfiddle.net/waitaamon/whexdjsn/2/

Steps to reproduce

try {
response = await this.$auth.loginWith('local',{data: this.form})
console.log(response)
} catch (e) {
this.$router.push({name: 'profile-auth-signin'})
console.log(e.response.data)
}

What is expected ?

i expect to stay on same page to display errors

What is actually happening?

its redirecting to index page before and later console errors

What problem does this feature solve?

It is difficult to use CSFR tokens on SPA sites like Nuxt.js, and many sites do not use CSRF tokens.

Therefore, add a default value for the cookie samesite option to prevent CSRF.

The default value is lax. Chrome tries to make lax the default value for security.
https://www.chromestatus.com/feature/5088147346030592

What does the proposed changes look like?

Set the default value of the cookie samesite option to lax.

The example app has the following code in login.vue:

<b-alert show v-if="$auth.$state.redirect">
    You have to login before accessing to <strong>{{ $auth.$state.redirect }}</strong>
</b-alert>

It didn't work for me, the $state doesn't have this parameter. The code that does the trick for me is $auth.$storage.getUniversal('redirect'). Does it mean the code in the example needs to be updated, or is it something wrong in my setup?

What problem does this feature solve?

Users might not use axios - particularly with the new Nuxt polyfill for fetch.

It would be good to support @nuxt/http or allow users to define their own handler method for network requests.

What do the proposed changes look like?

Load axios conditionally, allow a handler method that is passed in by users which is passed or assigned the Nuxt context.

auth: {
  networkHandler: (context, options) => context.$http[options.method](options),
},

What problem does this feature solve?

If you want to redirect user to the same page after logging in with a provider (i.e. Google) you need to include the url of the page where the login has been initialized. The state property serves this purpose.

What does the proposed changes look like?

After the credentials input at the Auth provider page you get redirected to redirect_uri which is used for authentication and could parse the state contents and redirect user back where he came from before attempting to log in.

Details are described also here:

https://auth0.com/docs/protocols/oauth2/redirect-users

It is not necessary to ditch the CSRF check in the process, both of these could be in the state.

We can add a param which could look like this:

.loginWith('google', { state: { redirectUrl: '/foo/bar/4' }

That will be transformed to:

state: 'UNIQUE_AND_NON_GUESSABLE': { redirectUrl: '/foo/bar/4' }

What problem does this feature solve?

At point of writing, using nuxt-auth with the documented options looks pretty great, but there's no option to use providers or schemes other than the ones supplied by the module. It seems to have been briefly brought up in #93

Specifically for my use-case, I'd like to be able to use Firebase as an authentication backend, mostly because the users of the app I'm building already have data from different applications stored there..

What does the proposed changes look like?

By allowing people to register custom schemes and providers in their nuxt.config.js there would be more flexibility in what providers they can use.

I have this..

BACKEND => app.test (laravel, just API for all .app.test application and token generator for all of my apps)
BACKEND => shop.test (codeigniter, just API for shop.test, not generating token)
FRONTEND => account.app.test:3000 (like account.google.com)
FRONTEND => shop.test:3001 (like youtube.com)

We all know that YouTube and Google have different domains, but it can do a single sign on, for example we have logged in on Google, we refresh YouTube, then YouTube has automatically logged in with the current Google account. I want to implement this with nuxtjs especially auth-module, is there a solution? Thanks before..

I have a simple Koa server setup which when the user logs in sends a session cookie as a response and that cookie is to be then sent along with further requests to indicate user authentication. But for some reason, Nuxt Auth does not send it back with further requests.

Here is my config:

strategies: {
  local: {
    endpoints: {
      login: {
        url: '/auth/login',
        method: 'post',
      },
      logout: {
        url: '/auth/logout',
        method: 'post',
      },
      user: {
        url: '/user',
        method: 'get',
      },
    },
    tokenRequired: false,
    tokenType: false,
  },
},

When I use the loginWith method, the first(login) request is completed successfully but the second(user) is not because Nuxt Auth does not send the cookie and the server responds with a 401. Can anyone help me with this issue?

Hi,

I've installed @nuxtjs/auth on my project.

I get Property '$auth' does not exist on type 'AuthLoginPage' class.
I've already added the package in tsconfig.json types array.

Have you got an idea?

How do I access $auth inside of a vuex action

For example: this.$auth.loginWith('local')

Thanks

In the example demo app, login logic is in /api using serverMiddleware: ['../api/auth']. Would it be possible to use local strategy without using next serverMiddleware and calling API function directly on Google or Azure serverless function? If possible example would be very much appreciated.

Regards,

Version

v4.8.4

Reproduction link

https://github.com/nuxt-community/auth-module/blob/dev/lib/schemes/oauth2.js

Steps to reproduce

1. Use Discord's Authorization Code Grant flow.
2. Use auth-module and specify everything needed to work.
3. client_secret missing in "Authorization Code Grant" of _handleCallback function.
4. Receive a 401 "invalidclient" message due to the request not passing clientsecret

What is expected ?

Receive a ?code=&state= to proceed with getting accesstoken as well as refreshtoken

What is actually happening?

401 invalid_client

Additional comments?

Simply add this line:

clientsecret: this.options.clientsecret,

into line 157 ~ 163 and it starts working

In addition to the user being fetched from the API after logging in, I'd like to also fetch additional data from my api. My app uses projects. I'd like to fetch all the projects that a user has access to. From what I can tell, I have 3 options:

1. Modify my api and attach the projects (and any other data) to the user fetch that is automatically loaded from the auth module.
2. Use the nuxtServerInit action in the store to fetch additional data.
3. Use an auth plugin to watch the loggedIn state and fetch additional data upon change.

Here are the issues I see with the above options

1. The cookie/localStorage user item could potentially get pretty large if I have to attach lots of additional data to the auth user call. I'll have to modify my /api/me response to include additional data every time I need something different from the frontend.
2. Putting additional api fetches in nuxtServerInit works to have the data available upon page load, but it doesn't load the needed data automatically after a user login.
3. Using an auth plugin to watch the loggedIn state allows me to fetch additional data after user login, but it doesn't fetch the data on page load.

Does anyone have any advice or suggestions/best practices for loading additional data for a logged in user? Should I do a combination of options 1 and 2 or is there some better way of accomplishing this?

It seems it is the case: https://github.com/nuxt-community/auth-module/search?q=refresh&unscoped_q=refresh