Provide auth property instead of globalProperties (#225)

* docs(): The global property $auth is deprecated now. Instead the auth property should be injected with inject('auth')

* feat(): The AuthProperties get provided now.

For more information about how to use provided properties, see: https://v3.vuejs.org/guide/component-provide-inject.html

* docs(): Added a link to the list of available Auth0Client options

* docs(): Described how to use the new global property with provide/inject.

README.md

@@ -21,7 +21,7 @@ npm install --save vue-auth0-plugin
 
 ## Usage
 
-Register the plugin in your main.ts
+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)
 
 ```js
 import { createApp } from 'vue';
@@ -37,15 +37,17 @@ app.use(VueAuth0Plugin, {
 app.mount('#app');
 ```
 
-Then Auth0 is accessible and controllable by the `$auth` property. For example:
+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:
 
 ```js
-const authenticated = $auth.authenticated;
-const loading = $auth.loading;
-const user = $auth.user;
+const auth = inject('auth') as AuthenticationProperties;
 
-if (!$auth.authenticated) {
-    $auth.loginWithRedirect();
+const authenticated = auth.authenticated;
+const loading = auth.loading;
+const user = auth.user;
+
+if (!auth.authenticated) {
+    auth.loginWithRedirect();
 }
 ```
 
@@ -54,12 +56,19 @@ 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.

src/index.ts

@@ -5,7 +5,9 @@ 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));
     },

src/vue.d.ts

@@ -7,6 +7,9 @@ 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;
     }
 }

test/index.spec.ts

@@ -27,6 +27,7 @@ describe('VueAuth0Plugin', () => {
                     client_id: 'clientID',
                 } ] ],
             },
+
         });
 
         expect(wrapper.vm.$auth).toMatchObject({
@@ -44,6 +45,33 @@ 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;