Vue Auth0 plugin
Vue CLI 4 Plugin for adding the files required for setting up Auth0 authentication.
Index
Pre-install
-
Sign-up and login to you Auth0 Dashboard: https://auth0.com/
-
Create an Auth0 Client/Application: Dashboard > Applications > Create Application
- Enter the name of your application.
- Select
Single Page Web Applications
- Press
Create
- Select
Settings
- Add
http://localhost:8080
to the following fields:- Allowed Callback URLs
- Allowed Web Origins
- Allowed Logout URLs
- Scroll down to the bottom and press
Save Changes
-
(Optional) Setup desired connections: Dashboard > Connections > Social
- Connections are third party services that can be used to authenticate with, for example:
- GitHub
- (WARNING) The default Google connection will let you login but won’t keep you logged in if you leave or refresh the website. this is a Auth0’s default connection and its just for testing purposes.
- Connections are third party services that can be used to authenticate with, for example:
Installation
- Run
vue add auth0
from your project's root folder. - Files Generated:
auth_config.json
: Stores Auth0's domain and clientId.src/auth/index.js
: Main Auth0 lib file containing authentication logic.src/auth/authGuard.js
: Can be used to protect private vue-router routes.src/views/Profile.vue
: A very simple profile component to be used with vue-router.
- Files Updated:
src/App.vue
src/main.js
src/router/index.js
Options
-
Have you configured an Auth0 client? If not, make sure to update auth_config.json afterwards
- Auth0 client domain? You can get this from the Application Settings page.
- Auth0 client ID? You can get this from the Application Settings page.
-
Would you like to use Vue Router? This is the recomended setup for most Apps.
- Use history mode for router? (Requires proper server setup for index fallback in production)
Usage
Contributing
Development
# Run a vue inside the dev containerdocker run --rm -it \-v "$(pwd)":/auth0 \-p 8080:8080 \kaizendorks/vue:4 sh# Create sample appvue create app# Change dir to project dircd app# Install pluginnpm install --save-dev file:/auth0# Run pluginvue invoke vue-cli-plugin-auth0# Install new deps, if you get any errors try rm -rf package-lock.jsonnpm install# Run appnpm run serve
CI
# Build imagedocker build -t auth0 .# Dgoss Tests (quick smoke test to check if files were generated)docker run --rm -it \-v "$(pwd)/tests":/src \-v /var/run/docker.sock:/var/run/docker.sock \iorubs/dgoss run auth0# Edit testsdocker run --rm -it \-v "$(pwd)/tests":/src \-v /var/run/docker.sock:/var/run/docker.sock \iorubs/dgoss edit auth0
Goss is tool for validating server’s configuration (avoid conf. drift). Dgoss is a wrapper written on top of goss for validating docker images. https://github.com/aelsabbahy/goss/tree/master/extras/dgoss