I want to make the login, I had seen many videos of local login with jwt by using nuxt-auth. As in local signup, we store user (id/email/password) in the database, and while login we recheck in a database for a user exist if yes then log in. but in social login where we check while saving the info/data related to a user. which id should I relate to the database? should I need to save the user before assigning the jwt token and fetch the user from the database? without saving the user in DataBase how can I minimize the risk of exposing the id of social login directly at user side

Version

v4.9.1

Reproduction link

https://jsfiddle.net/

Steps to reproduce

I'm using auth-module on a Nuxt.js app to have Auth0 as the authentication system.
It's working great but I want to extend the expiration of the user session so that he doesn't have to login every day.

It seems to work fine for a couple of hours, but on the following day, he has to login again.
I tried to setup the cookie configuration of auth-module to expire after 30 days but it seems to not affect this, probably because I need to do something to renew the Auth0 token.

This is my configuration on nuxt.config.js:

  auth: {
    plugins: ['~/plugins/auth0.js'],
    redirect: {
      login: '/auth/login',
      callback: '/auth/signed-in'
    },
    fullPathRedirect: true,
    cookie: {
      options: {
        expires: 30
      }
    },
    strategies: {
      local: false,
      auth0: {
        domain: 'XXXXXXX',
        client_id: 'XXXXXXXXXXXXXXXXX,
        expires_in: 30000
      }
    }
  },

Is there any way to renew Auth0 token?

What is expected ?

Ideally, for expires or expires_in options to work with Auth0.

What is actually happening?

Auth0 session seems to expire in less than one day and I don't see a way to renew the token without forcing the user to login again.

I have implemented the 'Refresh' scheme with login and logout successfully, but I struggle a bit with the refresh behaviour.
My API endpoint expects a 'refreshtoken' as Authorization, when I query '/refresh'. The issue is, that NuxtAuths sends the 'accesstoken' to every endpoint per default.
That's nice for any other API request, but on the '/refresh' route the API expects a refresh_token.

How can I change that behaviour?
I first tried to override the axios request config of my endpoints but I did not came up with a good solution.

Is there any 'official' approach?

Version

v4.9.1

Reproduction link

[Check: auth-module/docs/content/en/index.md](Check: auth-module/docs/content/en/index.md)

Steps to reproduce

Go to auth-module/docs/content/en/index.md or https://dev.auth.nuxtjs.org/. The preview image is not loaded and is not found on the server.

What is expected ?

Image should show up.

What is actually happening?

Image does not appear.

Additional comments?

Images preview.png and preview-dark.png are not found on the server

I need to take the auth modules endpoint from a file I have inside static folder and after this assign them to the auth modules.
I tried to do the following inside a plugin before auth module is used:

const authEndpoints = data.data.AUTH_ENDPOINTS
app.$auth.strategies.someStrategy.options.endpoints = authEndpoints
console.log(
      'auth endpoints: ',
      app.$auth.strategies.someStrategy.options.endpoints
    )

The thing is that after I print the endpoints which belongs to 'someStrategy', they are updated but when I remove the endpoints section from 'nuxt.config.js' it just doesn't work. Any idea?

Hi,

I have problem to log in with Laravel Passport. On local environment, on click on Sign In button "http://localhost:3000/_auth/laravelPassport/token" route stay on pending status.

In addition, i have an error in nuxt dev console.

ERROR  Cannot read property 'status' of undefined                                                                                                                                                                                                                                                           

at node_modules/@nuxtjs/auth-next/dist/utils/provider.js:127:53
at processTicksAndRejections (internal/process/task_queues.js:97:5)

My Nuxt config file

...
auth: {
    redirect: {
      login: '/connexion',
      logout: '/connexion',
      callback: '/connexion',
      user: '/'
    },
    strategies: {
      laravelPassport: {
        provider: 'laravel/passport',
        endpoints: {
          token: process.env.LARAVEL_ENDPOINT + '/oauth/token',
          user: {
            url: process.env.LARAVEL_ENDPOINT + '/oauth/me'
          }
        },
        token: {
          maxAge: 60 * 15
        },
        refreshToken: {
          maxAge: 60 * 60 * 24
        },
        url: process.env.LARAVEL_ENDPOINT,
        clientId: process.env.PASSPORT_PASSWORD_GRANT_ID,
        clientSecret: process.env.PASSPORT_PASSWORD_GRANT_SECRET,
        redirect_uri: '/connexion',
        grantType: 'password'
      }
    }
  }
...

Do you know what can do that ?

Im attempting to get the idtoken of my google signin so that i can verify it on the backend as described here https://developers.google.com/identity/sign-in/web/backend-auth however I havent been able to actually obtain it, only the accesstoken. What is the correct way to obtain an id_token?

Hello,

I use the local provider in order to make requests to an API backend. I have to use a proxy in order to make it work with CORS. Logging in works fine and also the navbar items for a logged in user show up after a small delay, but when I refresh the page I'm always redirected to the login page instead of the home.

