https://github.com/BBarbour-Dev/vue-express-auth0

Express app that serves up Vue.js app. Uses Auth0 for client side auth and to protect api routes.
https://github.com/BBarbour-Dev/vue-express-auth0

Last synced: 16 days ago
JSON representation

Express app that serves up Vue.js app. Uses Auth0 for client side auth and to protect api routes.

• Host: GitHub
• URL: https://github.com/BBarbour-Dev/vue-express-auth0
• Owner: BBarbour-Dev
• Created: 2019-10-02T20:06:50.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T11:59:44.000Z (over 1 year ago)
• Last Synced: 2024-02-24T11:38:01.591Z (4 months ago)
• Language: JavaScript
• Homepage: https://vue-express-auth0.herokuapp.com/
• Size: 2.18 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 31
• Metadata Files:
  • Readme: README.md

Lists

• awesome-stars - BBarbour-Dev/vue-express-auth0 - Express app that serves up Vue.js app. Uses Auth0 for client side auth and to protect api routes. (JavaScript)

README

        
# vue-express-auth0

## Live Version: [https://vue-express-auth0.herokuapp.com/](https://vue-express-auth0.herokuapp.com/)

This app I created to experiment with using Auth0 on the front end and back end, to secure my SPA routes and also my api routes. For most of it, I followed the examples found in the Auth0 doucmentation. It turned out to be inuitive.

I plan to use this as a boilerplate for future apps I build myself. You are welcome to use it that way as well. However, there are a few important caveats that I will cover about how it's configured.

## Getting Started

`npm install` in the root folder and then the `client` folder, as they have separate node_modules and packages.

To run the dev environment run `npm run client-dev` in one terminal and `npm run server-dev` in another terminal.

## Server/Client

When running the dev environment, the client runs on `localhost:8080` on a webpack server, which bundles your Vue files and hot module reloads. The express server runs on `localhost:5000`, which provides the `/api` routes. It is being monitored and watched by `nodemon` and will reload after changes too.

There's a proxy setup through `vue.config.js` that redirects to `localhost:5000`, to simulate how things work during production.

To deploy make sure to `npm run build`, which runs the build script in the client folder. It will create a `public` directory inside of the server folder with the static files and assets.

`npm run start` will fire up the production app.

Hititng the`/api/restricted` route with a token provided by the Auth0 client puts it through the Auth0 middleware before resolving the endpoint logic. That's how you use Auth0 to seucre your api routes.

## Auth0 Config

You will need to create an app and an api in your Auth0 dashboard to get the settings. Read through the Quick Start for Vue.js as that's what I used to make this example.

I would add http://localhost:8080, and http://localhost:5000 to your callback, allowed web origins, and logout URLs.

## Env Variables

There are two `.env` files, one in the `client` folder with the VUE*APP* vars and other in the root folder for server vars.

### Server

```

AUTH0DOMAIN= *get info from Auth0 dashboard*

AUTH0AUDIENCE= *get info from Auth0 dashboard*

```

### Client

```

VUE_APP_AUTH0DOMAIN= *get info from Auth0 dashboard*

VUE_APP_AUTH0CLIENTID= *get info from Auth0 dashboard*

VUE_APP_AUTH0AUDIENCE= *get info from Auth0 dashboard*

```