{"id":13880790,"url":"https://github.com/auth0/auth0-vue","last_synced_at":"2025-05-15T13:05:02.677Z","repository":{"id":37803570,"uuid":"49090270","full_name":"auth0/auth0-vue","owner":"auth0","description":"Auth0 authentication SDK for Vue.js apps","archived":false,"fork":false,"pushed_at":"2025-04-15T20:01:08.000Z","size":4474,"stargazers_count":149,"open_issues_count":29,"forks_count":27,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-05-04T22:38:38.299Z","etag":null,"topics":["auth0","authentication","dx-sdk","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/auth0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-01-05T20:16:31.000Z","updated_at":"2025-04-27T08:27:39.000Z","dependencies_parsed_at":"2024-10-03T09:01:15.309Z","dependency_job_id":"450e8d85-2612-4937-b13c-96616b4badf8","html_url":"https://github.com/auth0/auth0-vue","commit_stats":{"total_commits":252,"total_committers":18,"mean_commits":14.0,"dds":0.5595238095238095,"last_synced_commit":"1bc58348b7fb3d13bb00ee0160521fc04739e4be"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auth0%2Fauth0-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auth0%2Fauth0-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auth0%2Fauth0-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auth0%2Fauth0-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/auth0","download_url":"https://codeload.github.com/auth0/auth0-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254346624,"owners_count":22055808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auth0","authentication","dx-sdk","vue","vuejs"],"created_at":"2024-08-06T08:03:29.088Z","updated_at":"2025-05-15T13:05:02.627Z","avatar_url":"https://github.com/auth0.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Developer Ecosystem"],"sub_categories":[],"readme":"![Auth0 SDK for Vue 3 Single Page Applications](https://cdn.auth0.com/website/sdks/banners/auth0-vue-banner.png)\n\n![Release](https://img.shields.io/npm/v/@auth0/auth0-vue)\n[![Codecov](https://codecov.io/gh/auth0/auth0-vue/branch/main/graph/badge.svg)](https://codecov.io/gh/auth0/auth0-vue)\n![Downloads](https://img.shields.io/npm/dw/@auth0/auth0-vue)\n[![License](https://img.shields.io/:license-mit-blue.svg?style=flat)](https://opensource.org/licenses/MIT)\n[![CircleCI](https://img.shields.io/circleci/build/github/auth0/auth0-vue)](https://circleci.com/gh/auth0/auth0-vue)\n\n📚 [Documentation](#documentation) - 🚀 [Getting Started](#getting-started) - 💻 [API Reference](#api-reference) - 💬 [Feedback](#feedback)\n\n## Documentation\n\n- [Quickstart](https://auth0.com/docs/quickstart/spa/vuejs) - our interactive guide for quickly adding login, logout and user information to a Vue 3 app using Auth0.\n- [Sample App](https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login) - a full-fledged Vue 3 application integrated with Auth0.\n- [FAQs](https://github.com/auth0/auth0-vue/tree/main/FAQ.md) - frequently asked questions about the auth0-vue SDK.\n- [Examples](https://github.com/auth0/auth0-vue/tree/main/EXAMPLES.md) - code samples for common Vue 3 authentication scenario's.\n- [Docs site](https://www.auth0.com/docs) - explore our docs site and learn more about Auth0.\n\n## Getting started\n\n### Requirements\n\nThis library supports **Vue 3** applications.\nFor integrating Auth0 with a Vue 2 application, please read [the Vue 2 Tutorial](https://github.com/auth0/auth0-vue/blob/main/tutorial/vue2-login.md).\n\n### Installation\n\nUsing [npm](https://npmjs.org):\n\n```sh\nnpm install @auth0/auth0-vue\n```\n\nUsing [yarn](https://yarnpkg.com):\n\n```sh\nyarn add @auth0/auth0-vue\n```\n\n### Configure Auth0\n\nCreate a **Single Page Application** in the [Auth0 Dashboard](https://manage.auth0.com/#/applications).\n\n\u003e **If you're using an existing application**, verify that you have configured the following settings in your Single Page Application:\n\u003e\n\u003e - Click on the \"Settings\" tab of your application's page.\n\u003e - Scroll down and click on the \"Show Advanced Settings\" link.\n\u003e - Under \"Advanced Settings\", click on the \"OAuth\" tab.\n\u003e - Ensure that \"JsonWebToken Signature Algorithm\" is set to `RS256` and that \"OIDC Conformant\" is enabled.\n\nNext, configure the following URLs for your application under the \"Application URIs\" section of the \"Settings\" page:\n\n- **Allowed Callback URLs**: `http://localhost:3000`\n- **Allowed Logout URLs**: `http://localhost:3000`\n- **Allowed Web Origins**: `http://localhost:3000`\n\n\u003e These URLs should reflect the origins that your application is running on. **Allowed Callback URLs** may also include a path, depending on where you're handling the callback (see below).\n\nTake note of the **Client ID** and **Domain** values under the \"Basic Information\" section. You'll need these values in the next step.\n\n### Configure the SDK\n\nCreate an instance of the `Auth0Plugin` by calling `createAuth0` and pass it to Vue's `app.use()`.\n\n```js\nimport { createAuth0 } from '@auth0/auth0-vue';\n\nconst app = createApp(App);\n\napp.use(\n  createAuth0({\n    domain: '\u003cAUTH0_DOMAIN\u003e',\n    clientId: '\u003cAUTH0_CLIENT_ID\u003e',\n    authorizationParams: {\n      redirect_uri: '\u003cMY_CALLBACK_URL\u003e'\n    }\n  })\n);\n\napp.mount('#app');\n```\n\n### Add login to your application\n\nIn order to add login to your application you can use the `loginWithRedirect` function that is exposed on the return value of `useAuth0`, which you can access in your component's `setup` function.\n\n```html\n\u003cscript\u003e\n  import { useAuth0 } from '@auth0/auth0-vue';\n\n  export default {\n    setup() {\n      const { loginWithRedirect } = useAuth0();\n\n      return {\n        login: () =\u003e {\n          loginWithRedirect();\n        }\n      };\n    }\n  };\n\u003c/script\u003e\n```\n\nOnce setup returns the correct method, you can call that method from your component's HTML.\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton @click=\"login\"\u003eLog in\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eUsing Options API\u003c/summary\u003e\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton @click=\"login\"\u003eLog in\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    methods: {\n      login() {\n        this.$auth0.loginWithRedirect();\n      }\n    }\n  };\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\nFor more code samples on how to integrate the **auth0-vue** SDK in your **Vue 3** application, have a look at our [examples](https://github.com/auth0/auth0-vue/tree/main/EXAMPLES.md).\n\n## API reference\n\nExplore public API's available in auth0-vue.\n\n- [createAuth0](https://auth0.github.io/auth0-vue/functions/createAuth0.html)\n- [createAuthGuard](https://auth0.github.io/auth0-vue/functions/createAuthGuard.html)\n- [useAuth0](https://auth0.github.io/auth0-vue/functions/useAuth0.html)\n- [Auth0PluginOptions](https://auth0.github.io/auth0-vue/interfaces/Auth0PluginOptions.html)\n- [Auth0VueClientOptions](https://auth0.github.io/auth0-vue/interfaces/Auth0VueClientOptions.html)\n- [Auth0VueClient](https://auth0.github.io/auth0-vue/interfaces/Auth0VueClient.html)\n\n## Feedback\n\n### Contributing\n\nWe appreciate feedback and contribution to this repo! Before you get started, please see the following:\n\n- [Auth0's general contribution guidelines](https://github.com/auth0/open-source-template/blob/master/GENERAL-CONTRIBUTING.md)\n- [Auth0's code of conduct guidelines](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md)\n- [This repo's contribution guide](https://github.com/auth0/auth0-vue/blob/main/CONTRIBUTING.md)\n\n### Raise an issue\n\nTo provide feedback or report a bug, please [raise an issue on our issue tracker](https://github.com/auth0/auth0-vue/issues).\n\n### Vulnerability Reporting\n\nPlease do not report security vulnerabilities on the public GitHub issue tracker. The [Responsible Disclosure Program](https://auth0.com/responsible-disclosure-policy) details the procedure for disclosing security issues.\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://cdn.auth0.com/website/sdks/logos/auth0_light_mode.png\"   width=\"150\"\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://cdn.auth0.com/website/sdks/logos//auth0_dark_mode.png\" width=\"150\"\u003e\n    \u003cimg alt=\"Auth0 Logo\" src=\"https://cdn.auth0.com/website/sdks/logos/auth0_light_mode.png\" width=\"150\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eAuth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout \u003ca href=\"https://auth0.com/why-auth0\"\u003eWhy Auth0?\u003c/a\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nThis project is licensed under the MIT license. See the \u003ca href=\"https://github.com/auth0/auth0-vue/blob/main/LICENSE\"\u003e LICENSE\u003c/a\u003e file for more info.\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauth0%2Fauth0-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fauth0%2Fauth0-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauth0%2Fauth0-vue/lists"}