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.