From 3fc6ee5707078ffffd61d4912a7fe6fb1d93a800 Mon Sep 17 00:00:00 2001
From: Jonathan Pollert <38696668+jnt0r@users.noreply.github.com>
Date: Sat, 16 Oct 2021 11:40:20 +0200
Subject: [PATCH] Revert "Provide auth property instead of globalProperties
 (#225)" (#228)

This reverts commit f3a0c67886864dfad9cac7da65a0d2179d4be129.
---
 README.md          | 31 +++++++++++--------------------
 src/index.ts       |  2 --
 src/vue.d.ts       |  3 ---
 test/index.spec.ts | 28 ----------------------------
 4 files changed, 11 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index 5c8a58a63..3e8a8956c 100644
--- a/README.md
+++ b/README.md
@@ -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';
@@ -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();
 }
 ```
 
@@ -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.
diff --git a/src/index.ts b/src/index.ts
index fabd1b335..98512815e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -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));
     },
diff --git a/src/vue.d.ts b/src/vue.d.ts
index 374065b56..f81956575 100644
--- a/src/vue.d.ts
+++ b/src/vue.d.ts
@@ -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;
     }
 }
diff --git a/test/index.spec.ts b/test/index.spec.ts
index 968f32545..a33a81a27 100644
--- a/test/index.spec.ts
+++ b/test/index.spec.ts
@@ -27,7 +27,6 @@ describe('VueAuth0Plugin', () => {
                     client_id: 'clientID',
                 } ] ],
             },
-
         });
 
         expect(wrapper.vm.$auth).toMatchObject({
@@ -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;