I was wondering if this could have anything to do with me using the proxy function. Below is part of my configuration:

axios: {
    baseURL: 'https://api.windesheim.dev/',
    https: true,
    credentials: false,
    proxy: true,
  },

  proxy: {
    '/api': {
      target: 'https://dev-api.windesheim.dev',
      pathRewrite: {
        '^/api': '/',
      },
    },
  },

Thanks,

Julian Quispel

The laravel passport strategy seems not to have user name and password parameters. How does one add username and passport to the parameters

Access to XMLHttpRequest at 'https://www.googleapis.com/oauth2/v3/userinfo' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
www.googleapis.com/oauth2/v3/userinfo:1

Failed to load resource: net::ERR_FAILED

I'm getting this error, and google auth is not completing the process.

Version

v4.9.1

Reproduction link

https://codesandbox.io/s/nuxt-auth-sanctum-mounted-issue-yqlud?file=/nuxt.config.js

Steps to reproduce

1. Open the reproduction link given
2. Run the codesandbox
3. Insert whatever email and password
4. Click on the login button
5. The error should now appear

Error message:

client.js?06a0:97 TypeError: Cannot read property 'mounted' of undefined
    at Auth.mounted (auth.js?facc:112)
    at Auth.setStrategy (auth.js?facc:108)
    at Auth.loginWith (auth.js?facc:123)
    at VueComponent.onSubmit (login.vue?ec86:82)
    at submit (login.vue?8c7c:31)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLFormElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLFormElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

What is expected ?

The form should send an XHR request with POST method

What is actually happening?

The page got redirected to an error page saying Cannot read property 'mounted' of undefined

Version

v4.9.1

Reproduction link

http://requires.secret.keys/

Steps to reproduce

Trying to set up authentication via OAuth2 to IBM's AppID service. They currently prefer to support web_message as a response type. I have added the following to the standard demo code in this repo, and added a button with @click="$auth.loginWith('appID')"

      appID: {
        scheme: 'oauth2',
        secret: authInfo.secret,
        endpoints: {
          authorization: authInfo.oAuthServerUrl + '/authorization',
          token: authInfo.oAuthServerUrl + '/token',
          userInfo: authInfo.oAuthServerUrl + '/userinfo',
          logout: 'https://localhost:3443/signed-out'
        },
        responseType: 'code',
        responseMode: 'web_message',
        grantType: 'authorization_code',
        clientId: authInfo.clientId,
        scope: 'openid',
        codeChallengeMethod: 'S256'
      }

When I click the button I'm redirected to the AppID login page, and then when I log in I get the AppID auth page and an error in the console

failed to execute 'postmessage' on 'domwindow': the target origin provided ('https://localhost:3443') does not match the recipient window's origin ('https://us-south.appid.cloud.ibm.com')

This seems to indicate that they expect the authorization URL to be called in either an iframe or a separate window?

In addition, I can't see where the posted message is intercepted in the OAuth2 flow code

What is expected ?

Login is successful and I am returned to the secure page

What is actually happening?

login stalls at the AppID auth page because it cannot successfully post the message to the window it's looking for, because it doesn't exist

Additional comments?

I have looked at the OAuth2 webmessage flow and it does appear that a separate or embedded window needs to be launched - this is how they keep the cross domains separate. This is not happening in the default nuxt/auth flow when responseMode is set to webmessage

Can't figure out how to set custom user type. With stable version it was possible by installing @types/nuxtjs__auth and, for example,

interface ICustomUser {
    ...
}

declare module 'vuex/types/index' {
  interface Store<S> {
    $auth: Auth<ICustomUser>
  }
}

But how to do it with auth-next. As far as I see there is no such option for Auth class (why?), or am I doing something wrong?

// @nuxtjs/auth-next/dist/core/auth.d.ts
import type { AuthOptions, HTTPRequest, HTTPResponse } from '../';
import Storage from './storage';
export default class Auth {
    ...
    get user(): any;
    ...
}

I'm using strategy Facebook to login.

It works for:

• Window
• Mac
• Android

It doesn't work for:

• iOS mobile and iPad (not working) cannot see redirect access_token from facebook

Please help for this.
Thank you,

Version

5

Reproduction link

-

Steps to reproduce

nuxt.config.js

modules: [
        '@nuxtjs/auth-next',
]

auth: {
        strategies: {
            'laravelJWT': {
                provider: 'laravel/jwt',
                // NO HARDCODED ENDPOINTS HERE
            },
        },
        plugins: ['~/plugins/auth.js'],
    },

plugins/auth.js

export default function ({app, $auth}) {
    const url = 'http://api.game.com';

    $auth.strategies.laravelJWT.options.endpoints = {
        login: {url: url + '/auth/login', method: 'post'},
        refresh: {url: url + '/auth/refresh', method: 'post'},
        logout: {url: url + '/auth/logout', method: 'post'},
        user: {url: url + '/auth/user', method: 'get'}
    };
}

