Vue Auth 3

Getting started

NOTE

We will be using ES6 in the code samples in the guide.

Also, all examples will be using the full version of Vue to make on-the-fly template compilation possible. See more details here.

`$auth`

In the following pages of instructions I will use composition/api. $auth is still backward compatible from @websanova/vue-auth but it is deprecated

Creating a global application with Vue + Vue Auth 3 is very simple. With Vue.js, we composed our app with components. When we add Vue Auth 3 to the mix, all we need to do is get resource notification ready and simply use the auth API provided by vue-auth3.

Here’s a basic example:

Vue 

<template>
  <p v-if="$auth.check()">
    {{ $auth.user() }}
  </p>
  <p v-else>You have not login!</p>
</template>

composition/api:

<template>
  <p v-if="auth.check()">
    {{ auth.user() }}
  </p>
  <p v-else>You have not login!</p>
</template>
<script lang="ts" setup>
import { useAuth } from "vue-auth3"

const auth = useAuth()
</script>

When a user is authenticated the app will likely need to do some initial preload and checks.

For instance if we refresh the app in authenticated mode, we'll need to first check tokens and fetch some data.

A special $auth.ready() Method has been created for this specific case.

TypeScript 

import { createApp } from "vue"
import router from "./router"
import { createAuth } from "vue-auth3"

import driverAuthBasic from "vue-auth3/drivers/auth/basic"
import driverHttpAxios from "vue-auth3/drivers/http/axios"

const auth = createAuth({
  plugins: {
    router,
  },
  drivers: {
    auth: driverAuthBasic,
    http: driverHttpAxios,
  },
})

const app = createApp(App)

app.use(router).use(auth).mount("#app")

By calling app.use(auth), By default, we can access the VueAuth3 instance from each component with this.$auth, which can be referenced from the global property of auth instance that created with createAuth. As well as, auth API such as this.$auth is also injected into each component, so these API can be used with templates.

To use similar ways at the setup function, you need to call the useAuth functions. We will learn more about this in the Composition API

Throughout the docs, we’ll use APIs like this.$auth, which are almost keep backward compatible from @websanova/vue-auth.

The following sections will be explained using the Legacy API mode.