after add by 'yarn add @nuxtjs/auth'，I will have the notice 'body-parser deprecated undefined extended: provide extended option nodemodules/@nuxtjs/auth/lib/providers/utils.js:25:37' when I use 'laravel.passport' provider，please help to fix this，thanks

I can't get id_token even though set the token_key: 'id_token' as described below.

I can get only "auth.strategy" and "auth.token.auth0"(accesstoken).

// nuxt.config.js

mode: 'universal',
modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],
// ...
auth: {
    redirect: {
      callback: '/callback'
    },
    strategies: {
      auth0: {
        client_id: process.env.auth0ClientID,
        domain: process.env.auth0Domain,
        scope: ['openid', 'profile', 'email'],
        token_key: 'id_token' // <===== not working
      },
    },
  },

Version

v4.5.1

Reproduction link

#sorry/for/no/reproduction/link

Steps to reproduce

1.
in nuxt.config.js

router: {
  base: "/some_custom_base_path",
}

auth: {
  ...
  redirect: {
    login: '/login',
    logout: '/login',
    callback: '/some_callback_path',
    home: '/'
  }
}

2.
try login facebook

What is expected ?

Expected redirect to http://mydomain.com/some_custom_base_path/some_callback_path

What is actually happening?

Happening redirect to http://mydomain.com/some_callback_path

Additional comments?

Other redirects working correctly.

Hi.

I'm using Cypress for integration testing.

As suggested here:
https://www.youtube.com/watch?v=5XQOK0v_YRE

I should do login programmatically, without using the Login UI.

In my project, I installed @nuxtjs/auth and @nuxtjs/apollo.
My login endpoint is a REST API, then I need to use the received token for any GraphQL requests in the app.

I made a custom auth scheme that do these things when login:

• set user, by calling $auth.setUser(user).
• save user to storage, by calling $auth.$storage.setUniversal('user', user, true).
• set token for graphql, by calling $auth.ctx.app.$apolloHelpers.onLogin(token).

So I need to access $auth.loginWith in my test code.
Is there a way to do this?

Version

v4.5.2

Reproduction link

https://github.com/nuxt-community/auth-module/tree/dev/examples

Steps to reproduce

1) Open login page
2) Try to open secure page
3) Login

What is expected ?

Redirect to secure

What is actually happening?

Stay on login page

For my nuxt.js application I am currently authenticating my users through the Instagram API which is called from my api (separate from my nuxt app). My nuxt app then fetches off to the api which then fetches off to instagram before finally saving a session on my api server and then redirecting back to the nuxt app. My problem is, for whatever reason, the sessions don't produce cookies and so on page refresh, the user is effectively logged out.

I understand that this is probably a problem with my setup, but what would you consider to be the most effective and straight forward solution for persistent logins using nuxt?

Thanks in advance.

My dependencies:

"nuxt": "^2.2.0",
"quasar-nuxt": "^0.16.0-alpha.2",
"@nuxtjs/auth": "^4.5.3",
"@nuxtjs/axios": "^5.3.6",

My Nuxt Config:

mode: 'spa',
modules: ['quasar-nuxt', '@nuxtjs/apollo', '@nuxtjs/axios', '@nuxtjs/auth'],
auth: {
  redirect: {
    logout: '/login',
    login: '/login'
  }
}

When I'm not logged in, I try to open /home for example, then my app will redirect to /login.
The problem is my Login Page is detached from its Layout.
It is only happened from redirect, but no problem when I directly open /login.

I got an error page with message:
Cannot read property 'header' of undefined

Screenshots:

There is an error in the documentation site that I can see has been fixed in the repository but for whatever reason this change has not made it onto the live documentation site.

Error on this page: https://auth.nuxtjs.org/reference/schemes/local#usage-1

Fixed when looking at this file: https://github.com/nuxt-community/auth-module/blob/315bf4bcb02374ef9e7947f65d0d0230fddc9326/docs/schemes/local.md

A particular page needs to load some user specific data in the fetch() hook. How do I access the auth token on the server side to send with this request?

Hello,

I am trying to implement some logic in the callback after auth. I want to access the fields of the return auth store within the Vue instances of the callback page, if possible, and then do some logic there. Depending on what Vue functions I use (created/mounted) I either can't access the this.$auth or the callback redirects before the logic can take place. What are my options for making the callback wait a little bit so some async functions call finish; is it even possible for me to access the $auth fields at this point? If not, where can I add conditional logic that runs only after successful authentication? Should I put it on the page that the callback redirects to, with a check for auth or not?

Best,

Lucas

I need a pointer as I have build a project using the nuxt-auth example as demo's here: https://nuxt-auth.herokuapp.com/

But when I click the login button for a simple local authentication the endpoint seems to be api/api/auth instead of just api/auth.

I am sure it is a simple config issue but being a noob I don't know where it might be. As far as I know I haven't altered anything that is provided in the example.

I managed to easily setup facebook login just by following this code example, but setting up the Twitter login in the same way as in the example doesn't work, I'm always getting:

app.js:344 Uncaught TypeError: Cannot read property 'mounted' of undefined

This is my auth setup in nuxt.config.js:

