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.

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?

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:

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.

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

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

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

solved it.

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('/');
    }
};

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('/');
};

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?

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

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?

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

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()
})

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

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.

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.

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.