{"id":16682750,"url":"https://github.com/gravitano/vue-auth","last_synced_at":"2025-04-09T23:14:27.963Z","repository":{"id":57792193,"uuid":"406276116","full_name":"gravitano/vue-auth","owner":"gravitano","description":"Authentication library for Vue 3","archived":false,"fork":false,"pushed_at":"2022-08-23T09:54:29.000Z","size":218,"stargazers_count":7,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T23:14:22.123Z","etag":null,"topics":["authentication","axios","vue","vue-auth"],"latest_commit_sha":null,"homepage":"https://vue-auth-demo.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gravitano.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-14T07:56:11.000Z","updated_at":"2025-01-19T19:32:09.000Z","dependencies_parsed_at":"2022-08-25T21:53:05.454Z","dependency_job_id":null,"html_url":"https://github.com/gravitano/vue-auth","commit_stats":null,"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravitano%2Fvue-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravitano%2Fvue-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravitano%2Fvue-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravitano%2Fvue-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gravitano","download_url":"https://codeload.github.com/gravitano/vue-auth/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125589,"owners_count":21051770,"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":["authentication","axios","vue","vue-auth"],"created_at":"2024-10-12T14:08:24.570Z","updated_at":"2025-04-09T23:14:27.935Z","avatar_url":"https://github.com/gravitano.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Auth\n\n\u003e Authentication Plugin for Vue 3\n\n- [Auth](#auth)\n  - [Demo](#demo)\n  - [Dependencies](#dependencies)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [Use as Vue Plugin](#use-as-vue-plugin)\n    - [Use with Composition API](#use-with-composition-api)\n      - [`login(payload: Object): Promise\u003cAxiosResponse\u003e`](#loginpayload-object-promiseaxiosresponse)\n      - [`fetchUser(): Promise\u003cAxiosResponse\u003e`](#fetchuser-promiseaxiosresponse)\n      - [`setToken(tokenData: string): void`](#settokentokendata-string-void)\n      - [`setUser(userData: Object): void`](#setuseruserdata-object-void)\n      - [`logout(): boolean`](#logout-boolean)\n      - [`forceLogout(): boolean`](#forcelogout-boolean)\n      - [`user: Object`](#user-object)\n      - [`loggedIn: boolean`](#loggedin-boolean)\n    - [Manually Creating The Auth Function](#manually-creating-the-auth-function)\n  - [Default Options](#default-options)\n  - [Options](#options)\n    - [`endpoints`](#endpoints)\n    - [`token`](#token)\n    - [`user`](#user)\n    - [`moduleName`](#modulename)\n    - [`expiredStorage`](#expiredstorage)\n    - [`redirect`](#redirect)\n    - [`registerAxiosInterceptors`](#registeraxiosinterceptors)\n    - [`storage`](#storage)\n  - [Implementing Refresh Token](#implementing-refresh-token)\n    - [Refresh Token Options](#refresh-token-options)\n      - [`enabled`](#enabled)\n      - [`property`](#property)\n      - [`maxAge`](#maxage)\n      - [`storageName`](#storagename)\n      - [`name`](#name)\n      - [`autoLogout`](#autologout)\n  - [License](#license)\n\n## Demo\n\n- Checkout online demo [here](https://vue-auth-demo.vercel.app/)\n- View example project [here](https://github.com/gravitano/volar-starter)\n\n## Dependencies\n\n- [axios](https://github.com/axios/axios): Used as the default http client.\n- [Vuex](https://next.vuex.vuejs.org/): Used to store auth `state`.\n- [Vou Router](https://next.vuex.vuejs.org/): Used to redirect between pages.\n- [TypeScript](https://www.typescriptlang.org/): Written in TypeScript, optimize for Vue + TypeScript. But, also ship ESM and Common JS version on `dist`. \n\n\n## Installation\n\nInstall the package just like regular npm package.\n\n```bash\nnpm i @gravitano/vue-auth\n# OR\nyarn add @gravitano/vue-auth\n```\n\n## Usage\n\n### Use as Vue Plugin\n\nInstall the plugin to your Vue app.\n\n```js\n// main.js\nimport {createApp} from 'vue';\nimport Auth from '@gravitano/vue-auth'; // 👈 import the plugin\nimport store from '~/store'\nimport router from '~/router'\nimport axios from 'axios'\n\nconst app = createApp(App);\n\napp.use(Auth); // 👈 use the plugin\n\n// or with custom options\n// 👇\napp.use(Auth, {\n  options, // auth options\n  store, // vuex store instance\n  axios, // axios instance\n  router // vue router instance\n}); // 👈 use the plugin\n\napp.mount('#app');\n```\n\nAfter that, you can access the plugin via `$auth` global property.\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv v-if=\"$auth.loggedIn\"\u003eLogged In as : {{ $auth.user.name }}\u003c/div\u003e\n\u003c/template\u003e\n```\n\nIf you are using composition API, you can also access the `auth` object by using `inject` method.\n\n```js\nimport {injectAuth} from '@gravitano/vue-auth'\n\n// user is Ref\nconst {user} = injectAuth()\n\n// access the user\nconsole.log(user)\n```\n\n### Use with Composition API\n\nTo use the auth in composition API, just import and use the `useAuth` function.\n\n```ts\nimport {useAuth} from '@gravitano/vue-auth';\n\nconst auth = useAuth();\n\n// OR with object destruction\nconst {user} = useAuth();\n```\n\n#### `login(payload: Object): Promise\u003cAxiosResponse\u003e`\n\nLogin the user and save token to the auth storage.\n\n```js\nauth.login({\n  email: 'admin@example.com',\n  password: 'admin',\n});\n```\n\n#### `fetchUser(): Promise\u003cAxiosResponse\u003e`\n\nFetch user data from API.\n\n```js\nconst user = await auth.fetchUser();\nconsole.log(user);\n```\n\n#### `setToken(tokenData: string): void`\n\nManually Set User Token.\n\n```js\nauth.setToken(token);\n```\n\n#### `setUser(userData: Object): void`\n\nManually set the user data.\n\n```js\nconst userData = {\n  id: 1,\n  name: 'Admin',\n};\n\nauth.setUser(userData);\n```\n\n#### `logout(): boolean`\n\nLogout the current user.\n\n```js\nauth.logout();\n```\n\n#### `forceLogout(): boolean`\n\nForce logout the current user.\n\n```js\nauth.forceLogout();\n```\n\n#### `user: Object`\n\nGet the current user data.\n\n```js\nconsole.log(auth.user);\n```\n\n#### `loggedIn: boolean`\n\nGet the current logged in state.\n\n```js\nconsole.log(auth.loggedIn);\n```\n\n\n### Manually Creating The Auth Function\n\nFirst, create `auth.ts` file under your `src/plugins` folder.\n```ts\nimport {authOptions} from '~/config';\nimport store, {AppRootState} from '~/store';\nimport {createAuth} from '@gravitano/vue-auth';\nimport axios from 'axios';\nimport router from '~/router';\n\nexport const useAuth = () =\u003e createAuth\u003cAppRootState\u003e(authOptions, axios, store, router);\n```\n\nThen, in your component, just import and use it as regular composition function. For example:\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport {useAuth} from '~/plugins/auth'\n\n// destruct user object from `useAuth` function\nconst {user} = useAuth();\n\nconsole.log(user); // \u003c-- user data\n\u003c/script\u003e\n```\n\n## Default Options\n\nThis is the default options object:\n\n```ts\nimport { AuthOptions } from '@gravitano/vue-auth'\n\nexport const defaultOptions: AuthOptions = {\n  endpoints: {\n    login: {\n      url: '/auth/login',\n      method: 'post',\n    },\n    logout: {\n      url: '/auth/logout',\n      method: 'delete',\n    },\n    user: {\n      url: '/auth/me',\n      method: 'get',\n    },\n  },\n  token: {\n    property: 'data.token',\n    type: 'Bearer',\n    storageName: 'auth.token',\n    autoDecode: false,\n    name: 'Authorization',\n  },\n  user: {\n    autoFetch: true,\n    property: 'data',\n    storageName: 'auth.user',\n  },\n  moduleName: 'auth',\n  expiredStorage: 'auth.expired',\n  redirect: {\n    home: '/',\n    login: '/auth/login',\n  },\n  registerAxiosInterceptors: true,\n  storage: {\n    driver: 'secureLs', // supported: cookie, local, secureLs (secure local storage)\n  },\n};\n```\n\n\n## Options\n\n### `endpoints`\n\n- #### `login`\n  - `url`: Login path. E.g. `/user/login`\n  - `method`: HTTP Method. E.g. `GET`, `POST`, etc.\n- #### `logout`\n  - `url`: Logout path. E.g. `/user/logout`\n  - `method`: HTTP Method. E.g. `GET`, `POST`, etc.\n- #### `user`\n  - `url`: Endpoint for getting user data. E.g. `/my/profile`\n  - `method`: HTTP Method. E.g. `GET`, `POST`, etc.\n\n### `token`\n\n- #### `property`\n  Token property path using dot notation.\n  - Type: `string`\n  - Default: `data.token`\n- #### `type`\n  Token type.\n  - Type: `string`\n  - Default: `Bearer`\n- #### `storageName`\n  Token storage name.\n  - Type: `string`\n  - Default: `auth.token`\n- #### `autoDecode`\n  Auto decodes token when possible. Usually used when using JWT Token.\n  - Type: `boolean`\n  - Default: `true`\n- #### `name`\n  Token header name.\n  - Type: `string`\n  - Default:`Authorization`\n\n### `user`\n\n- #### `autoFetch`\n  Fetch user data automatically when user successfully logged in.\n  - Type: `boolean`\n  - Default: `true`\n- #### `property`\n  Property path of user data.\n  - Type: `string`\n  - Default: `data`\n- #### `storageName`\n  Storage name for storing user data.\n  - Type: `string`\n  - Default: `auth.user`\n\n### `moduleName`\n  Vuex's module name.\n  - Default: `auth`\n  - Type: `string`\n\n### `expiredStorage`\n  Storage name for storing token expiratin time.\n  - Type: `string`\n  - Default: `auth.expired`\n\n### `redirect`\n  \n- #### `home`\n  Homepage path.\n  - Type: `string`\n  - Default: `/`\n- #### `login`\n  Login path.\n  - Type: `string`\n  - Default: `/`\n\n\n### `registerAxiosInterceptors`\n  Register custom axios interceptors when `true`. Set the value to `false` if you want to use your own interceptors.\n  - Type: `boolean`\n  - Default: `true`\n\n### `storage`\n\n- #### `driver`\n  - Type: `string`\n  - Default: `secureLs`\n  - Available Options: `local` | `secureLs` | `cookie`\n\n\n## Implementing Refresh Token\n\nTo implement refresh token, update your auth options like so:\n\n```diff\n\nimport { AuthOptions } from '@gravitano/vue-auth'\n\nexport const defaultOptions: AuthOptions = {\n  endpoints: {\n    login: {\n      url: '/auth/login',\n      method: 'post',\n    },\n    logout: {\n      url: '/auth/logout',\n      method: 'delete',\n    },\n    user: {\n      url: '/auth/me',\n      method: 'get',\n    },\n+    refresh: {\n+      url: '/auth/refresh_token',\n+      method: 'get',\n+    },\n  },\n  token: {\n    property: 'data.token',\n    type: 'Bearer',\n    storageName: 'auth.token',\n    autoDecode: false,\n    name: 'Authorization',\n  },\n  user: {\n    autoFetch: true,\n    property: 'data',\n    storageName: 'auth.user',\n  },\n  moduleName: 'auth',\n  expiredStorage: 'auth.expired',\n  redirect: {\n    home: '/',\n    login: '/auth/login',\n  },\n  registerAxiosInterceptors: true,\n  storage: {\n    driver: 'secureLs', // supported: cookie, local, secureLs (secure local storage)\n  },\n+  refreshToken: {\n+    enabled: true, // \u003c-- make sure the value is set to true\n+    property: 'data',\n+    maxAge: 60 * 60 * 24 * 30, // default 30 days\n+    storageName: 'auth.refresh_token',\n+    name: 'refresh_token',\n+    autoLogout: true,\n+  },\n};\n```\n\n### Refresh Token Options\n\n#### `enabled`\n\nIndicates the refresh token is enabled or not.\n\n- Type: `string`\n- Default: `false`\n\n\n#### `property`\n\nPath of refresh token property from the response.\n\n- Type: `string`\n- Default: `data.refresh_token`\n\n#### `maxAge`\n\nMaximum age of new token.\n\n- Type: `number`\n- Default: `60 * 60 * 24 * 30` (30 Days)\n\n#### `storageName`\n\nStorage name for storing refresh token data.\n\n- Type: `string`\n- Default: `auth.refresh_token`\n\n#### `name`\n\nPayload name to sent when refreshing token. \n\n- Type: `string`\n- Default: `refresh_token`\n\n#### `autoLogout`\n\nWhen `true`, user will forced to logout and login again when refresh token failed.\n\n- Type: `boolean`\n- Default: `true`\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgravitano%2Fvue-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgravitano%2Fvue-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgravitano%2Fvue-auth/lists"}