Adding authentication to an app is always a chore.
If we’re building a Vue app, we can make our work easier with the vue-authenticate plugin.
In this article, we’ll look at how to use the vue-authenticate plugin to add authentication.
Getting Started
We can get started by installing a few packages.
We run:
npm install vue-authenticate axios vue-axios
to install the required packages.
Vue-authenticate uses Axios and Vue-Axios for making HTTP requests.
Then we can add the plugin to our app by writing:
import Vue from "vue";
import App from "./App.vue";
import VueAxios from "vue-axios";
import VueAuthenticate from "vue-authenticate";
import axios from "axios";
Vue.use(VueAxios, axios);
Vue.use(VueAuthenticate, {
baseUrl: "https://ClosedThirdPixels--five-nine.repl.co"
});
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount("#app");
in main.js .
We set the baseUrl to the base URL of the API.
Then we can create a login form with it by writing:
<template>
<div>
<form @submit.prevent="login">
<input v-model="email" type="text" placeholder="email">
<input v-model="password" type="password" placeholder="password">
<br>
<input type="submit" value="log in">
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: "",
password: ""
};
},
methods: {
async login() {
const { email, password } = this;
await this.$auth.login({ email, password });
}
}
};
</script>
in a component.
We use the this.$auth.login method to make a POST request to https://closedthirdpixels–five-nine.repl.co/auth/login.
The payload has the email and password fields.
On the back end, we have:
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors')
const app = express();
app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/auth/login', (req, res) => {
res.json({})
});
app.listen(3000, () => console.log('server started'));
to handle the request.
We add the cors middleware so that we can make cross-domain requests.
We can add more code to handle login credential validation.
To add a user registration form, we can write:
<template>
<div>
<form @submit.prevent="register">
<input v-model="name" type="text" placeholder="name">
<input v-model="email" type="text" placeholder="email">
<input v-model="password" type="password" placeholder="password">
<br>
<input type="submit" value="log in">
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: "",
email: "",
password: ""
};
},
methods: {
async register() {
const { name, email, password } = this;
await this.$auth.register({ name, email, password });
}
}
};
</script>
to create a form.
And when we submit the form, we call the register method, which calls the this.$auth.register method to make a POST request to https://closedthirdpixels–five-nine.repl.co/auth/register.
Everything in the arguments will be sent.
Then we can add a route to the back end to handle that request:
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors')
const app = express();
app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/auth/login', (req, res) => {
res.json({})
});
app.post('/auth/register', (req, res) => {
res.json({})
});
app.listen(3000, () => console.log('server started'));
Conclusion
We can add basic authentication to a Vue app with the Vue-Authenticate library.
