diff --git a/CHANGELOG.md b/CHANGELOG.md index 5711be4..d9a6c5b 100644 --- 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 index d823c72..cc5551c 100644 --- 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 index e16fac2..87425dd 100644 --- a/src/components/LoginCallback.vue +++ b/src/components/LoginCallback.vue @@ -12,7 +12,7 @@ diff --git a/test/app/src/App.vue b/test/app/src/App.vue index 443b75c..e19b47d 100644 --- a/test/app/src/App.vue +++ b/test/app/src/App.vue @@ -4,7 +4,13 @@ Protected - + + + + + diff --git a/test/components/AppWithRoutesAndSlots.vue b/test/components/AppWithRoutesAndSlots.vue new file mode 100644 index 0000000..578c7e4 --- /dev/null +++ b/test/components/AppWithRoutesAndSlots.vue @@ -0,0 +1,17 @@ + + + diff --git a/test/components/index.js b/test/components/index.js index 7cc6a98..786e699 100644 --- 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 index 235eea5..54ccb98 100644 --- 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 index a4ed0cb..1f83dd8 100644 --- 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/okta-idx-js@0.22.0": - 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/okta-idx-js@0.24.0": version "0.24.0" resolved "https://registry.yarnpkg.com/@okta/okta-idx-js/-/okta-idx-js-0.24.0.tgz#f7c048a866add49f40fde0e25734fe61998be7c3"