Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

Vue Example

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.

Rest Client Usage

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.

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!

About

A Vue.js example application for demos.

Topics

Resources

Releases

No releases published

Packages

No packages published