If we try to log in - it works correctly. But once we have logged in and trying to refresh the page - Auth module tries to query default route /api/auth/user instead of /auth/user. I have to use this plugin because I need to pass current language (locale) as part of url (/lang/auth/user). Since we detect current language dynamically - we cannot hardcode it in nuxt config.

What is expected ?

Auth module should use the overridden routes from the plugin

What is actually happening?

It seems that Auth module queries fetchUser before plugins/auth.js is applied. Because once the page in fully loaded/mounted then other routes works correctly (at least /auth/login)

Hi all,

Trying to set up auth-next with IBM appID and PKCE and I get the appID auth screen, and a redirect with a code and state, but the auth never completes after that - it's as if the redirect back doesn't capture the details to POST back to finish the login.

I modified the demo app, used the standard OAuth2 flow with PKCE, and added another button to login with the appID strategy. Here's my appID config in nuxt.config.js:

      appID: {
        scheme: 'oauth2',
        endpoints: {
          authorization: authInfo.oAuthServerUrl + '/authorization',
          token: authInfo.oAuthServerUrl + '/token',
          userInfo: authInfo.oAuthServerUrl + '/userinfo',
        },
        responseType: 'code',
        grantType: 'authorization_code',
        clientId: authInfo.clientId,
        scope: ['openid'].concat(authInfo.scopes),
        codeChallengeMethod: 'S256'
      }

When I hit the login button, it sends me to the appID login page with the URL:

https://us-south.appid.cloud.ibm.com/oauth/v4/<tenant>/authorization?protocol=oauth2&response_type=code&access_type&client_id=<client>&redirect_uri=https://localhost:3443/callback&scope=openid%20basic%20admin%20author&state=xlEBL-JHz5ii9gnnTm_ke&code_challenge_method=S256&code_challenge=GQJNGRvLhxUcctEmdwPbpst99A2F_LzZbYRtgRgWiVU&language=en

I then login and end up back at the callback:

https://localhost:3443/callback?code=eMO9InnDpMOGw5pVQMKUIl0Iw7oRAsOoYsOXaWgLw7BuNTI7wpLDlcKVwpPCp8Khw6o2ZcKKw4bDpA7Dr8OWPT7DmkUIwrTDrUrCpQPDlsK5NcKnw6TClzTDhzPCi8KVwrbCj3DCmnJqYsK7w7x7wp3DhUpPXDLDjsOfw6ANwoPCq8OUdMKccMOJw7fCjMKCwqsAwpLCo8OvE8KHDxRiwpjDrsOjKsO9ZcOHw4ULw4kYGDdgbcK4QMOsw591w7RQMTTDgsK8w6DDhBUKCcKlw719L8KBLTvDqBzDqcOww6LDuHHDozQEORPDpHjDusKZw5XDoMOvw6ZbFxnClVLDsMO0woovwqUlw6NCVUbCkMOuw5jChsK7w5QePcOYDcOkDWfDhsOUFA&state=xlEBL-JHz5ii9gnnTm_ke

I've just opened the console while doing the login, and have just seen that the POST is working but is getting blocked by a CORS error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://us-south.appid.cloud.ibm.com/oauth/v4/<tenant>/token. (Reason: CORS header 'Access-Control-Allow-Origin' missing)

Is there anything on the client I can do to make this work?

I connect nuxt with laravel 8 using sanctum cookies
with postman everythings works good, but when i login the user at this moment the user is logged in without a problem,
but when i refresh the page 'api/user' return the user but only in client side! in the server side get html text like in the screenshot

config in nuxt file

axios: {
baseURL: 'http://localhost:8000',
credentials: true,
debug: true
},

auth: {
strategies: {
local: {
endpoints: {
login: {
url: '/login',
method: 'post',
propertyName: false
},

      user: {
        url: '/api/user',
        method: 'get',
        propertyName: 'data'
      }
    },

    tokenRequired: false,
    tokenType: false
  }
},
localStorage: false

},

I am having a bit of trouble persisting client-side updates to the user object after reloading the application.

I am using Auth0 to authenticate users, and when the end-user performs certain actions the user_metadata is updated via the Auth0 management API, e.g. updating an array of favorites items

axios
  .patch(
    `https://my-domain.com.us.auth0.com/api/v2/users/${userId}`,
    { user_metadata: { favorites: [...this.favorites, this._id] } },
    {
      headers: {
        authorization: "bearer xyz" },
    }
  )
  .then((response) => {
    const updatedMetadata = {
      ...this.$auth.user,
      ["https://my-domain.com/user_metadata"]: {
        ...response.data.user_metadata,
      },
    };

    this.$auth.setUser(updatedMetadata);
  });

The setUser method updates the user object on the client as expected, however once the app is reloaded the user object doesn't contain the latest version of the user state - another refresh returns the latest version of the state.

I suspect it is an issue with Auth0 returning stale data/data consistent with the last authentication, but I'm not sure how things work with this module, thus it'd be good to know how the $auth state is replenished on the server - does it hit Auth0 to re-authenticate on every server-side request?

Thanks,
David