auth0-blog / vue-express-auth Goto Github PK

JavaScript 49.16% HTML 3.04% Vue 47.80%

vue-express-auth's Introduction

How to Make Secure HTTP Requests with Vue and Express

This is an example of how you can make secure API calls to an Express API from a Vue client. It uses Auth0 to secure the Express API and also to allow users to register and login to the Vue application.

You can clone this project and follow the directions below or check out the tutorial where I cover everything step by step!

Project setup

First, clone this repo and switch into the repo folder:

git clone [email protected]:auth0-blog/vue-express-auth.git
cd vue-express-auth

Now you need to install the dependencies for the client and server code.

Set up the Express server

cd server
npm install

Set up the Vue client

In a new terminal tab:

cd ../client
npm install

Configuring Auth0

You're going to use Auth0 to add authentication to the app.

First, sign up for a free Auth0 account. Once you're registered, you'll be taken to the Auth0 management dashboard.

Create the Auth0 application

Click on the big red button that says "Create Application".

Name it "Vue Events" (or anything you'd like), click on "Single Page Web Applications" for "application type", and press "Create".

Now click into "Settings" and fill in some information that Auth0 needs to configure authentication:

Allowed Callback URLs — http://localhost:8080

Allowed Logout URLs — http://localhost:8080

Allowed Web Origins — http://localhost:8080

Scroll down and click "Save Changes".

Create the Auth0 API

Next, click on "APIs" on the left menu. Click "Create API" and call it "Vue Express API" (or anything you'd like). For "Identifier", we recommend a URL such as https://vue-express-api.com. It doesn't have to be a publicly available URL and we'll never call it, it's just for naming purposes. You can leave "Signing algorithm" as is and then press "Create".

That's all you need from the dashboard for now, but don't click out yet. You'll need to pull some of these values from the dashboard into your application soon.

In the client directory, create a file for the config values:

touch auth_config.json

Important: Make sure you add auth_config.json to your .gitignore file!

Connecting with Auth0

Now open up auth_config.json and paste in:

{
  "domain": "your-domain.auth0.com",
  "clientId": "your-client-id",
  "audience": "https://your-identifier.com"
}

Finding your auth_config values:

Head to the Auth0 dashboard
Click on "APIs" and select your API
Copy the value for "Identifier" and paste it into audience in auth_config.json
Click on "Applications" and select your application (Vue Events)
Click on "Settings"
Copy the value for "Domain" and paste it into domain in auth_config.json
Copy the value for "Client ID" and paste it into clientId in auth_config.json

Now you should be able to sign in to the application, but you still won't be able to access single event details because you need to add this information to the server side where the API access token is validated.

Open up server/server.js and find:

const authConfig = {
    domain: "YOUR-DOMAIN",
    audience: "YOUR-IDENTIFIER"
};

Replace the domain and audience placeholders with the values listed above.

Testing the app

Now that everything is set up, you can test the app.

Run the server

Make sure you're in the server directory in your terminal and start the server with:

npm start

Server is running at http://localhost:8000.

Run the client

In your other tab, make sure you're in client and run:

npm run serve

You can view the Vue app in the browser at http://localhost:8080.

You can now also sign in, receive an API access token, and view an event's details page at http://localhost:8080/event/1.

Be sure to check out the full tutorial to see how this process works.

vue-express-auth's People

Contributors

Stargazers

Watchers

Forkers

jeanphilippeds jokerbm joannajjliu edshuli pixelraptor andymaderna wmuza hack-a-noob alendrelopes martin-a-santos tropee-nft kimieatscode

vue-express-auth's Issues

Hamburger Menu Broken

On making the page smaller, the hamburger menu appears, but clicking on it doesn't do anything.

bug

if you refresh after signing up you lose the login session and parts of the page break (login button is gone)

clicking sign up again yields


[Vue warn]: Error in v-on handler: "TypeError: this.auth0Client is null"

found in

---> <Home> at src/views/Home.vue
       <App> at src/A

Errors with latest?

Hi!

Sorry, this question is going to be a bit vague, mostly because I honestly don't know where to go next. I followed this tutorial here (https://auth0.com/blog/how-to-make-secure-http-requests-with-vue-and-express/) and everything worked up to the nearly last entry. Now, I'm getting these errors:

ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(44,10):
44:10 Property 'getEventData' does not exist on type '{ name: string; data(): { event: {}; }; created(): void; methods: { getEventData(): Promise<void>; }; }'.
    42 |   },
    43 |   created() {
  > 44 |     this.getEventData(); // NEW - call getEventData() when the instance is created
       |          ^
    45 |   },
    46 | methods: {
    47 |   async getEventData() {
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(49,36):
49:36 Property '$auth' does not exist on type '{ getEventData(): Promise<void>; }'.
    47 |   async getEventData() {
    48 |     // Get the access token from the auth wrapper
  > 49 |     const accessToken = await this.$auth.getTokenSilently()
       |                                    ^
    50 | 
    51 |     // Use the eventService to call the getEventSingle method
    52 |     EventService.getEventSingle(this.$route.params.id, accessToken)
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(52,38):
52:38 Property '$route' does not exist on type '{ getEventData(): Promise<void>; }'.
    50 | 
    51 |     // Use the eventService to call the getEventSingle method
  > 52 |     EventService.getEventSingle(this.$route.params.id, accessToken)
       |                                      ^
    53 |     .then(
    54 |       (event => {
    55 |         this.$set(this, "event", event);
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(55,14):
55:14 Property '$set' does not exist on type '{ getEventData(): Promise<void>; }'.
    53 |     .then(
    54 |       (event => {
  > 55 |         this.$set(this, "event", event);
       |              ^
    56 |       }).bind(this)
    57 |     );
    58 |   }

Here's my tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
"noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "resolveJsonModule": true,
    "types": [
      "webpack-env",
      "jest"
    ],
    "typeRoots": ["./@types", "./node_modules/@types"],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost","es2015", "es2016", "es2018.promise"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

I'm not incredibly familiar with TypeScript, Javascript, etc, and I've been poking around at various ways to solve this - https://blog.risingstack.com/auth0-vue-typescript-quickstart-docs/ and https://auth0.com/docs/quickstart/spa/vuejs/01-login.

My GUESS is that the Vue object prototype is not being extended with the Auth0 plug-in, and it's something about the way the frameworks have changed since this tutorial was written. Any suggestions? Happy to paste in more info if it helps.

Thanks!

(I posted this on stackoverflow as well - https://stackoverflow.com/questions/70147602/methods-not-being-attached-detected-as-part-of-typescript-compilation)