lkjx77/securing-vue

A Vue.js example application for demos.

Vue.js Example Application

This application is a starting point application for demos. It is based on the Vuejs 2 Authentication Tutorial created on the Auth0 blog.

Getting Started

1. Install Visual Studio Code, the Insiders Edition is highly recommended.
2. Ensure you have vue and nodemon globally installed npm install -g @vue/cli nodemon
3. Clone the repository git clone https://github.com/NotMyself/securing-vue.git vue-example
4. Change directory into the cloned repository cd vue-example
5. Open the workspace code vue-example.code-workspace
6. Open the integrated terminal in code Ctrl+`
7. Run the init script ./script/init
8. Register for Application Keys
   • Set the Allowed Callback URLs, Allowed Web Origins and Allowed Logout Urls to http://localhost:8080
9. Update /client/.env with the appropriate values.
10. Register an API
    • Set the Identifier to https://startup-battle
11. Update /server/.env with the appropriate values.
12. Run the start script ./script/start

This will start both the backend server and the front end client. To quit use Ctrl+C.

Suggested Code Extensions

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.

Editor Settings

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.

Testing the API

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.

Presentation Materials

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!

• Auth0 Identity Labs