auth: { // Options redirect: { callback: '/callback', login: '/register' }, strategies: { local: { endpoints: { login: { propertyName: 'token.accessToken' } } }, facebook: { client_id: '{secretCode}'', userinfo_endpoint: 'https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email,birthday', scope: ['public_profile', 'email', 'user_birthday'] }, twitter: { client_id: '{secretCode}', } } }

What am I doing wrong?

Thanks!

I am trying to use a backend that uses "Token <token>" instead of "Bearer <token>" for bearer authentication. Is there any way of doing this? Or should I implement a custom authentication method for this?

Is it possible to sign in with Facebook dialog/window popup?

I am following documentation https://auth.nuxtjs.org/reference/providers/passport but login is not working for me. Any ideas?

LoginController.php

public function login(LoginRequest $request)
    {
        try {
            $client = new Client();
            $response = $client->post(config('app.url') . '/oauth/token', [
                'form_params' => [
                    'grant_type' => 'password',
                    'client_id' => config('api.password.client_id'),
                    'client_secret' => config('api.password.client_secret'),
                    'username' => $request->get('email'),
                    'password' => $request->get('password'),
                    'remember' => $request->get('remember'),
                    'scope' => '*',
                ],
            ]);
            return json_decode((string)$response->getBody(), true);
        } catch (\Exception $exception) {
            return response()->json([
                'error' => 'invalid_credentials',
                'message' => "{$exception->getCode()}: {$exception->getMessage()}",
            ], 401);
        }
    }

nuxt.config.js

auth: {
    strategies: {
      'laravel.passport': {
        url: 'http://boilerplate-api.local/api',
        client_id: '2',
        client_secret: '4PiXkchxi6y7We80g7B1acUSdvtzBsPaRAe1Uh3G'
      },
    }
  }

login.vue

<script>
export default {
  middleware: 'guest',

  data() {
    return {
      password: '',
      email: '',
      error: null
    }
  },
  methods: {
    async login() {
      try {
        await this.$auth.loginWith('laravel.passport')

        this.$router.push('/')
      } catch (e) {
        this.error = e.response.data.message
        console.log(this.error)
      }
    }
  }
}
</script>

I have a backend api which was built by laravel

I use nuxt as a frontend dashboard.

This is my configtion:

package.json

"dependencies": {
    "@nuxtjs/auth": "^4.5.3",
    "@nuxtjs/axios": "^5.3.4",
    "cross-env": "^5.2.0",
    "express": "^4.16.3",
    "nuxt": "^2.0.0",
    "vuetify": "^1.3.5"
  },

nuxt.config.js

 modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],

axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: process.env.BASE_URL,
  },
  auth: {
    strategies: {
      'laravel.passport': {
        url: process.env.BASE_URL ,
        client_id: '1',
        client_secret: secrete_key,
        userinfo_endpoint: process.env.BASE_URL + "/api/oauth/me"
      },

`
this is code to call request

methods: {

      getDataFromApi () {

        this.loading = true

        return this.$axios.$get('/api/orders?page=' + this.pagination.page)
      },

    }

At backend, I already make a middleware to handle CORS

public function handle($request, Closure $next)
  {
    $headers = [
      'Access-Control-Allow-Origin' => '*',
      'Access-Control-Allow-Headers' => 'Content-Type, Authorization, Origin, Text-X',
      'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Expose-Headers' => 'Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Credentials ',
      'GXD-Version' => '1.0'
    ];

    if ( $request->getMethod() == 'OPTIONS' ) {


      return response()
                ->json(['status' => 'success'])
                ->withHeaders($headers);
    }

    $response = $next($request);

    $response->headers->add( $headers );

    return $response;
  }

`

on localhost, it work well, but when I deploy app to Amazon Beantalk, after login via

` Access to XMLHttpRequest at 'http://nuxt_domain/orders?page=1' from origin 'http://laravel_api' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
All header on request is missing,

Please check image: https://imgur.com/a/tKMdQvH

Anyone please help!

What problem does this feature solve?

Currently there is no way to display any custom errors generated by the server on login (for example "Your account is disabled", customised "Invalid login" message.

What does the proposed changes look like?

Example:
Assuming server returns a JSON object with error details (for example an simple object with { isError: true, errorMessage: 'Invalid Username or Password'})

this.$auth.loginWith('local', { 
data: { 
  username: 'test', 
  password: 'test' 
} 
})
.then(() => this.$toast.success('Logged In!'))
.catch((err) => this.$toast.error(err.response.data.errorMessage) -- Displays a toast with "Invalid Username or Password"

Additonal Detail (Edit)

The response currently output to the console is for the retrieval of the user object. The initial login API request is not included at all. Using err.response in the above request returns the 401 error. If possible can the response from the login request be chained into the user retrieval request. The logic says that the user object should not even be retrieved if the login was unsuccessful but as each API can vary, the way to deal with this would need to be standardised (for example a failed login request would need to return a 400 bad request error with data within it. The request function could then check if it was a 400 error and return that OR continue to retrieve the user object)

I am using loginWith "local" and it works fine except it redirects to home page even when the login fails. If a user types some random email and password, the server responds with unauthorized error along with message.

I would like to show that message to user so they know what they are missing but I am unable to show them any error message because it redirects to home page anyway once I hit login button. How to stop auto redirect on login?