# @xtiannyeto/vue-auth0

> Auth0 vue3 wrapper typescript comopsition-api

Latest version **1.0.4** (published 2021-02-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @xtiannyeto/vue-auth0
pnpm add @xtiannyeto/vue-auth0
yarn add @xtiannyeto/vue-auth0
bun add @xtiannyeto/vue-auth0
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2021-02-22 |
| First published | 2021-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 14.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | xtiannyeto |
| Maintainers | christiantonye |
| Keywords | Vue3, composition-api, Auth0, typescript, reactive, inject/provide |

## Links

- npm: https://www.npmjs.com/package/@xtiannyeto/vue-auth0
- Repository: https://github.com/xtiannyeto/vue-auth0
- Homepage: https://github.com/xtiannyeto/vue-auth0#readme
- Issues: https://github.com/xtiannyeto/vue-auth0/issues
- npm.io page: https://npm.io/package/@xtiannyeto/vue-auth0

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) 3.0.0
- [vue-router](https://npm.io/package/vue-router.md) ^4.0.3
- [@auth0/auth0-spa-js](https://npm.io/package/@auth0/auth0-spa-js.md) ^1.13.6
- [@xtiannyeto/vue-auth0](https://npm.io/package/@xtiannyeto/vue-auth0.md) ^1.0.2

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2021-02-22
- 1.0.3 — 2021-02-22
- 1.0.2 — 2021-02-22
- 1.0.1 — 2021-02-22
- 1.0.0 — 2021-02-22

## README

# Vue-Auth0

Vue3 Auth0 is a vu3 plugin, which provide wrapper for Auth0 library authentification with Typescript, old plugin definition or composition-api plugin with provide/inject and reactive

## Installation

Use the package manager [yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) to install vue-auth0.

```bash
npm i @xtiannyeto/vue-auth0
yarn add @xtiannyeto/vue-auth0
```

## Usage  

### Configuration

The project needs to be configured with your Auth0 domain and client ID in order for the authentication flow to work.

To do this, first copy auth_config.json.example into a new file in the same folder called auth_config.json, and replace the values within with your own Auth0 application credentials:

```json
{
  "domain": "<YOUR AUTH0 DOMAIN>",
  "clientId": "<YOUR AUTH0 CLIENT ID>"
}
```
form more explanation on how to configure auth0 take a look on [auth0-spa](https://auth0.com/docs/quickstart/spa/vuejs)
### Vue2 approach
In main.ts


```typescript
main.ts

import authConfig from '../auth_config.json';
import { AuthPluginOption, installAuth0 } from './auth/AuthPlugin';

const config = {
  options: authConfig,
  callbackRedirect: (appState: any) => {
    router.push(appState && appState.targetUrl ? appState.targetUrl : '/');
  }
} as AuthPluginOption;


const app = createApp(App)
  .use(...)
  .use(....);

installAuth0(config).then((auth: any) => {
  app.use(auth).mount('#app');
})
```

In component

```html
<template>
   <button @click.prevent="login"></button>
   <div>
   <img :src="$auth.user.value.picture" alt=""/>
      <p>{{ $auth.user.value.email }}</p>
      <p>{{ $auth.user.value.name }}</p>
   </div>
</template>
```
```typescript
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'user',
  methods: {
    async login() {
      this.$auth.loginWithRedirect();
    }
  }
});
```

use in composition-api
```typescript
import { defineComponent, ref } from 'vue';
import { AuthPlugin } from './auth/AuthPlugin';

export default defineComponent({
  name: 'user',
  setup() {
    const auth: AuthPlugin =  inject('auth');
    .....
  }
});
```

### Vue3 approach
main.ts

```typescript
createApp(App)
  .use(...)
  .use(....)
  .mount('#app');

```
app.vue


```typescript
import { defineComponent } from 'vue';
import router from './router';
import authConfig from '../auth_config.json';
import { AuthPluginOption, provideAuth0 } from '@/auth/AuthPlugin';


export default defineComponent({
  name: 'App',
  setup() {
    const config = {
      options: authConfig,
      callbackRedirect: (appState: any) => {
        router.push(appState && appState.targetUrl ? appState.targetUrl : '/');
      }
    } as AuthPluginOption;
    provideAuth0(config);
  }
});
```

Component.vue


```typescript
import { defineComponent, Ref } from 'vue';
import { AuthPlugin, useAuth0 } from '@/auth/AuthPlugin';
export default defineComponent({
  name: 'xxxx',
  setup() {
    const auth: Ref<AuthPlugin> = useAuth0();
    return { auth };
  },
  methods: {
    async login() {
      await this.auth.loginWithRedirect();
    }
  }
});
```
provideAuth0 is async so check the inject before using it.

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.

## Credits
[lstyles](https://github.com/lstyles/vue3-auth0-sample), [auth0-sample](https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login)


## License
[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/@xtiannyeto/vue-auth0 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._