What problem does this feature solve?

I use nuxt-apollo to prefetch data in component. I need to pass auth information in my query's header, unfortunately the auth-module w'll set $auth and store relative value after query fetch value.

What does the proposed changes look like?

When auth-module is use with nuxt-apollo and query in prefetch mode the auth-module update $auth after query.
With auth-module waiting for server info(bearer still valid) before letting nuxt-apollo doing his query we will be able to pass auth info in prefetch query.

As I see, auth-module stores user data and doesn't fetch user data when page refreshed.

How can I be sure that fetchUser is executed when page is refreshed

Hello,
I just implemented auth-module with below configurations
// nuxt.config.js

router: {
    middleware: ['auth']
  },
auth: {
    localStorage: false,
    cookie: {
      prefix: 'auth.',
      options: {
        path: '/',
        expires: 30
      }
    },
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/',
      home: '/'
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'login',
            method: 'POST',
            propertyName: 'token'
          },
          user: {
            url: 'me',
            method: 'GET'
          },
          logout: false
        }
      }
    }
  }

// login.vue

async login() {
      try {
        await this.$auth.loginWith('local', {
          data: {
            username: this.username,
            password: this.password
          }
        })

        this.$router.push({ path: '/' })
      } catch (e) {
        this.error = e.response.message
      }
    }

login working fine also it is setting cookie.

But when I try to go to
http://localhost:3000/secure

Headers:

Request URL: http://localhost:3000/secure
Request Method: GET
Status Code: 302 Found
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade

it is still redirecting login page.
I already follow like 5 times https://auth.nuxtjs.org/

But I could not fix. What is wrong with configuration ?
Can you help me ?

What problem does this feature solve?

I implemented sessions in my nuxt app using express-session adapted from the example in nuxt docs

This let me increase security by allowing to store the acess and refresh tokens in the session as express-session stores session data server side and only send a cookie with a session id.

To make it work with auth-module, I had to write a custom scheme so, on page reload, the mounted hook fetches the token from the session and set the axios header correctly.

With this approach I have the localStorage and cookie stores disabled so the client-side application only stores the access token in memory.

If we had the ability to set custom stores I could add a simple store to read and write the token from the session using an async call and would not need to write a custom scheme.

If the idea is accepted I can try to write a PR adding this functionality.

What does the proposed changes look like?

In the nuxt.config.js add an option to add custom stores:

module.exports = {
  // other config
  auth: {
    // other oprtions...
    stores: [new MyCustomStore()]
  }
};

On lib/core/storage.js we would:

1. Extract state, localStorage and Cookie to dedicated classes with this API:
   • get(key, isJson)
   • set(key, value, options)
2. Add a property initiating the default (state, localStorage and cookies) and custom stores.
3. change the setUniversal and getUniversal to iterate through the default and custom stores.

An added benefit of this approach is if a storage method becomes commonly used it can be added to the core with reduced effort.

EDIT: fix nuxt docs link

Hello,
I just implemented auth-module with below configurations
// nuxt.config.js

router: {
middleware: ['auth']
},
auth: {
localStorage: false,
cookie: {
prefix: 'auth.',
options: {
path: '/',
expires: 30
}
},
redirect: {
login: '/login',
logout: '/',
callback: '/',
home: '/'
},
strategies: {
local: {
endpoints: {
login: {
url: 'login',
method: 'POST',
propertyName: 'token'
},
user: {
url: 'me',
method: 'GET'
},
logout: false
}
}
}
}

// login.vue

async login() {
try {
await this.$auth.loginWith('local', {
data: {
username: this.username,
password: this.password
}
})

    this.$router.push({ path: '/' })
  } catch (e) {
    this.error = e.response.message
  }
}

login working fine also it is setting cookie.

But when I try to go to
http://localhost:3000/secure

Headers:

Request URL: http://localhost:3000/secure
Request Method: GET
Status Code: 302 Found
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade

it is still redirecting login page.
I already follow like 5 times https://auth.nuxtjs.org/

But I could not fix. What is wrong with configuration ?
Can you help me ?

What problem does this feature solve?

I want to redirect back to the previous page after login but I cannot find anything in the docs.

When I go to the login page with the previous path as a query param e.g. /login?redirect=/page1/page2, I want to be redirect back to it after successful login.

