Seamless Authentication in Vue3 using Auth0

Simplify security for your app.

Vue.js is a progressive framework for creating single-page applications and dynamic user interfaces.

Auth0, on the contrary, is an authentication and authorization platform that enhances application security.

In this article, we will learn how to build a Vue application with Auth0.

Here, we’ll use Vue3 composition API with typescript.

Table of Contents

1. Create a Vue application with Vite
2. Configure Auth0 account
3. Install and configure Auth0 SDK in the Vue application
4. Add login and logout functionality
5. Configure user page based on details

Let’s start!

Create a Vue application with Vite

Firstly, we will create a new Vue project using Vite, incorporating the latest features and manually selecting the required dependencies.

To create a new project with Vite, use this command:

npm create vite@latest

Next, go to the project directory and run the following command to install all dependencies:

cd vue-auth0

npm install

npm run dev

Configure Auth0 account

To begin, create an Auth0 account by signing in or signing up at https://auth0.com.

Next, you’ll be directed to the Dashboard page, or you can use this direct link:

On this page, click the “Create Application” button or navigate to the Applications dropdown in the left-side menu, select “Applications,” and click “Create Application.”

Once clicked, a popup will appear, prompting you to input the application name and select the application type. As an example, I’ll name the application “Demo App” and choose “Single Page Application.”

Install and configure Auth0 SDK in a Vue application

Once you’ve successfully completed the Demo App in Auth0, proceed to the Settings tab to copy the Domain and Client ID required for your Vue application.

Applications > Applications > Settings

Create a .env.local file and insert the Domain and Client ID into the respective variables: VITE_AUTH_DOMAIN and VITE_CLIENT_ID

Your .env.local file should appear as follows after adding the VITE_AUTH_DOMAIN and VITE_CLIENT_ID values.

.env.local file

Once you’ve set up the environment file and installed all dependencies, the final step for Auth0 integration is installing the Auth0 SDK.

Use the following command to install the Auth0 SDK for Vue.js:npm install @auth0/auth0-vue

Next, you need to incorporate code into your main.ts file to register the Auth0 plugins along with their properties.

Add the following code to your main.ts file to integrate the Auth0 plugin into your Vue application:

import { createApp } from 'vue'
import { createAuth0 } from '@auth0/auth0-vue';
import './style.css'
import App from './App.vue'

const app = createApp(App);

app.use(
  createAuth0({
    domain: import.meta.env.VITE_AUTH_DOMAIN,
    clientId: import.meta.env.VITE__CLIENT_ID,
    authorizationParams: {
    redirect_uri: window.location.origin
    }
  })
);

app.mount('#app')

Add login and logout functionality

To add login and logout functionality to our App.vue file, we’ll use Auth0’s pre-existing functions.

Insert the following code into your App.vue file to enable seamless login and logout capabilities.

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue';
import HelloWorld from './components/HelloWorld.vue'
import { ref, onMounted } from 'vue'

const auth0 = useAuth0();
const { loginWithRedirect, logout } = useAuth0();

const isAuthenticated = ref(auth0.isAuthenticated);
const isLoading = ref(auth0.isLoading);
const user = ref(auth0.user);

const login = () => {
    loginWithRedirect();
}

const logOut = () => {
  logout({ logoutParams: { returnTo: window.location.origin } });
}

onMounted(() => {
  console.log(isAuthenticated.value, isLoading.value, user.value)
})

</script>

<template>
  <button v-if="!isAuthenticated && !isLoading" @click="login">Log in</button>
  <button v-if="isAuthenticated && !isLoading" @click="logOut">Log out</button>

  <div v-if="isAuthenticated && !isLoading">
    <h2>Hi! {{ user.nickname }}</h2>
    <h3>Welcome to Vue + Auth0</h3>
  </div>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld v-if="isAuthenticated && !isLoading" msg="Vite + Vue" />
  <h2 v-else>After login you'll be able to see the content!!</h2>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

After integrating this code, click on the login button It will open an Auth0 popup, where you can enter your credentials. If you don’t have an account, you must create a dummy account for testing.

auth0 popup

Upon successful login, specific content, such as the user’s name and a logout button, will become visible. To customize the appearance of this popup, access the Auth0 dashboard.

auth0 authentication demo

That’s it!

To get the GitHub repo link, click here.

Conclusion

Auth0 simplifies the way to add security to your application. I hope this article helped you establish user authentication in your Vue3 project with TypeScript using Auth0.

You can also find more about auth0 here.

Happy coding!

For more updates on the latest tools and technologies, follow the Simform Engineering blog.

Follow us: Twitter | LinkedIn