https://github.com/notmyself/securing-vue

A Vue.js example application for demos.
https://github.com/notmyself/securing-vue

auth0 expressjs vscode vuejs

Last synced: about 12 hours ago
JSON representation

A Vue.js example application for demos.

• Host: GitHub
• URL: https://github.com/notmyself/securing-vue
• Owner: NotMyself
• Created: 2019-02-22T18:21:53.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T16:36:29.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T15:11:15.681Z (7 months ago)
• Topics: auth0, expressjs, vscode, vuejs
• Language: JavaScript
• Homepage: https://notmyself.livecoders.dev
• Size: 5.38 MB
• Stars: 11
• Watchers: 2
• Forks: 4
• Open Issues: 31
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue.js Example Application

This application is a starting point application for demos. It is based on the [Vuejs 2 Authentication Tutorial](https://auth0.com/blog/vuejs2-authentication-tutorial/) created on the Auth0 blog.

![Vue Example](/docs/images/screenshot.png?raw=true "Vue Example")

## Getting Started

1. Install [Visual Studio Code](https://code.visualstudio.com/), the [Insiders Edition](https://code.visualstudio.com/insiders) is highly recommended.

1. Ensure you have vue and nodemon globally installed `npm install -g @vue/cli nodemon`

1. Clone the repository `git clone https://github.com/NotMyself/securing-vue.git vue-example`

1. Change directory into the cloned repository `cd vue-example`

1. Open the workspace `code vue-example.code-workspace`

1. Open the integrated terminal in code Ctrl+`

1. Run the init script `./script/init`

1. [Register for Application Keys](https://auth0.com/docs/quickstart/spa/vuejs#get-your-application-keys)

    - Set the **Allowed Callback URLs**, **Allowed Web Origins** and **Allowed Logout Urls** to `http://localhost:8080`

1. Update **/client/.env** with the appropriate values.

1. [Register an API](https://auth0.com/docs/quickstart/backend/nodejs#create-an-api)

    - Set the **Identifier** to `https://startup-battle`

1. Update **/server/.env** with the appropriate values.

1. 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](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - .env syntax highlighting

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Integrates ESLint into VS Code

- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) - Show the file size cost of your imports

- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - VS Code package to format your JavaScript / TypeScript / CSS using Prettier.

- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) - Vue tooling for VS Code

- [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.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.

```json

{

  "[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](https://marketplace.visualstudio.com/items?itemName=humao.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](/docs/images/example.http.gif?raw=true "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.

- [Slide Deck](https://www.slideshare.net/secret/2keSpaXJYIWIq1)

- [OWASP HTML5 Security - Local Storage](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#local-storage)

- [OAuth 2.0 for Browser-Based Apps](https://tools.ietf.org/html/draft-parecki-oauth-browser-based-apps-02)

- [Announcing the General Availability of the Auth0 SPA JS SDK](https://community.auth0.com/t/announcing-the-general-availability-of-the-auth0-spa-js-sdk/27399)

- [Auth0 SPA SDK Docs](https://auth0.github.io/auth0-spa-js/index.html)

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](https://www.youtube.com/watch?v=r0BCki3U2AM)

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](https://auth0.com/docs/identity-labs/)