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.
