Your question
Is there a way and what's the best approach to have same authentication on subdomains as well as on main domain?

What are you trying to do
Suppose, I have a website, which has some subprojects on various subdomains and I'd love to have cross-domain authentication.

domain.com — my main website build on Nuxt.js
app.domain.com — some kind of app
app2.domain.com — some other app

Some of these apps might be same Nuxt.js app, other might be separate Nuxt.js app.

I'd love to have same authentication for these app. So user can log in on one of these sites and become logged in on all others. Same with logout and session handling.

Can it be done with nuxt-auth? How? What would be the best approach?

Hello,

I'm using the oAuth2 plugin with "@nuxtjs/auth": "^4.9.1"; When I logout on the client I'm redirected to the login page. My cookie is deleted and I'm on the client site no longer logged in. But on the server site I'm still logged in. Because when I try to login I'm redirected to the main page. Without entering my credentials. When I display the documentation (https://auth.nuxtjs.org/schemes/oauth2.html#options) there is no logout endpoint setting.

Is there an easy way to fix this?

Best regards,
Ralph

I was wondering how should one use the auth module for registering with the laravel sanctum strategy? Since Laravel's default register route logs the user in after successfull registration.

I'm trying to extend the 'oauth2' scheme. How would I go about doing this? I'm not a very experienced JS developer, but it looks like options might be fixed / unable to be extended from a child Scheme?

In https://github.com/nuxt-community/auth-module/blob/dev/src/schemes/oauth2.ts we have:

const DEFAULTS = { ... }

This is then used in the class definition like so:

export default class Oauth2Scheme extends BaseScheme<typeof DEFAULTS> {
  ...
  constructor ($auth, options) {
    super($auth, options, DEFAULTS)
    ...
  }
  ...
}

In https://github.com/nuxt-community/auth-module/blob/dev/src/schemes/_scheme.ts we have:

export default class BaseScheme<OptionsT extends SchemeOptions> {
  public options: OptionsT

  constructor (public $auth: Auth, ...options: OptionsT[]) {
    this.options = options.reduce((p, c) => defu(p, c), {} as OptionsT)
  }
  ...
}

I think what should be possible is for someone to do something like:

DEFAULTS = {
 newOption: string = 'foo'
}
...
export default class mySuperAwesomeScheme extends Oauth2Scheme {
  constructor ($auth:any, options:SchemeOptions[]) {
    super($auth, Object.assign(options, DEFAULTS))
  }
  ...
}

Hi,

I have hydration errors that seem related to the auth module as described here and here. I am using the new full static mode. The errors happen every time I upload a new version of the frontend to the server (nginx). I have already surrounded my references to $auth.loggedIn with <client-only>, but the errors persist.

Now I have found out that the error disappears when I delete the auth-related cookies for the page and reload. So there seems to be a "schizophrenic" state after the upload of a new version, the server side is "clean" and the client side still retains the information of the previous cookies? Can I fix my code to avoid this problem or can this be be fixed in the auth module?

A workaround might be creating a "version" cookie and set the expiration date of auth related cookies to an expired date if the version cookie does not coincide with the frontend version, but this seems a bit ugly.

thanx for any suggestions!

Hi,
steps to reproduce:

1. Open https://nuxt-auth.herokuapp.com/
2. Press the green Login button
3. Login with Google
4. Logout
5. Press 'go-back' x 2 to return to login options then press 'go-forward'
6. Observe you are logedin again.

I am only learning about this module as a backend learning frontend and am not sure this is a bug in the library or in demo app?

Version

v4.9.1

Reproduction link

http://hyxt.nbgh.gov.cn/wechatPage/home

Steps to reproduce

when auth-module is added to nuxt project, it affects the axios module, in some apple devices(iphone 7 and iphone6),not all these devices(some iphone device works well,while others not),'ReferenceError, can't find private variable @DerivedConstructor',will occur.

What is expected ?

it shall fetch data whitout errors

What is actually happening?

when create the request, error occurs,'ReferenceError, can't find private variable @DerivedConstructor'

