{"id":20196291,"url":"https://github.com/authorizerdev/authorizer-vue","last_synced_at":"2025-07-11T14:14:45.520Z","repository":{"id":59165624,"uuid":"532943405","full_name":"authorizerdev/authorizer-vue","owner":"authorizerdev","description":"Vue SDK for [authorizer.dev](https://authorizer.dev/)","archived":false,"fork":false,"pushed_at":"2024-05-10T08:58:30.000Z","size":405,"stargazers_count":6,"open_issues_count":4,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-14T18:36:01.498Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/authorizerdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-05T14:47:22.000Z","updated_at":"2025-02-11T21:31:36.000Z","dependencies_parsed_at":"2024-05-10T09:51:17.731Z","dependency_job_id":"03e6ccfd-f604-4658-a567-2bee82f2c067","html_url":"https://github.com/authorizerdev/authorizer-vue","commit_stats":{"total_commits":144,"total_committers":2,"mean_commits":72.0,"dds":0.00694444444444442,"last_synced_commit":"5cd64fc498a1b8c8bf605987160e179104b0ebd1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/authorizerdev%2Fauthorizer-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/authorizerdev%2Fauthorizer-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/authorizerdev%2Fauthorizer-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/authorizerdev%2Fauthorizer-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/authorizerdev","download_url":"https://codeload.github.com/authorizerdev/authorizer-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241329405,"owners_count":19944984,"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":["hacktoberfest"],"created_at":"2024-11-14T04:23:10.185Z","updated_at":"2025-03-03T08:14:06.415Z","avatar_url":"https://github.com/authorizerdev.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# authorizer-vue\n\nAuthorizer Vue SDK allows you to implement authentication in your [Vue](https://vuejs.org/) application quickly. It also allows you to access the user profile.\n\nHere is a quick guide on getting started with `@authorizerdev/authorizer-vue` package.\n\n\u003c!-- Todo: update code sandbox link --\u003e\n\n## Code Sandbox Demo: https://codesandbox.io/s/authorizer-vue-example-700l1h\n\n## Step 1 - Create Instance\n\nGet Authorizer URL by instantiating [Authorizer instance](/deployment) and configuring it with necessary [environment variables](/core/env).\n\n## Step 2 - Install package\n\nInstall `@authorizerdev/authorizer-vue` library\n\n```sh\nnpm i --save @authorizerdev/authorizer-vue\nOR\nyarn add @authorizerdev/authorizer-vue\n```\n\n## Step 3 - Configure Provider and use Authorizer Components\n\nAuthorizer comes with a [Provider](https://vuejs.org/api/composition-api-dependency-injection.html#provide) component that exposes a composable function to return a [reactive](https://vuejs.org/api/reactivity-core.html#reactive) context to it's children by using the `useAuthorizer` injection key, internally [toRefs](https://vuejs.org/api/reactivity-utilities.html#torefs) are used when returning the reactive state so that the consuming component(s) can destructure/spread the returned object without losing reactivity and each property could be watched to perform actions accordingly.\n\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv :style=\"{ display: 'flex', justifyContent: 'center' }\"\u003e\n\t\t\u003cauthorizer-provider\n\t\t\t:config=\"{\n\t\t\t\tauthorizerURL: 'http://localhost:8080',\n\t\t\t\tredirectURL: window.location.origin,\n\t\t\t\tclientID: 'AUTHORIZER_CLIENT_ID'\n\t\t\t}\"\n\t\t\t:onStateChangeCallback=\"stateChangeCallback\"\n\t\t\u003e\n\t\t\t\u003crouter-view /\u003e\n\t\t\u003c/authorizer-provider\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { AuthorizerProvider } from '@authorizerdev/authorizer-vue';\nimport type { AuthorizerState } from '@authorizerdev/authorizer-vue/dist/types/types';\n\nexport default {\n\tcomponents: {\n\t\t'authorizer-provider': AuthorizerProvider\n\t},\n\tsetup() {\n\t\tconst stateChangeCallback = (state: AuthorizerState) =\u003e {\n\t\t\tconsole.log('state changed ==\u003e\u003e ', state);\n\t\t};\n\t\treturn {\n\t\t\tstateChangeCallback,\n\t\t\twindow\n\t\t};\n\t}\n};\n\u003c/script\u003e\n```\n\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003ch1 :style=\"{ textAlign: 'center' }\"\u003eWelcome to Authorizer\u003c/h1\u003e\n\t\t\u003cbr /\u003e\n\t\t\u003cauthorizer-root :onLogin=\"onLogin\" /\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { inject, watch } from 'vue';\nimport { useRouter } from 'vue-router';\nimport { AuthorizerRoot } from '@authorizerdev/authorizer-vue';\nimport type { AuthorizerContextOutputType } from '@authorizerdev/authorizer-vue/dist/types/types';\n\nexport default {\n\tname: 'Login',\n\tcomponents: {\n\t\t'authorizer-root': AuthorizerRoot\n\t},\n\tsetup() {\n\t\tconst useAuthorizer = inject('useAuthorizer') as () =\u003e AuthorizerContextOutputType;\n\t\tconst { token, config } = useAuthorizer?.();\n\t\tconst router = useRouter();\n\t\tconst onLogin = () =\u003e {\n\t\t\tconsole.log('test login');\n\t\t};\n\t\twatch(\n\t\t\ttoken,\n\t\t\t(newvalue) =\u003e {\n\t\t\t\tif (newvalue) {\n\t\t\t\t\tconsole.log('access token ==\u003e\u003e ', token?.value?.access_token);\n\t\t\t\t\trouter.push('/dashboard');\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\timmediate: true\n\t\t\t}\n\t\t);\n\t\tconfig \u0026\u0026\n\t\t\twatch(config.is_basic_authentication_enabled, (newvalue, oldvalue) =\u003e {\n\t\t\t\tconsole.log('basic auth enabled (old value) ==\u003e\u003e ', oldvalue);\n\t\t\t\tconsole.log('basic auth enabled (new value) ==\u003e\u003e ', newvalue);\n\t\t\t});\n\t\treturn {\n\t\t\tonLogin\n\t\t};\n\t}\n};\n\u003c/script\u003e\n```\n\n## Commands\n\n### Local Development\n\n### The recommended workflow is to run authorizer in one terminal:\n\n```bash\nnpm run dev # or yarn dev\n```\n\nThis starts a local dev-server with a sandbox environment.\n\n```bash\nnpm run build # or yarn build\n```\n\nThis uses Vite to build the project files to `/dist` and call `build:types` script.\n\n```bash\nnpm run build:types # or yarn build:types\n```\n\nThis generates TypeScript declaration files for our .vue files (using `vue-tsc`).\n\n```bash\nnpm run typecheck # or yarn typecheck\n```\n\nThis runs a typecheck against our Vue components to make sure there are no type errors (using `vue-tsc`).\n\n## Configuration\n\n### Typescript:\n\n- Root tsconfig: `tsconfig.json` contains a reference to all the others tsconfig files.\n- Components tsconfig: `tsconfig.app.json` will take care of compiling our Vue components inside `src/`.\n- Build-types tsconfig: `tsconfig.build-types.json` will take care of generating the proper types declaration files of our Vue components inside `src/`.\n- Tools tsconfig: `tsconfig.config.json` will take care of all our tooling configuration files (we only have vite at the moment).\n\n### Vite:\n\n- Vite requires a configuration to compile and bundle `.vue` to `.js` files that can be consumed through an npm module. It uses [rollup.js](https://rollupjs.org/) under the hood, check out the comments in `vite.config.ts` file in the project root to learn more about the configuarition details.\n\n### Eslint:\n\n- All required linting configurations are specified in the `.elsintrc.json` file in the project root, check the comments in each section to learn more about the configuarition details.\n\n### Prettier:\n\n- We have the `\"usePrettierrc\"` option set to true in the `eslint` configuration file which tells the `prettier-vue` plugin to use the Prettier configuration file `.prettierrc` in the project root directory and override any default settings.\n\n### Husky:\n\n- A pre-commit hook is set in `.husky/pre-commit` which formats the code and checks for any linting errors.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauthorizerdev%2Fauthorizer-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fauthorizerdev%2Fauthorizer-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauthorizerdev%2Fauthorizer-vue/lists"}