Authenticate Vue with Docomo

The Developer-First Identity PlatformAuth0's Story and Future by CTO and Co-founder Matias WoloskiRead more

Authentication as a service
Easy to integrate
Customizable
Secure token auth

Auth0.com

Authenticate

Vue

Setup your application's code

# installation with npm
npm install --save auth0-js

# installation with yarn
yarn add auth0-js

The auth0.js library can also be retrieved from Auth0's CDN.

<script src="https://cdn.auth0.com/js/auth0/8.12.3/auth0.min.js"></script>

Add the following lines to your base code

// src/App.vue

<template>
  <div>
    <nav>
      <div>
        <a href="#">Auth0 - Vue</a>
      </div>

      <ul>
        <li>
          <router-link to="/">Home</router-link>
        </li>
        <li v-if="!isAuthenticated">
          <a href="#" @click.prevent="login">Login</a>
        </li>
        <li v-if="isAuthenticated">
          <a href="#" @click.prevent="logout">Log out</a>
        </li>
      </ul>
  </nav>

    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      isAuthenticated: false
    };
  },
  async created() {
    try {
      await this.$auth.renewTokens();
    } catch (e) {
      console.log(e);
    }
  },
  methods: {
    login() {
      this.$auth.login();
    },
    logout() {
      this.$auth.logOut();
    },
    handleLoginEvent(data) {
      this.isAuthenticated = data.loggedIn;
      this.profile = data.profile;
    }
  }
};
</script>