when auth-module is added to nuxt project, it affects the axios module, in some apple devices(iphone 7 and iphone6),not all these devices(some iphone device works well,while others not),'ReferenceError, can't find private variable @DerivedConstructor',will occur.

Hello,

I am pretty much sure the question has already been asked but I can't seem to find any answers.

I have an Nuxt website that's running in universal mode and then nuxt generate to build the static build for production. The auth-module seems to work as intended when running in development mode (meaning with the dev-server) but once built, the redirections triggered by the auth-module when reloading a page that are guarded by the auth middleware are wrong. For example, when refreshing a page guarded, I am redirected to the sign-in page which seems correct when the user is not logged in, but shouldn't happen when the user is logged in.

I see nothing in the documentaiton that states that the auth-module does not work on generate mode.

Does anyone has any ideas on why the auth-module whould behave like that ?

Thanks

I am trying to setup oauth2 authentication with Laravel Passport, with a grant type password.
Here is the content of my nuxt.config.js:

auth: {
    redirect: {
      login: '/connexion',
      logout: '/',
      home: '/',
      callback: '/',
    },
    strategies: {
      local: false,
      'laravel.passport': {
        url: process.env.API_URL,
        grant_type: 'password',
        client_id: process.env.PASSPORT_CLIENT_ID,
        client_secret: process.env.PASSPORT_CLIENT_SECRET,
        endpoints: {
          user: {
            url: '/api/v1/auth/passport/user',
          },
        },
      },
    },
  },

If I understand Passport doc well, it should only make a POST request to Laravel to get the tokens.
So I try to login in a form this way:

methods: {
    login(e) {
      e.preventDefault()

      this.$auth
        .loginWith('laravel.passport', {
          data: {
            username: '[email protected]',
            password: 'password',
          },
        })
        .catch((e) => {
          this.error = e.response ? e.response.data : e.toString()
        })
    },
  }

I am being redirected to my laravel backend saying "Client authentication failed".
Correct me if I'm wrong, but I should stay on the same page, and Axios would normally make a POST Request, right ?

I have tried the demo, but cant make it work either. Any help would be much appreciated.

Thanks !

When I set property names like so

authorization header in request: Authorization: "Bearer undefined"

but when i add propertyName in endpoints - all works

What problem does this feature solve?

I have to show the data in both cases with and without auth. But without auth the click event should render a login dialog instead of actual callback.

I have written a directive but I am unable to unbind the click event listener from vnode component.

What does the proposed changes look like?

I have to show the data in both cases with and without auth. But without auth the click event should render a login dialog instead of actual callback.

I have written a directive but I am unable to unbind the click event listener from vnode component.

Suggestion

I have to show the data in both cases with and without auth. But without auth the click event should render a login dialog instead of actual callback.

I have written a directive but I am unable to unbind the click event listener from vnode component.

I am using nuxtjs with typescript and use vuex-module-decorators. but I get error when add @nuxtjs/auth to my project.

ERRSTORENOT_PROVIDED: To use getModule(), either the module
should be decorated with store in decorator, i.e. @Module({store:
store}) or
store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store)

This error happen when call Action.

When @nuxtjs/auth from modules it's ok.

store/index.ts

import { Store } from "vuex";
import { initializeStores } from "~/utils/store-accessor";
const initializer = (store: Store<any>) => initializeStores(store);
export const plugins = [initializer];
export * from "~/utils/store-accessor";

utils/store-accessor

/* eslint-disable import/no-mutable-exports */
import { Store } from "vuex";
import { getModule } from "vuex-module-decorators";
import { NuxtAxiosInstance } from "@nuxtjs/axios";
import Login from "~/store/Login";
import App from "~/store/App";

let $axios: NuxtAxiosInstance;

function initializeAxios(axiosInstance: NuxtAxiosInstance) {
    $axios = axiosInstance;
}

let loginStore: Login, appStore: App;

function initializeStores(store: Store<any>): void {
    loginStore = getModule(Login, store);
    appStore = getModule(App, store);
}

export { initializeStores, initializeAxios, loginStore, appStore, $axios };

Hey Folks,

