Skip to content

Commit

Permalink
Revert "Provide auth property instead of globalProperties (#225)" (#228)
Browse files Browse the repository at this point in the history
This reverts commit f3a0c67.
  • Loading branch information
jnt0r authored Oct 16, 2021
1 parent f3a0c67 commit 3fc6ee5
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 53 deletions.
31 changes: 11 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ npm install --save vue-auth0-plugin

## Usage

Register the plugin in your main.ts file. For a list of available options, take a look here: [https://auth0.github.io/auth0-spa-js/interfaces/auth0clientoptions.html](https://auth0.github.io/auth0-spa-js/interfaces/auth0clientoptions.html)
Register the plugin in your main.ts

```js
import { createApp } from 'vue';
Expand All @@ -37,17 +37,15 @@ app.use(VueAuth0Plugin, {
app.mount('#app');
```

Then Auth0 can be injected as ´auth´ like the example below. For more information about provide/inject, take a look here [https://v3.vuejs.org/guide/component-provide-inject.html](https://v3.vuejs.org/guide/component-provide-inject.html). For example:
Then Auth0 is accessible and controllable by the `$auth` property. For example:

```js
const auth = inject('auth') as AuthenticationProperties;
const authenticated = $auth.authenticated;
const loading = $auth.loading;
const user = $auth.user;

const authenticated = auth.authenticated;
const loading = auth.loading;
const user = auth.user;

if (!auth.authenticated) {
auth.loginWithRedirect();
if (!$auth.authenticated) {
$auth.loginWithRedirect();
}
```

Expand All @@ -56,19 +54,12 @@ Or in a component
```html
<template>
<div class="about">
<h1>You are logged in as {{ auth.user.name }} ({{ auth.user.nickname }})</h1>
<img :src="auth.user.picture" alt="Profile picture"/>
<button v-on:click="auth.logout()">Logout</button>
<h1>You are logged in as {{$auth.user.name}} ({{ $auth.user.nickname }})</h1>
<img :src="$auth.user.picture" alt="Profile picture"/>

<button v-on:click="$auth.logout()">Logout</button>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
inject: ['auth'],
})
export default class MyComponent extends Vue {}
</script>

```

If you want to use the state of authentication when you do not have access to the Vue instance, you can use the exported AuthenticationState.
Expand Down
2 changes: 0 additions & 2 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import AuthenticationGuard from './AuthenticationGuard';

export default {
install (app: App, options: Auth0ClientOptions): void {
// global $auth property is deprecated
app.config.globalProperties.$auth = Plugin.properties;
app.provide('auth', Plugin.properties);

createAuth0Client(options).then((client) => Plugin.initialize(app, client));
},
Expand Down
3 changes: 0 additions & 3 deletions src/vue.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,6 @@ import AuthProperty from './AuthProperty';

declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
/**
* @deprecated The global property $auth should not be used. Use ´inject('auth')´ instead.
*/
$auth: AuthProperty;
}
}
28 changes: 0 additions & 28 deletions test/index.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ describe('VueAuth0Plugin', () => {
client_id: 'clientID',
} ] ],
},

});

expect(wrapper.vm.$auth).toMatchObject({
Expand All @@ -45,33 +44,6 @@ describe('VueAuth0Plugin', () => {
});
});

it('should provide property auth', () => {
const wrapper = mount({ render: () => null, inject: [ 'auth' ] }, {
global: {
plugins: [ [ VueAuth0Plugin, {
domain: 'domain',
client_id: 'clientID',
} ] ],
},
});

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
expect(wrapper.vm.auth).toMatchObject({
authenticated: expect.any(Boolean),
loading: expect.any(Boolean),
user: undefined,
client: undefined,
getIdTokenClaims: expect.any(Function),
getTokenSilently: expect.any(Function),
getTokenWithPopup: expect.any(Function),
handleRedirectCallback: expect.any(Function),
loginWithRedirect: expect.any(Function),
loginWithPopup: expect.any(Function),
logout: expect.any(Function),
});
});

it('should export AuthenticationState', () => {
expect(AuthenticationState).toEqual(Plugin.state);
Plugin.state.loading = true;
Expand Down

0 comments on commit 3fc6ee5

Please sign in to comment.