[okta-react] fix: show error string on LoginCallback (#700)

* [okta-react] fix: show error string on LoginCallback

* [okta-react] release 2.0.1

packages/okta-react/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.0.1
+
+### Bug Fixes
+
+- [#700](https://github.com/okta/okta-oidc-js/pull/700) LoginCallback: render error as string
+
 # 2.0.0
 
 ### Features

packages/okta-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/okta-react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "React support for Okta",
   "main": "./dist/index.js",
   "scripts": {

packages/okta-react/src/LoginCallback.js

@@ -21,7 +21,7 @@ const LoginCallback = () => {
   }, [authService]);
 
   if(authState.error) { 
-    return <p>${authState.error}</p>;
+    return <p>{authState.error.toString()}</p>;
   }
 
   return null;

packages/okta-react/test/jest/loginCallback.test.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import LoginCallback from '../../src/LoginCallback';
+import Security from '../../src/Security';
+import AuthSdkError from '@okta/okta-auth-js/lib/errors/AuthSdkError';
+import AuthApiError from '@okta/okta-auth-js/lib/errors/AuthApiError';
+import OAuthError from '@okta/okta-auth-js/lib/errors/OAuthError';
+
+describe('<LoginCallback />', () => {
+  let authService;
+  let authState;
+  let mockProps;
+  beforeEach(() => {
+    authState = {
+      isPending: true
+    };
+    authService = {
+      on: jest.fn(),
+      updateAuthState: jest.fn(),
+      getAuthState: jest.fn().mockImplementation(() => authState),
+      handleAuthentication: jest.fn()
+    };
+    mockProps = { authService };
+  });
+
+  it('renders the component', () => {
+    const wrapper = mount(
+      <Security {...mockProps}>
+        <LoginCallback />
+      </Security>
+    );
+    expect(wrapper.find(LoginCallback).length).toBe(1);
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('calls handleAuthentication', () => {
+    mount(
+      <Security {...mockProps}>
+        <LoginCallback />
+      </Security>
+    );
+    expect(authService.handleAuthentication).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders empty by default', () => {
+    const wrapper = mount(
+      <Security {...mockProps}>
+        <LoginCallback />
+      </Security>
+    );
+    expect(wrapper.text()).toBe('');
+  });
+
+  describe('shows errors', () => {
+    test('generic', () => {
+      const errorMessage = 'I am a test error message';
+      authState.error = new Error(errorMessage);
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback />
+        </Security>
+      );
+      expect(wrapper.text()).toBe(`Error: ${errorMessage}`);
+    });
+    test('AuthSdkError', () => {
+      const errorMessage = 'I am a test error message';
+      authState.error = new AuthSdkError(errorMessage);
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback />
+        </Security>
+      );
+      expect(wrapper.text()).toBe(`AuthSdkError: ${errorMessage}`);
+    });
+    test('AuthApiError', () => {
+      const errorSummary = 'I am a test error message';
+      authState.error = new AuthApiError({ errorSummary });
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback />
+        </Security>
+      );
+      expect(wrapper.text()).toBe(`AuthApiError: ${errorSummary}`);
+    });
+    test('OAuthError', () => {
+      const errorCode = 400;
+      const errorSummary = 'I am a test error message';
+      authState.error = new OAuthError(errorCode, errorSummary);
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback />
+        </Security>
+      );
+      expect(wrapper.text()).toBe(`OAuthError: ${errorSummary}`);
+    });
+  });
+
+
+
+
+});