7. Implementation Steps for Adding Auth0 to the VueJS Project

Опубликовано: 04 Октябрь 2024
на канале: Dedicated Managers

2,314

In this video I discuss the steps needed to implement the Auth0 Universal Login functionality into the VueJS (with Vuetify) project.

IMPLEMENTATION STEPS
=====================

Configure Auth0 in Auth0.com Interface
Set Callback URLs

Add Auth0 Credentials to Environment Variables/Files
thanks to Vue CLI 3

Add Login Page & Logout Button
Hard Code “userIsAuthorized” in Vuex

Initial Routing Configuration
Add meta info to routes for protected pages
Configure Routing Logic (router.beforeEach)
- Allow login page & authorization callback page
- Check for protected page
- - - Hard code local “routerAuthCheck” variable (to be completed later)
- - - - Not Authorized: Redirect to login page
- - - - Authorized:
- - - - - - Commit “userIsAuthorized” variable placeholder
- - - - - - Allow page to load
- Default: Allow page to load

Vuex / Global “service” Configuration
Mutations
- Create “setUserIsAuthenticated” function
- Complete commit placeholder back in router
Actions
- Login
- Logout
- Complete Authentication

Complete Routing Configuration
Complete local “routerAuthCheck” functionality
- Depends on “Complete Authentication” action

This video is part of a playlist:
• VueJS Authentication with Auth0 - Usi...

I didn't commit to the repository for each video, but the final code can be found on the Dedicated Managers GitHub public repository:
https://github.com/DedicatedManagers/...