- API agnostic (JWT(ish))
- No store needed, isAuth, isLoading and error "state" variables are shared between components
- Written in Typescript
- It uses Axios
Minimum requirement : Vue 3.2 (Vue 2 + Composable API not tested)
npm install manuellandreau/use-auth
# or
yarn add manuellandreau/use-auth
<template>
<input v-model="form.email" type="email" placeholder="Email" />
<input v-model="form.password" type="password" placeholder="password" />
<button @click="signin">Sign in</button>
<button @click="signup">Sign up</button>
<button @click="logout()">Logout</button>
Loading: {{ isLoading }}
Authenticate: {{ isAuth }}
<div v-if="error">{{ error.data }}</div>
</template>
<script setup>
import { reactive } from 'vue'
import useAuth from 'use-auth'
import axios from 'axios'
const form = reactive({
email: '',
password: '',
remember: true
})
const { login, register, refresh, logout, init, isLoading, isAuth, error } = useAuth();
// Set the base API url with axios
axios.defaults.baseURL = 'http://your-api-base-url'
// or
// init({
// axiosInstance: axios.create({ baseURL: 'http://your-api-base-url', /*headers: {'X-Custom-Header': 'foobar'}*/ })
// tokenKey: 'token',
// storageKey: 'token',
// authorizationScheme: 'Bearer'
// })
// Refresh token
refresh('/auth/refresh')
.then(console.log)
.catch(console.log)
async function signin() {
await login('/auth/login', form)
// await getUser()
}
async function signup() {
await register('/auth/register', form)
}
</script>
<script setup lang="ts">
import { reactive } from 'vue'
import useAuth from 'use-auth'
import axios from 'axios'
const form = reactive({
email: '',
password: '',
remember: false
})
const { login, register, refresh, logout, init, isLoading, isAuth, error } = useAuth();
// Set the base API url with axios
axios.defaults.baseURL = 'http://your-api-base-url'
// or
// init({
// axiosInstance: axios.create({ baseURL: 'http://your-api-base-url', /*headers: {'X-Custom-Header': 'foobar'}*/ })
// tokenKey: 'token',
// storageKey: 'token',
// authorizationScheme: 'Bearer'
// })
// Types example
type FormData = { email: string, password: string, remember?: boolean }
type LoginResponse = { token?: string, error?: string }
// Refresh token
(async () => await refresh('/auth/refresh'))()
async function signin() {
await login<FormData, LoginResponse>('/auth/login', form)
// await getUser()
}
async function signup() {
await register<FormData>('/auth/register', form)
}
</script>
Function | Parameters | Default | Return |
---|---|---|---|
init | axiosInstance tokenKey: string (token response key) storageKey (key name in local or session storage) authorizationScheme |
Global axios instance 'token' 'token' 'Bearer ' |
Promise |
login | url: string (POST endpoint url) data: object |
required required |
Promise |
register | url: string (POST endpoint url) data: object |
required required |
Promise |
refresh | url: string | required | Promise |
logout | void |
See Vue 3 API composition and axios documentations
Require node >14
Tests with Jest (npm test) Build with Vite (npm run build)
Contributions, issues and feature requests are welcome! Feel free to check issues page.