CODEWITHSUNDEEP
vue.jsnuxt.jsnuxt-auth
Gabriel
Gabriel

Reputation: 11

Issue with nuxt/auth

For auth I do use nuxt-auth, when the login is successful, I want to redirect to the main page using this.$router.push('/'), then I get a response like blank page with the following message

2021

enter image description here, enter image description here

// for login

<template>
  <div class="limiter">
    <div
      class="container-login100"
      :style="{
        backgroundImage: 'url(' + require(`@/assets/login/images/bg-01.jpg`) + ')',
      }"
    >
      <div class="wrap-login100 p-l-110 p-r-110 p-t-62 p-b-33">
        <form class="login100-form validate-form flex-sb flex-w">
          <span class="login100-form-title p-b-53"> Login Admin </span>

          <a href="facebook.com" class="btn-face m-b-20">
            <i class="fa fa-facebook-official"></i>
            Facebook
          </a>

          <a href="google.com" class="btn-google m-b-20">
            <img :src="require(`@/assets/login/images/icons/icon-google.png`)" alt="GOOGLE" />
            Google
          </a>

          <div class="p-t-31 p-b-9">
            <span class="txt1"> Email </span>
          </div>
          <div class="wrap-input100 validate-input" data-validate="Email is required">
            <input v-model="auth.email" class="input100" type="email" name="email" />
            <span class="focus-input100"></span>
          </div>

          <div class="p-t-13 p-b-9">
            <span class="txt1"> Password </span>

            <a href="#" class="txt2 bo1 m-l-5"> Forgot? </a>
          </div>
          <div class="wrap-input100 validate-input" data-validate="Password is required">
            <input v-model="auth.password" class="input100" type="password" name="pass" />
            <span class="focus-input100"></span>
          </div>

          <div class="container-login100-form-btn m-t-17">
            <a href="javascript:void(0)" class="login100-form-btn" @click="submit">Login</a>
          </div>

          <div class="w-full text-center p-t-55">
            <span class="txt2"> Not a member? </span>

            <a href="#" class="txt2 bo1"> Register now </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  auth: false,
  data() {
    return {
      auth: {
        email: null,
        password: null,
      },
    }
  },
  mounted() {
    if (this.$auth.loggedIn) {
      this.$router.push('/')
    }
  },
  methods: {
    async submit() {
      try {
        const response = await this.$auth.loginWith('local', { data: this.auth })
        this.$router.push('/')
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>

store vuex index.js

export const getters = {
  isAuthenticated(state) {
    return state.auth.loggedIn
  },

  loggedInUser(state) {
    return state.auth.user
  }}
}

layout default.vue

<template>
  <div class="wrapper">
    <Sidebar v-if="isAuthenticated" />
    <div :class="isAuthenticated ? 'main-panel' : ''">
      <Navbar v-if="isAuthenticated" />
      <Nuxt />
      <Footer v-if="isAuthenticated" />
    </div>
  </div>
</template>
<script>
import Sidebar from '@/components/layout/Sidebar.vue'
import Navbar from '@/components/layout/Navbar.vue'
import Footer from '@/components/layout/Footer.vue'
import { mapGetters } from 'vuex'

export default {
  components: { Sidebar, Navbar, Footer },
  computed: {
    ...mapGetters(['isAuthenticated', 'loggedInUser']),
  },
}
</script>

// auth nuxt config

auth : {
  strategies: {
    local: {
      token: {
        property: 'token',
        required: true,
        type: 'Bearer'
      },
      user: {
        property: 'user',
        autoFetch: true
      },
      endpoints: {
        login: { url: '/sign/login', method: 'post' },
        logout: { url: '/sign/logout', method: 'post' },
        user: { url: '/sign/user-login', method: 'get' }
      }
    }
  }
}

base index ('/')

<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">Learn Nuxt</h1>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" rel="noopener noreferrer" class="button--green">
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          rel="noopener noreferrer"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['isAuthenticated', 'loggedInUser']),
  },
}
</script>

Upvotes: 0

Views: 1367

Answers (2)

fffarzan
fffarzan

Reputation: 19

I had same problem after authorizing user and redirect user to the home page. After many tries and doing many works, the right config of auth in nuxt.config.js seemed like this:

auth: {
    strategies: {
      local: {
        scheme: 'refresh',
        token: {
          property: 'access_token',
          tokenType: false,
          maxAge: 60 * 60
        },
        refreshToken: {
          property: 'refresh_token',
          data: '',
          maxAge: 60 * 60
        },
        endpoints: {
          login: {
            url: 'url/of/token',
            method: 'urlMethod'
          },
          refresh: {
            url: 'url/of/refreshToken',
            method: 'urlMethod'
          },
          logout: false,
          user: false
        }
      }
    },
    cookie: false,
    redirect: {
      login: '/login/page',
      logout: '/login/page',
      callback: false,
      home: '/home/page'
    }
  },

Note that I didn't have any refreshToken property, but I should set it as empty string in config to be able to work with nuxt/auth!

Hope I could help

Upvotes: 0

gijswijs
gijswijs

Reputation: 2128

In your vuex store, the state parameter in your getter only has access to local state. You can't access the auth state the way you tried.

In a vuex module, a getter gets 4 arguments, namely local state, local getters, root state and root getters. So if you would rewrite your getters like this it would probably work:

export const getters = {
  isAuthenticated(state, getters, rootState) {
    return rootState.auth.loggedIn
  },

  loggedInUser(state, getters, rootState) {
    return rootState.auth.user
  }}
}

But I still think it is a bit redundant doing it like that. I would replace isAuthenticated with this.$auth.loggedIn in your default layout. The nuxt-auth module globally injects the $auth instance, meaning that you can access it anywhere using this.$auth.

Upvotes: 2

Related Questions