I want to use the Auth0 Permissions you can set to an user as scope Keys for displaying serveral things on my frontend.
An example JWT looks like this:

{
  "iss": "https://xxxxx.eu.auth0.com/",
  "sub": "github|xxxxx",
  "aud": [
    "https://xxxxx.app/api/secret",
    "https://xxxx.eu.auth0.com/userinfo"
  ],
  "iat": 1594843242,
  "exp": 1543243234,
  "azp": "lLKv8g6Z43423423421eJjO4n",
  "scope": "openid profile email",
  "permissions": [
    "admin",
    "read:users"
  ]
}

Now I added scopeKey to my auth configuration in my nuxt.config.js

auth: {
    scopeKey: 'permissions',
[...]
}

In my application

this.$auth.hasScope('admin')

is always returning false.

Am I am missing somethings or did I get something wrong? Is it not possible because it is not space separated like the normal "scope"?
Thanks in advance!

What problem does this feature solve?

It allows for users to add custom functionality in one place.

What does the proposed changes look like?

export default function({ $auth }) {
  $auth.onLogin((strategy, data) => {
    // Do stuff
  })

  $auth.onLogout(() => {
    // Do stuff
  })
}

Version

v4.9.1

Reproduction link

https://github.com/ArthurDanjou/ArtdonisJS

Steps to reproduce

I created the back-end side with adonisJs v5.
I create a nuxt app with 'yarn create nuxt-app'.
I installed the modules nuxt-auth, nuxt-axios & nuxt-proxy.
I configured my nuxt.config.js.

What is expected ?

That my nuxt app works well

What is actually happening?

My nuxt app load and build everything. Both the client and the server are build correctly.
https://hastebin.com/linixuzubu.php (to see the logs).
After the nuxt app is loaded, I start chrome and go to http://localhost.3000. My back-end is also start on port 3333.

Additional comments?

I have WIndows 10 Pro 64Bits.
I use Webstorm.
Node version : v12.16.1

There is my package.json: https://hastebin.com/nifuhodacu.json
And there is my nuxt.config.js : https://hastebin.com/okatekeqim.bash

I'm trying to implement GitHub login. I can see that that it finds the GitHub strategy but when it tries to mount it fails.
Here's the error in the console:

caught error 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.submitForm (login.vue?8dc5:71)
    at submit (login.vue?e37f:17)
    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)

Here is my code:

submitForm: function() {
        try {
          this.$auth.loginWith("github");
        } catch (error){
          console.log("caught error", error)
        }
    }
  }

Here is my nuxt.config.js

require('dotenv').config();

export default {
  /*
   ** Nuxt rendering mode
   ** See https://nuxtjs.org/api/configuration-mode
   */
  mode: "universal",
  /*
   ** Nuxt target
   ** See https://nuxtjs.org/api/configuration-target
   */
  target: "server",
  /*
   ** Headers of the page
   ** See https://nuxtjs.org/api/configuration-head
   */
  head: {
    title: process.env.npm_package_name || "",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        hid: "description",
        name: "description",
        content: process.env.npm_package_description || ""
      }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }]
  },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
  plugins: [],
  /*
   ** Auto import components
   ** See https://nuxtjs.org/api/configuration-components
   */
  components: true,
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://bootstrap-vue.js.org
    "bootstrap-vue/nuxt",
    "@nuxtjs/axios",
    // https://auth.nuxtjs.org/guide/setup.html
    "@nuxtjs/auth"
  ],
  auth: {
    redirect: {
      callback: '/callback',
      logout: '/logout'
    },
    // Options
    stratgeies: {
      github: {
        clientId: process.env.GITHUB_CLIENT_ID,
        clientSecret: process.env.GITHUB_CLIENT_SECRET
      }
    }
  },
  /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/
   */
  build: {},
  middleware: 'auth',
  // ...routerBase
};

I have registered with GitHub and my id/secret are in .env.
I have a store directory with an empty index.js file.
Can you point me in a direction to getting this working. Line 52 here https://github.com/nuxt-community/auth-module/blob/dev/demo/pages/login.vue makes me think I just need to call this.$auth.loginWith("github"), so maybe I have a configuration problem.