How to integrate Auth0 in vue.js

How to integrate Auth0 in vue.js

11 March 2022

First, you need to sign up Auth0 account. After registering, you will be redirected to the Auth0 management panel.

  • Click on Applications in the left sidebar
  • Click on Create Application
  • Name it anything you’d like
  • Click the Single Page Web Applications for application type
  • Click on Create

Next, go to Settings to fill in information that Auth0 needs to configure authentication for your application.

  • Allowed Callback URLs — http://localhost:9008

Here Auth0 will redirect the user after authentication.

  • Allowed Logout URLs — http://localhost:9008

This is the URL returned after the user exits the application.

  • Allowed Web Origins — http://localhost:9008

This is the URL that Auth0 uses to authenticate from various sources.

Now click the ‘Save Changes’ button.

Install Auth0 SPA package:

Go to the terminal and install Auth0’s auth0-spa-js package in the application’s root directory.

npm install @auth0/auth0-spa-js

Creating an authentication wrapper:

Then create a reusable Vue container object around the Auth0 SDK. You will also create a Vue plugin to expose this container to the rest of the application.

For this, create a new file and folder. You should be in your events-app root directory and type:

mkdir src/auth

touch src/auth/index.js

Now open up the newly created src/auth/index.js file and paste in the following code:

The comments in this file have all the details of what we are doing.

import Vue from "vue";

import createAuth0Client from "@auth0/auth0-spa-js";

//Define the default action after authentication

const DEFAULT_REDIRECT_CALLBACK = () =>

  window.history.replaceState({}, document.title, window.location.pathname);

let instance;

//Returns the current instance of the SDK

export const getInstance = () => instance;

//Creates Auth0 SDK instance. If it is already created, it will return that instance

export const useAuth0 = ({

  onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,

  redirectUri = window.location.origin,

  ...options

})=>{

  if (instance) return instance;

  // The instance will be simply a Vue object

  instance = new Vue({

    data(){

      return{

        auth0Client: null,

        popupOpen: false,

        loading: true,

        isAuthenticated: false,

        user:{},

        error: null

      };

    },

    methods:{

     // To authenticates user using a popup window

      async loginWithPopup(o){

        this.popupOpen = true;

        try{

          await this.auth0Client.loginWithPopup(o);

        } catch (e){

          // Next line will disable eslint

          console.error(e); 
          } finally{

          this.popupOpen = false;

        }

        this.user = await this.auth0Client.getUser();

        this.isAuthenticated = true;

      },

      // Use redirection to handle login callbacks

      async handleRedirectCallback(){

        this.loading = true;

        try{

          await this.auth0Client.handleRedirectCallback();

          this.user = await this.auth0Client.getUser();

          this.isAuthenticated = true;

        } catch (e){

          this.error = e;

        } finally{

          this.loading = false;

        }

      },

      // It will authenticates the user using the redirect method

      loginWithRedirect(o){

        return this.auth0Client.loginWithRedirect(o);

      },

      // Returns all the claims present in the ID token

      getIdTokenClaims(o){

        return this.auth0Client.getIdTokenClaims(o);

      },

      // Return the access token. If the token is invalid or lost, a new token is obtained.

      getTokenSilently(o){

        return this.auth0Client.getTokenSilently(o);

      },

     // Obtain the access token through the pop-up window

      getTokenWithPopup(o){

        return this.auth0Client.getTokenWithPopup(o);

      },

      // Logs out the user and deletes their session from the authorization server

      logout(o){

        return this.auth0Client.logout(o);

      }

    },

    // Use following lifecycle method for instantiate the client SDK 

    async created(){

      // Create a new SDK client instance using the elements of the specified object.

      this.auth0Client = await createAuth0Client({

        domain: options.domain,

        client_id: options.clientId,

        audience: options.audience,

        redirect_uri: redirectUri

      });

      try{

        // When the user returns to the application after authentication...

        if (

          window.location.search.includes("code=") &&

          window.location.search.includes("state=")

        ){

          // handle redirection and get token

          const{ appState } = await this.auth0Client.handleRedirectCallback();

          // Pass appState to notify the subscriber that a redirect callback has occurred

          onRedirectCallback(appState);

        }

      } catch (e){

        this.error = e;

      } finally{

        // Initializes the internal authentication state as below

        this.isAuthenticated = await this.auth0Client.isAuthenticated();

        this.user = await this.auth0Client.getUser();

        this.loading = false;

      }

    }

  });

  return instance;

};

// Create a simple Vue plugin to render container objects throughout the application.

export const Auth0Plugin ={

  install(Vue, options){

    Vue.prototype.$auth = useAuth0(options);

  }

};

Make sure you are still in the events-app directory and add the following:

touch auth_config.json

Next, open the auth_config.json and add the following:

{

  "domain": "your-domain.auth0.com",

  "clientId": "yourclientid"

}

Next, open up auth_config.json and add the following:

{

  "domain": "your-domain.auth0.com",

  "clientId": "yourclientid"

}

Conclusion:

Here you are done with the Auth0 installation and configure the plugin.

Request a quote