feat: support error slot in LoginCallback

OKTA-468765 <<<Jenkins Check-In of Tested SHA: fb30b74 for [email protected]>>> Artifact: okta-vue Files changed count: 8 PR Link: "#89"
okta · Feb 16, 2022 · 2654d98 · 2654d98
1 parent 647d484
commit 2654d98
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 [authState]: https://github.com/okta/okta-auth-js#authstatemanager
 
+# 5.2.0
+
+### Features
+
+- [#89](https://github.com/okta/okta-vue/pull/89) Supports named slot (`error`) in `LoginCallback` component
+
 # 5.1.1
 
 ### Fixes

diff --git a/README.md b/README.md
@@ -89,7 +89,7 @@ app.mount('#app')
 
 ### Use the LoginCallback Component
 
-In order to handle the redirect back from Okta, your app will need to read the values returned from Okta and exchange them for tokens. This SDK provides a [LoginCallback](#logincallback) component which calls [$auth.handleLoginRedirect](https://github.com/okta/okta-auth-js#handleloginredirecttokens) to perform this logic. If an error occurs, it will be displayed by the [LoginCallback](#logincallback) component. For custom behavior, the [LoginCallback component file](https://github.com/okta/okta-vue/blob/master/src/components/LoginCallback.vue) can be copied to your own source tree and modified as needed.
+In order to handle the redirect back from Okta, your app will need to read the values returned from Okta and exchange them for tokens. This SDK provides a [LoginCallback](#logincallback) component which calls [$auth.handleLoginRedirect](https://github.com/okta/okta-auth-js#handleloginredirecttokens) to perform this logic. If an error occurs, it will be displayed by the [LoginCallback](#logincallback) component, [named slot](https://vuejs.org/guide/components/slots.html#named-slots) (`error`) can be provided to customize the error rendering logic. For custom behavior, the [LoginCallback component file](https://github.com/okta/okta-vue/blob/master/src/components/LoginCallback.vue) can be copied to your own source tree and modified as needed.
 
 **Note:** Make sure you have the login redirect URI (as an absolute URL) listed in your Okta App's configuration in the Okta Admin console.
 

diff --git a/src/components/LoginCallback.vue b/src/components/LoginCallback.vue
@@ -12,7 +12,7 @@
 
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 
 export default defineComponent({
   name: 'LoginCallback',
@@ -39,7 +39,11 @@ export default defineComponent({
     }
   },
   render() {
-    return this.error
+    if (this.$slots.error) {
+      return h('div', this.$slots.error({ error: this.error }));
+    }
+
+    return this.error;
   }
 })
 </script>
diff --git a/test/app/src/App.vue b/test/app/src/App.vue
@@ -4,7 +4,13 @@
     <button v-if='authState && authState.isAuthenticated' v-on:click='logout' id='logout-button'> Logout </button>
     <button v-else v-on:click='login' id='login-button'> Login </button>
     <router-link to="/protected" tag="button"> Protected </router-link>
-    <router-view/>
+    <router-view v-slot="{ Component }">
+      <component :is="Component">
+        <template #error="errorProps">
+          <p>Custom error: {{ errorProps.error }}</p>
+        </template>
+      </component>
+    </router-view>
   </div>
 </template>
 

diff --git a/test/components/AppWithRoutesAndSlots.vue b/test/components/AppWithRoutesAndSlots.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <router-view v-slot="{ Component }">
+      <component :is="Component">
+        <template #error="errorProps">
+          <p>Custom error: {{ errorProps.error }}</p>
+        </template>
+      </component>
+    </router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app'
+}
+</script>
diff --git a/test/components/index.js b/test/components/index.js
@@ -1,3 +1,4 @@
 export { default as App } from './App'
 export { default as AppWithRoutes } from './AppWithRoutes'
+export { default as AppWithRoutesAndSlots } from './AppWithRoutesAndSlots'
 export { default as Protected } from './Protected'
diff --git a/test/specs/LoginCallback.spec.js b/test/specs/LoginCallback.spec.js
@@ -15,7 +15,7 @@ import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { OktaAuth } from '@okta/okta-auth-js'
 import OktaVue, { LoginCallback } from '../../src'
-import { AppWithRoutes } from '../components'
+import { AppWithRoutes, AppWithRoutesAndSlots } from '../components'
 
 describe('LoginCallback', () => {
   let oktaAuth
@@ -44,7 +44,8 @@ describe('LoginCallback', () => {
       ]
     })
     const { onAuthRequired, onAuthResume } = options;
-    wrapper = mount(AppWithRoutes, {
+    const Comp = options.withCustomErrorSlot ? AppWithRoutesAndSlots : AppWithRoutes;
+    wrapper = mount(Comp, {
       global: {
         plugins: [
           router, 
@@ -115,6 +116,15 @@ describe('LoginCallback', () => {
     expect(wrapper.text()).toBe('Error: my fake error')
   })
 
+  it('shows errors with custom error slot', async () => {
+    createOktaAuth()
+    const error = new Error('my fake error')
+    jest.spyOn(oktaAuth, 'handleLoginRedirect').mockReturnValue(Promise.reject(error))
+    await navigateToCallback({ isLoginRedirect: true, withCustomErrorSlot: true })
+    await nextTick();
+    expect(wrapper.text()).toBe('Custom error: Error: my fake error')
+  })
+
   describe('interaction code flow', () => {
     beforeEach(() => {
       createOktaAuth()

diff --git a/yarn.lock b/yarn.lock
@@ -1211,27 +1211,6 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@okta/okta-auth-js@^5.8.0":
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/@okta/okta-auth-js/-/okta-auth-js-5.8.0.tgz#e80a550e7850f3bc89ea3d6bcd6a66a95f8702f5"
-  integrity sha512-gkQ3/IOlG10FsE7h3GCN38BJGv7QZqr8clh5dpmjmZ4L1xtFwoDuk1VP0iaHtxr3UhsOG/wxNx17tnFAuSjeoQ==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@okta/okta-idx-js" "0.22.0"
-    "@peculiar/webcrypto" "1.1.6"
-    Base64 "1.1.0"
-    atob "^2.1.2"
-    btoa "^1.2.1"
-    core-js "^3.6.5"
-    cross-fetch "^3.0.6"
-    js-cookie "2.2.1"
-    node-cache "^5.1.2"
-    p-cancelable "^2.0.0"
-    text-encoding "^0.7.0"
-    tiny-emitter "1.1.0"
-    webcrypto-shim "^0.1.5"
-    xhr2 "0.1.3"
-
 "@okta/okta-auth-js@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@okta/okta-auth-js/-/okta-auth-js-6.0.0.tgz#5ec34f7d92f6c91a3efeef8a6441175693b6fa74"
@@ -1253,16 +1232,6 @@
     webcrypto-shim "^0.1.5"
     xhr2 "0.1.3"
 
-"@okta/[email protected]":
-  version "0.22.0"
-  resolved "https://registry.yarnpkg.com/@okta/okta-idx-js/-/okta-idx-js-0.22.0.tgz#c5dbebd155be2c8a8e2bbceb2e92701b6ba59349"
-  integrity sha512-SehJVwQI51xWrB1YaMn6UB54cOzhrM7z5k2xOI62I3B7qOQ3uFOZJvRCJnBcZ6TEcQuqJ3/6q93h6n8omw0tVQ==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@babel/runtime-corejs3" "^7.12.5"
-    core-js "^3.15.1"
-    jsonpath-plus "^5.1.0"
-
 "@okta/[email protected]":
   version "0.24.0"
   resolved "https://registry.yarnpkg.com/@okta/okta-idx-js/-/okta-idx-js-0.24.0.tgz#f7c048a866add49f40fde0e25734fe61998be7c3"