I found this PR (https://github.com/nuxt-community/auth-module/commit/dde409af9b4b9b4cb899488889015e04a00c5255#diff-45ced1ab657dd3dcf5d098a56bc0f039R287) here but I am unsure how to use it.

This seems like a basic thing that the docs should have already included.

With a bit more scouring the web, it looks like the preferred method here is to use axios and make requests outside of the auth module.

In addition, on oauth you would likely create a 'local' account without a password and link the social/oauth login to that as a many to one relationship.

This stuff should really be in the documentation though.

After reading the documentation and searching through already existing issues, i'm still not sure what the proper process for a sign up strategy would be. For the local strategy, I could see the possibility of abusing the local login function with extra data, or simply rolling another API end point and calling it manually…

I haven't worked with Oauth before, maybe that's where I am falling short, however I would think there would be a way to associate a new login to a new user in my database.

Version

v4.5.1

Reproduction link

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

Steps to reproduce

Set a valid github key/secret in the nuxt config for the demo example.
Use nuxt generate to produce a static build.
Run http-server ./ in the dist folder.
Try authenticate with github by going to /login and clicking the github button.

What is expected ?

The user should be authenticated after github redirects to the callback

What is actually happening?

Github redirects to /callback, but the user is not authenticated. The strategy in Vuex is reset to "local".

Additional comments?

This only effects static sites, I have not run into this issue when running the application normally. I have reproduced this in a private repo deployed to netlify as well.

Hello,
I found few similar questions/issues but I'm not sure that any of that is the answer to my problem.
For example this one: https://github.com/nuxt-community/auth-module/issues/53

So, I'm building a web app using nuxt.js with SSR enabled and I'm using auth-module for JWT auth with my Lumen backend.

I have many auth protected pages (auth middleware from auth-module added in the component as middleware: 'auth').
The problem is when the user initially comes to some protected pages - he is redirected to the login page.

I understand that that problem is because package only set user state after fetching the user from backend and that will not occur during SSR.

Is there a way to execute fetching user for every page protected with auth middleware (on Server Side)?

It's a big problem if I, for example, send email to the user with the link to the account settings and he clicks on it and be redirected to the login page but he is logged in. Or if the user bookmarked some protected links.

So, is there a way to fetchUser during SSR? Or can I edit middleware so we can assume that user is logged in if he has _token in cookies?

Trying to use this library to authenticate api calls with express, I noticed that audience option is already in the dev branch https://github.com/nuxt-community/auth-module/blob/dev/lib/schemes/oauth2.js#76 but not in master yet

do you know what's the estimated time for this "feature" to be merged and released?

Hello,

so in lib/core/auth.js method requestWith() line 273 goes like this

requestWith (strategy, endpoint, defaults) {
    const token = this.getToken(strategy)

    const _endpoint = Object.assign({}, defaults, endpoint)

    if (!_endpoint.headers) {
      _endpoint.headers = {}
    }
    if (!_endpoint.headers['Authorization'] && isSet(token) && token) {
      _endpoint.headers['Authorization'] = token
    }

    return this.request(_endpoint)
  }

Shouldn't the strategy tokenName be used instead of header?

Something like this

requestWith (strategy, endpoint, defaults) {
    const token = this.getToken(strategy)

    const _endpoint = Object.assign({}, defaults, endpoint)

    if (!_endpoint.headers) {
      _endpoint.headers = {}
    }
    if (!_endpoint.headers[this.strategy.options.tokenName] && isSet(token) && token) {
      _endpoint.headers[this.strategy.options.tokenName] = token
    }

    return this.request(_endpoint)
  }

I can make a pull request, but just checking if this is intended behaviour.

Hi there,

I'm using nuxt-auth 4.5.1 with nuxt 2.1.0 and node v10.14.2

For some reason I'm seeing following error on SSR and on page refresh user has to login again:

ReferenceError: btoa is not defined
at randomString (server-bundle.js:1180:53)
at Oauth2Scheme.login (server-bundle.js:831:77)
at Auth.login (server-bundle.js:383:41)
at setStrategy.then (server-bundle.js:375:51)
at process.tickCallback (internal/process/nexttick.js:68:7)

there is process.browser check in the:
/lib/core/utilies.js:28

I can't reproduce this on the development environment. Any help would be appreciated.

Hello,

I'm using Nuxt Auth Module to allow my user to login with Local, Google and Facebook strategies. It's working almost fine, but I'm getting a behavior that I don't want to and it's getting me into some troubles.

Everytime a user login with Google or Facebook and the callback page is called, I need to call my API to exchange the token to a local token (and register the user in the database). My problem is that after calling the callback page, the user is being redirected to home page and I don't know why and how to change this behavior.

How can I do that?

Thanks,
Thiago Colebrusco

What problem does this feature solve?

Provide popup login for facebook and google schemes.

What does the proposed changes look like?

On oauth2.js change the current behavior of window.location to redirect the user to oauth login page. Instead provide options so that it can open a popup to verify and prevent any redirect during login.

What problem does this feature solve?

Set display=popup as a query parameter to facebook authorization_endpoint. At the time the only method is to redirect the user. A solution is adding display key to facebook configuration

Version

v4.5.3

Reproduction link

None

Steps to reproduce

Add a login button and call a login function that user loginWith(...)

What is expected ?

I don't want to have the expected behavior which is redirecting after login, in my case Im using facebook. How can I make the process completely async?

What is actually happening?

Redirect to strategy page and comeback to to redirect url.

Is this module really working?

i'm using:

@nuxtjs/auth version 4.5.3
@nuxtjs/axios version 5.3.6
nuxt version 2.3.4

redirect after login doesn't work
clear cookies after expiration time doesn't work
fullPathRedirect doesn't work