Repository auth-module

NickBolles

NickBolles posted a new feature request

auth-module • 2 days ago

idea Typescript Types

What problem does this feature solve?

Typescript types for $auth on the vue instance

WildSunLove

WildSunLove posted a new question

auth-module • 7 days ago

Integrating with Express API

I have an application, integrating Nuxt with Express, to have an API backend integrated into the application.
I'm trying to understand how to connect the authentication flow of the backend and the frontend.
Specifically, how to use Google OAuth, and have the front end and the back end both be aware of the authenticated user.

stewie0013

stewie0013 posted a new question

auth-module • 7 days ago

Able to access /secure route without actually logging in

With Nuxt being an SSR framework, all pages are given to the client upon first load, even the content of the /secure page. I am able to easily view this page by typing window.__NUXT__.state.auth.loggedIn = true

Is there a workaround for this, so that I can have protected routes on the server without giving the content of them to the client on the first load?

mateullull

mateullull posted a new bug report

auth-module • 8 days ago

bug Bug on reload secure page

Version

v4.5.1

Reproduction link

https://codesandbox.io/s/github/nuxt-community/auth-module/tree/master/

Steps to reproduce

Well, this bug is highly related to this GitHub issue #55 .

I'm simply cloning this whole repo to my computer and run a yarn install and yarn dev into a terminal. Next, I'm going to http://localhost:3000 and all works fine, I can go to the secure page and, as expected, it redirects me to Login page. Next, when I'm logged in, I can access the secure page. Ok, now, if I press the F5 button to reload the page, it throws the bug. I'm redirected to the login page, but at the same time (well, some milliseconds after it) it displays my name at the navbar. Looking in the console there is two vue-warnings:

Captura_2018-10-16_09-08-31.png

