useAuth()

Just simple authentication composable functions for Vue 3

• 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)

---

Get started

Installation

npm install manuellandreau/use-auth
# or
yarn add manuellandreau/use-auth

How to use

<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>

With typescrypt

<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>

Parameters

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

More

See Vue 3 API composition and axios documentations

Development

Require node >14

Tests with Jest (npm test) Build with Vite (npm run build)

Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page.