This application is a starting point application for demos. It is based on the Vuejs 2 Authentication Tutorial created on the Auth0 blog.
- Install Visual Studio Code, the Insiders Edition is highly recommended.
- Ensure you have vue and nodemon globally installed
npm install -g @vue/cli nodemon
- Clone the repository
git clone https://github.com/NotMyself/securing-vue.git vue-example
- Change directory into the cloned repository
cd vue-example
- Open the workspace
code vue-example.code-workspace
- Open the integrated terminal in code Ctrl+`
- Run the init script
./script/init
- Register for Application Keys
- Set the Allowed Callback URLs, Allowed Web Origins and Allowed Logout Urls to
http://localhost:8080
- Set the Allowed Callback URLs, Allowed Web Origins and Allowed Logout Urls to
- Update /client/.env with the appropriate values.
- Register an API
- Set the Identifier to
https://startup-battle
- Set the Identifier to
- Update /server/.env with the appropriate values.
- Run the start script
./script/start
This will start both the backend server and the front end client. To quit use Ctrl+C.
This project has a set of suggested extensions for Visual Studio Code. They are intended to make the development experience on the code base easier.
- dotENV - .env syntax highlighting
- ESLint - Integrates ESLint into VS Code
- Import Cost - Show the file size cost of your imports
- Prettier - Code formatter - VS Code package to format your JavaScript / TypeScript / CSS using Prettier.
- Vetur - Vue tooling for VS Code
- REST Client - REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
This project has a set of editor settings for Visual Studio Code. They are related to the suggested extension and wire up some automated code formatting.
{
"[javascript]": {
"editor.formatOnSave": true
},
"prettier.eslintIntegration": true,
}
Combined these settings will cause the prettier code formatter to run on save as well as configure prettier to respect eslint defined rules.
You can open the example.http
file in the server
directory to test the api with rest-client. If you accepted the workspace suggested extensions, it should already be installed.
Simply, click the Send Request
link above the API call you want to make.
Did you get this link from seeing a presentation I did on Securing Vue.js with OpenID Connect and OAuth2? Here are some further reading materials for the presentation.
- Slide Deck
- OWASP HTML5 Security - Local Storage
- OAuth 2.0 for Browser-Based Apps
- Announcing the General Availability of the Auth0 SPA JS SDK
- Auth0 SPA SDK Docs
Here is a recording of this presentation given at Armada JS 2019. Feel free to share with your team.
Securing Vue.js with OpenID Connect and OAuth by Bobby Johnson
If you would like to get some hands on experience using OAuth and OIDC, check out these self-paced labs that cover: web signin, calling an api, mobile applications and single page applications!