@crossid/vue-wrapper - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

package.json

 {
   "name": "@crossid/vue-wrapper",
   "scope": "@crossid",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A wrapper for the crossid oauth2 client for vue3",
@@ -6,0 +6,0 @@ "main": "src/index.js",

README.md

 # Install vue CLI
+
 npm install -g @vue/cli
 
 # Create a new app
+
 vue create <app-name>
@@ -9,8 +11,11 @@ Choose vue3 as the base
 # Enable typescript for project
+
 vue add typescript
 
 # Install crossid vue wrapper
+
 npm install @crossid/vue-wrapper
 
 # Create a new crossid client and globaly register wrapper components
+
 In main.ts:
@@ -40,12 +45,24 @@
 # Create a protected component Protected.vue
+
 (This is for non automatic redirects)
+
 ```html
 <template>
-  <!-- user will be avaliable here if isAuthenticated === true -->
-  <!-- without "disableAutoLogin", the component will automatically redirect the user to the login page -->
-  <AuthProvider disableAutoLogin="true" v-slot="{ user, loginRedirect, isAuthenticated }">
-    <h1 v-if="isAuthenticated">Hello {{ user.name }}</h1>
+  <AuthProvider
+    v-bind:disableAutoLogin="true"
+    v-slot="{ user, loginRedirect, isAuthenticated, getToken }"
+  >
+    <!-- user will be avaliable here if isAuthenticated === true -->
+    <!-- without "disableAutoLogin", the component will automatically redirect the user to the login page -->
+    <!-- getToken is an async function get the an access token -->
+    <div v-if="isAuthenticated">
+      <h1>Hello {{ user.name }}</h1>
+      <button v-on:click="getAccessToken(getToken)">Get Token</button>
+      Token: {{ token }}
+    </div>
     <button
       v-else
-      v-on:click="loginRedirect('<app-id>', 'openid offline_access profile email', returnTo)"
+      v-on:click="
+        loginRedirect('foo', 'openid offline_access profile email', returnTo)
+      "
     >
@@ -58,12 +75,18 @@ Login!
 <script>
-export default {
-  name: "Protected",
-  data() {
-    return { returnTo: window.location.href };
-  },
+  export default {
+    name: "Protected",
+    data() {
+      return { returnTo: window.location.href, token: "" };
+    },
 
-  props: {
-    msg: String,
-  },
-};
+    methods: {
+      getAccessToken(getToken) {
+        getToken().then((tok) => (this.token = tok));
+      },
+    },
+
+    props: {
+      msg: String,
+    },
+  };
 </script>
@@ -73,16 +96,16 @@
 <style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
+  h3 {
+    margin: 40px 0 0;
+  }
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  li {
+    display: inline-block;
+    margin: 0 10px;
+  }
+  a {
+    color: #42b983;
+  }
 </style>
@@ -92,2 +115,3 @@ ```
 # Register components in App.vue
+
 ```html
@@ -97,3 +121,3 @@ <template>
   <div v-if="currentRoute == '/callback'">
-   <!-- we need @navigate="navigate() to respond to redirect events back to "main" page after callback-->
+    <!-- we need @navigate="navigate() to respond to redirect events back to "main" page after callback-->
     <AuthCallback @navigate="navigate()">callback...</AuthCallback>
@@ -107,38 +131,38 @@ </div>
 <script lang="ts">
-// Our protected component
-import Protected from "./components/Protected.vue";
+  // Our protected component
+  import Protected from "./components/Protected.vue";
 
-export default {
-  name: "App",
-  // This is a basic routing / navigation setup
-  data() {
-    return { currentRoute: window.location.pathname };
-  },
-  components: {
-    Protected,
-  },
-  methods: {
-    // This is needed to respond to redirect event after callback
-    navigate() {
-      //@ts-ignore
-      this.currentRoute = window.location.pathname;
+  export default {
+    name: "App",
+    // This is a basic routing / navigation setup
+    data() {
+      return { currentRoute: window.location.pathname };
     },
-  },
-};
+    components: {
+      Protected,
+    },
+    methods: {
+      // This is needed to respond to redirect event after callback
+      navigate() {
+        //@ts-ignore
+        this.currentRoute = window.location.pathname;
+      },
+    },
+  };
 </script>
 
 <style>
-OAuthCallback #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+  OAuthCallback #app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+  }
 </style>
-
 ```
 
 # Run the app
-npm run serve
+
+npm run serve

src/index.js

@@ -5,10 +5,14 @@ import { Client as CrossidClient, } from "@crossid/crossid-spa-js";
     const client = new CrossidClient(options);
-    const data = { client };
+    const internalStore = {
+        user: null,
+        isAuthenticated: false,
+    };
+    const data = { internalStore, client };
     const authProvider = defineComponent({
         render() {
             return h("slot", null, this.$slots.default({
-                accessToken: this.accessToken,
-                user: this.user,
-                isAuthenticated: this.isAuthenticated,
+                user: this.internalStore.user,
+                isAuthenticated: this.internalStore.isAuthenticated,
                 loginRedirect: this.loginRedirect,
+                getToken: this.getToken,
             }));
@@ -21,2 +25,6 @@ },
             }
+            else {
+                this.internalStore.isAuthenticated = !!user;
+                this.internalStore.user = user;
+            }
         },
@@ -30,12 +38,5 @@ data() {
         methods: {
-            async accessToken(opts) {
+            async getToken(opts) {
                 return client.getAccessToken(opts);
             },
-            async user(opts) {
-                return client.getUser(opts);
-            },
-            async isAuthenticated(opts) {
-                const user = client.getUser(opts);
-                return !!user;
-            },
             loginRedirect(audience, scope, returnTo) {
@@ -54,5 +55,4 @@ const options = {
             return h("span", null, this.$slots.default({
-                accessToken: this.accessToken,
-                user: this.user,
-                isAuthenticated: this.isAuthenticated,
+                user: this.internalStore.user,
+                isAuthenticated: this.internalStore.isAuthenticated,
             }));
@@ -67,12 +67,2 @@ },
         methods: {
-            async accessToken(opts) {
-                return client.getAccessToken(opts);
-            },
-            async user(opts) {
-                return client.getUser(opts);
-            },
-            async isAuthenticated(opts) {
-                const user = client.getUser(opts);
-                return !!user;
-            },
             async loginRedirectCallback() {
@@ -83,2 +73,5 @@ await this.client.handleRedirectCallback();
                 // const scope = sessionStorage.getItem('crossid.spa-js@scope')
+                const user = await client.getUser();
+                internalStore.user = user || null;
+                internalStore.isAuthenticated = !!user;
                 window.history.replaceState(null, null, returnTo);
@@ -85,0 +78,0 @@ this.$emit("navigate");

src/index.ts

 import {
   Client as CrossidClient,
   IDToken,
-  GetUserOpts,
   GetAccessTokenOpts,
@@ -14,3 +13,2 @@ } from "@crossid/crossid-spa-js";
   user: IDToken | null;
-  loadState: string;
 }
@@ -20,4 +18,8 @@
   const client = new CrossidClient(options);
+  const internalStore: IInternalStore = {
+    user: null,
+    isAuthenticated: false,
+  };
 
-  const data = { client };
+  const data = { internalStore, client };
 
@@ -30,6 +32,6 @@ const authProvider = defineComponent({
         this.$slots.default({
-          accessToken: this.accessToken,
-          user: this.user,
-          isAuthenticated: this.isAuthenticated,
+          user: this.internalStore.user,
+          isAuthenticated: this.internalStore.isAuthenticated,
           loginRedirect: this.loginRedirect,
+          getToken: this.getToken,
         })
@@ -48,2 +50,5 @@ );
         );
+      } else {
+        this.internalStore.isAuthenticated = !!user;
+        this.internalStore.user = user;
       }
@@ -61,15 +66,6 @@ },
     methods: {
-      async accessToken(opts?: GetAccessTokenOpts): Promise<string> {
+      async getToken(opts?: GetAccessTokenOpts): Promise<string> {
         return client.getAccessToken(opts);
       },
 
-      async user(opts?: GetUserOpts): Promise<IDToken> {
-        return client.getUser(opts);
-      },
-
-      async isAuthenticated(opts?: GetUserOpts): Promise<boolean> {
-        const user = client.getUser(opts);
-        return !!user;
-      },
-
       loginRedirect(audience: string, scope: string, returnTo: string) {
@@ -92,5 +88,4 @@ const options = {
         this.$slots.default({
-          accessToken: this.accessToken,
-          user: this.user,
-          isAuthenticated: this.isAuthenticated,
+          user: this.internalStore.user,
+          isAuthenticated: this.internalStore.isAuthenticated,
         })
@@ -108,15 +103,2 @@ );
     methods: {
-      async accessToken(opts?: GetAccessTokenOpts): Promise<string> {
-        return client.getAccessToken(opts);
-      },
-
-      async user(opts?: GetUserOpts): Promise<IDToken> {
-        return client.getUser(opts);
-      },
-
-      async isAuthenticated(opts?: GetUserOpts): Promise<boolean> {
-        const user = client.getUser(opts);
-        return !!user;
-      },
-
       async loginRedirectCallback() {
@@ -128,2 +110,6 @@ await this.client.handleRedirectCallback();
 
+        const user = await client.getUser();
+        internalStore.user = user || null;
+        internalStore.isAuthenticated = !!user;
+
         window.history.replaceState(null, null, returnTo);
@@ -130,0 +116,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

162

increased by18.25%

Worsened metrics

Total package byte prevSize

12913

decreased by-1.27%

Lines of code

221

decreased by-7.14%

No dependency changes