But wait, if I run the live example on herokuapp (https://nuxt-auth.herokuapp.com/) it works as expected, if i press F5 it keeps me on secure page and no warnings are displayed.

What is expected ?

When pressing F5 key (to reload the page) on secured page, no redirecting to login page.

What is actually happening?

When pressing F5 key (to reload the page) on secured page, it takes me to login page.

Additional comments?

Software I'm using:

  • OS: Ubuntu 16.04 LTS
  • Node: v10.12.0
  • Yarn: 1.10.1
  • Browsers: Chrome and Firefox, the bug exists in both browsers, and the live example works as expected in the two browsers.

P.S.1: I've cleaned the cache and all aplication data in Chrome, because this bug was firstly discovered in a project that I'm developing.
P.S.2: No bug was observed in my home laptop. It's very very strange.

lucaspatel

lucaspatel posted a new question

auth-module • 9 days ago

Nuxt static site auth hangs, incorrect cookie, weird url state

Hello,

I'm trying to use auth-module for Google provider login for my website. My website is made using Nuxt, but I generate the static website for use in a static hosting environment (my only option). When working with auth in non-static mode (npm run dev) everything works fine, but in static mode the website hangs at the /callback, the cookie seems like it's using the wrong auth method (local vs google) and the url has a strange option appended to it (#state=…) which seems strange. Ultimately the user does not register as logged in. Can anyone help? I can provide code but I'm not sure how using this cmty editor.

Thank you,

Lucas

pavel-jurasek-hypofriend-de

pavel-jurasek-hypofriend-de posted a new bug report

auth-module • 13 days ago

bug Passing $nuxt.$auth.$state.loggedIn = true to console bi-pass security

Version

v4.5.1

Reproduction link

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

Steps to reproduce

open any develper bar and type in console: $nuxt.$auth.$state.loggedIn = true

What is expected ?

This should not be possible.

What is actually happening?

It should not be possible to bypass authentication.

Additional comments?

No

napestershine

napestershine posted a new bug report

auth-module • 14 days ago

bug facebook login demo not working

Version

v4.5.1

Reproduction link

https://nuxt-auth.herokuapp.com/

Steps to reproduce

Visit URL https://nuxt-auth.herokuapp.com/
click on Login
click Login with Facebook
see the error App not set up: This app is still in development mode, and you don't have access to it. Switch to a registered test user or ask an app admin for permissions.

What is expected ?

it should get user log in and show user area

What is actually happening?

It's throwing error page

faiyaz26

faiyaz26 posted a new question

auth-module • 16 days ago

getting "Critical dependency: the request of a dependency is an expression" warning

solved it.

freevital

freevital posted a new question

auth-module • 17 days ago

Set token before rendering

I need log in user before render application. How can I do it?
I try to set token in the authProvider.js middleware, but after render app I still is not logged.

app/middleware/authProvider.js:

import api from '@/api';

export default async ({ app, route, redirect }) => {
    if (process.client) {
        return;
    }

    if (route.path == '/auth/google/') {
        const { data } = await api.auth.loginByProvider(app, 'google', { code: route.query.code });

        app.$auth.setToken('local', `Bearer ${data.access_token}`);

        await app.$auth.setStrategy('local');

        redirect('/');
    }
};
freevital

freevital posted a new question

auth-module • 17 days ago

Set token before rendering

I need log in user before render application. How can I do it?
I try to set token in the authProvider.js middleware, but after render app I still is not logged.

app/middleware/authProvider.js:

import api from '@/api';

export default async ({ app, route, redirect }) => {
    if (process.client) {
        return;
    }

    if (route.path == '/auth/google/') {
        const { data } = await api.auth.loginByProvider(app, 'google', { code: route.query.code });

        app.$auth.setToken('local', "Bearer "+ data.token);

        setTimeout(async () => {
            app.$auth.setStrategy('local');

            setTimeout(async () => {
                await app.$auth.fetchUser();
            });
        });
    }

    redirect('/');
};
kelvin2go

kelvin2go posted a new question

auth-module • 20 days ago

after upgrade to nuxt2.1, sometime it keep repeatedly requesting endpoints `user`

Nuxt `package.json

...
   "@nuxtjs/auth": "^4.5.1",
    "@nuxtjs/axios": "^5.3.1",
    "@nuxtjs/moment": "^1.0.0",
...
 "nuxt": "^2.1.0",

plugins/axios.js

export default function ({ $axios, redirect }) {
  $axios.setHeader('Access-Control-Allow-Origin', '*')
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
    if (code === 401 || code === 403) {
      redirect('/login')
    }
  })
}

/nuxt-config.js

router: {
    middleware: ['auth']
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: API_BASE + '/api/user/login', method: 'post', propertyName: 'jwt.token' },
          logout: false,
          user: { url: API_BASE + '/api/user/me', method: 'get', propertyName: 'user' }
        },
        redirect: {
          login: '/?login=1',
          logout: '/'
        },
        tokenRequired: true,
        tokenType: 'bearer'
      }
    },
    plugins: [ '~/plugins/mqtt.js' ]
  },

when i load some pages, like /dashboard , it prints

Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me
Making request to http://{API}.com/api/user/me

Any reason which may cause this multiple calling user?

4ern

4ern resolved the question #c207

auth-module • 23 days ago

Nuxt Auth - User Data not set

Ok after a long try, I finally solved it. The problem was that auth.fetchUser() requires a property user in the user response, which is not present in my user response. I set the propertyName to false in the nuxt.config.js and now it works

*nuxt.config.js

auth: {
strategies: {
    local: {
        endpoints: {
            login: {
                url: '/auth/login',
                method: 'post',
                propertyName: 'access_token'
            },
            logout: {
                url: '/auth/logout',
                method: 'post'
            },
            user: {
                url: '/auth/me',
                method: 'post',
                propertyName: false // <--- Default "user"
            }
        }
    }
}
}

Currently I am not sure if this is a fault in the module

kaloraat

kaloraat posted a new question

auth-module • 23 days ago

Only redirect on successful response from server on login

Hi
I have the following code to login user in my nuxt app.

`
// pages/login.vue

methods: {
async submit() {
await this.$auth.loginWith("local", {
// send the data to the server
data: this.form
});

  this.$router.push({
    // redirect to intended location
    path: this.$route.query.redirect || "/" 
  });
}

}`

// nuxt.config.js
// endpoints
`login: {
url: "login",
method: "post",
propertyName: "meta.token",
tokenRequired: true,
tokenType: "bearer"
},

`

The problem is, even if i hit the submit button without filling out form or with wrong info, it redirects me to home page. It does not login with wrong detail so that part is fine. But it should not redirect with empty or wrong form data.

I guess it happens because, it happens in the client side and does not wait for the server response. It's been a real problem, any solutions?

4ern

4ern posted a new question

auth-module • 24 days ago

Nuxt Auth - User Data not set

Hello,

I have run nuxt in SPA mode. Now I'm trying to do this.$ Auth.loginWith the registration. As it stands, the jwt token is determined correctly. However, I will not get any user data. probably it's because the token must be set as a post parameter, but I do not know where to define it?

my nuxt.config.js

const pkg = require('./package')

const nodeExternals = require('webpack-node-externals')

module.exports = {
    mode: 'spa',

    /*
     ** Headers of the page
     */
    head: {
        title: pkg.name,
        meta: [{
                charset: 'utf-8'
            },
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1'
            },
            {
                hid: 'description',
                name: 'description',
                content: pkg.description
            },
            {
                name: 'msapplication-TileColor',
                content: '#ffffff'
            },
            {
                name: 'msapplication-TileImage',
                content: '/ms-icon-144x144.png'
            },
            {
                name: 'theme-color',
                content: '#ffffff'
            }
        ],
        link: [{
                rel: 'stylesheet',
                href: 'https://fonts.googleapis.com/css?family=Roboto|Material+Icons'
            }
        ]
    },

    /*
     ** Customize the progress-bar color
     */
    loading: {
        color: '#8752F7'
    },

    /*
     ** Global CSS
     */
    css: [
        'vuetify/src/stylus/main.styl'
    ],

    /*
     ** Plugins to load before mounting the App
     */
    plugins: [
        '@/plugins/vuetify',
        '~plugins/global-components.js',
        '~plugins/filters/date-filter.js',
        {
            src: '~/plugins/vee-validate.js',
            ssr: false
        }
    ],

    /*
     ** Nuxt.js modules
     */
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/auth'
    ],

    /**
     ** axios settings
     */
    axios: {
        baseURL: 'https://api.***.de/api',
    },

    /**
     ** auth modules
     */
    auth: {
        strategies: {
            local: {
                endpoints: {
                    login: {
                        url: '/auth/login',
                        method: 'post',
                        propertyName: 'access_token'
                    },
                    logout: {
                        url: '/auth/logout',
                        method: 'post'
                    },
                    user: {
                        url: '/auth/me',
                        method: 'post'
                    },
                    tokenRequired: true
                }
        },
        redirect: {
            login: '/auth/login',
            logout: '/auth/logout',
            callback: '/auth/login',
            user: '/dashboard'
        }
    },


    /**
     ** global router settings
     */
    router: {
        middleware: ['auth']
    },

    /*
     ** Build configuration
     */
    build: {
        /*
         ** You can extend webpack config here
         */
        extend(config, ctx) {

            if (ctx.isServer) {
                config.externals = [
                    nodeExternals({
                        whitelist: [/^vuetify/]
                    })
                ]
            }
        }
    }
}

login.vue

async login() {
                await this.$auth.loginWith('local', {
                    data: {
                        email: this.email,
                        password: this.password
                    }
                }).then(() => {
                    this.$router.push('/dashboard')
                }).catch(err => {
                    this.snackbar.show = true;
                })
            }

thanks for help

postman.png
1.png
2.png
3.PNG

zyxep

zyxep posted a new feature request

auth-module • a month ago

idea loginWith/Login returning user object in promise

What problem does this feature solve?

This would make it easy for devs to create the user in their own data store in e.g.
.then({ })
and errors in .catch({ })

so that means i should be able to do something like:

this.$auth.loginWith('facebook').then({
// Create the user in my own data store, e.g. MySQL etc.
}).catch({
// If the user creation fails in own data store, remove the data in vuex
await this.$auth.logout()
})
davestar057

davestar057 posted a new bug report

auth-module • a month ago

bug When trying login - on failed first attempt it redirects to homepage. On subsequent attempts it stays on the page and allows to show errors as should

Version

v4.5.1

Reproduction link

https://jsfiddle.net/5cLxosyd/

Steps to reproduce

Go to login page - enter blank or incorrect login details. On first attempt it will just redirect you to the homepage. On subsequent attempts it will work as expected, staying on page and allowing you to display errors etc.

What is expected ?

To be able to stay on page on first attempted nuxt auth login attempt

What is actually happening?

Being redirected to homepage on first attempt at logging in using nuxt auth

designcourse

designcourse posted a new question

auth-module • a month ago

this.$auth.setToken() reactivity question

I'm implementing my own email verification sequence where a user clicks a link in an email after joining, and is directed to a nuxt/vue component where axios is used to communicate a custom "verify_token" (just a 12 string random character) with a laravel api, and the api returns a JWT token.

Then, I use that token as such:
await this.$auth.setToken('local', 'Bearer '+response.data.meta.token);

After that line, I specify:
this.$router.push({
path: this.$route.query.redirect || '/'
})

The UI and the state does not reflect the user is logged in. I have to manually refresh the page and then the state appears to be updated.

Am I not using .setToken() correctly? Thanks.

ConsoleTVs

ConsoleTVs posted a new bug report

auth-module • a month ago

bug $auth not defined in plugin & resetOnError option is ignored...

Version

v4.5.1

Reproduction link

http://prntscr.com/kxf2s5

Steps to reproduce

Follow the steps in the small detailed guide…

What is expected ?

  • To have the $auth inside the plugin to use .onError
  • To log out the user if the request fails (resetOnError is true)

What is actually happening?

  • $auth is undefined
  • The user is not logged out, so I must find alternatives like using $auth in the plugin but I'm unable to…

Example failed request because bad token: http://prntscr.com/kxf48b
Result in the local storage: http://prntscr.com/kxf4i6

Additional comments?

nuxt.config.js:

    auth: {
        // See https://auth.nuxtjs.org/getting-starterd/options
        redirect: {
            login: '/',
            logout: '/',
            user: '/dashboard'
        },
        strategies: {
            local: {
                endpoints: {
                    login: { url: '/login', method: 'post', propertyName: 'token' },
                    logout: { url: '/logout', method: 'post' },
                    user: { url: '/user', method: 'get', propertyName: 'user' }
                },
            }
        },
        resetOnError: true
    },

Also, just as a side note, the login redirect is not working either… Login works tho.

eliyas5044

eliyas5044 posted a new question

auth-module • a month ago

How to add twitter provider?

Hi, thanks for your awesome package 👍 btw, how to add twitter provider as there is no example of it. as twitter is also popular, we need to use it for user authentication.

Thanks.

mauxtin

mauxtin posted a new feature request

auth-module • a month ago

idea Only include (login) facebook scripts when needed

What problem does this feature solve?

At this point, facebook login scripts are loaded to every page even when they are not needed.

What does the proposed changes look like?

A way of specifying in which pages should the script be loaded.