Activities

pedantic-git

pedantic-git posted a new question

auth-module •

Two-stage authentication (Oauth => Local)

A common authentication setup for traditional mobile apps (as described here) is to use an Oauth provider to give the user a nice convenient one-click login, but then use that provider's token to create/identify a user on the API backend and issue a "local"-style token based on it.

This seems essential for Nuxt SPA apps because we're not using the Universal backend, and it seems like the current oauth2 scheme provides no way to authenticate the user with the backend (it just sets the Axios token to the token provided by the Oauth provider, which is of course rejected by the backend).

I think what we need is a subclass of oauth2 that implements the _handleCallback method differently - passing the token onto a specified callback on the backend and then handling its response the same way the local scheme does.

My questions are:

  1. Is that a good idea? Implementing a new scheme that effectively does both oauth2 and local in a single callback chain. Or is there another way to use an Oauth provider to get a login to a "local" API? (I have seen a hacked solution that redirects the user through an endpoint on the API but that feels ugly and "wrong" to me.)
  2. Is anyone working on this already? If not, would you be interested in my attempt to contribute it? I don't understand the nuxt-auth code intimately so it might be a bit shaky on first go.
amitgur

amitgur posted a new question

auth-module •

Stange token in local strategy

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?

connecteev

connecteev posted a new bug report

auth-module •

bug Auth Strategy does not persist in local storage or cookies (and user gets logged out) on reloading the page

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

ThibaultVlacich

ThibaultVlacich posted a new question

auth-module •

refreshUser not happening server-side

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
      }
    }
  },
connecteev

connecteev posted a new question

auth-module •

pls close

delete

waitaamon

waitaamon posted a new bug report

auth-module •

bug loginWith() redirecting to index even before sending the request

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

hareku

hareku posted a new feature request

auth-module •

idea Add cookie samesite option default value for security

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.

vakrolme

vakrolme posted a new question

auth-module •

Getting Redirect Path in the Example App

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?

danielroe

danielroe posted a new feature request

auth-module •

idea Support for @nuxt/http

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),
},
spetex

spetex posted a new feature request

auth-module •

idea Allow including custom data in the state prop of OAuth2 Request

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' }
nmokkenstorm

nmokkenstorm posted a new feature request

auth-module •

idea Allow custom providers and schemes

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.

ngodink

ngodink posted a new question

auth-module •

Auto-login like google.com and youtube.com

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..

komninoschat

komninoschat posted a new question

auth-module •

Local strategy with cookie session

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?

pirmax

pirmax posted a new question

auth-module •

Property $auth does not exist on type Class

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?

adivity

adivity posted a new question

auth-module •

How access $auth inside of Vuex Action

How do I access $auth inside of a vuex action

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

Thanks

nengine

nengine posted a new question

auth-module •

Example of login logic on external API function

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,

trantinan2512

trantinan2512 posted a new bug report

auth-module •

bug Missing client_secret in _handleCallback for oauth2's Authorization Code Grant

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

docmattman

docmattman posted a new question

auth-module •

Fetch API data on page load and after login

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?

begueradj

begueradj resolved the question #c415

auth-module •

Does Nuxt-auth module support authorization using refresh tokens ?
begueradj

begueradj posted a new question

auth-module •

Does Nuxt-auth module support authorization using refresh tokens ?

So far, I know with nuxtjs/auth we can use access tokens to perform requests.
Does nuxt-auth module also support refresh tokens ?

I saw this pull request but it seems it has not been merged.

Billla BEGUERADJ