From 91b5a12fa0896b8913da646aa3799d364f32ce09 Mon Sep 17 00:00:00 2001
From: Aaron Granick <aaron.granick@okta.com>
Date: Mon, 16 Mar 2020 10:27:18 -0700
Subject: [PATCH] [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              |   6 ++
 packages/okta-react/package.json              |   2 +-
 packages/okta-react/src/LoginCallback.js      |   2 +-
 .../test/jest/loginCallback.test.js           | 101 ++++++++++++++++++
 4 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 packages/okta-react/test/jest/loginCallback.test.js

diff --git a/packages/okta-react/CHANGELOG.md b/packages/okta-react/CHANGELOG.md
index 1628ec6a8..96ae5e036 100644
--- a/packages/okta-react/CHANGELOG.md
+++ b/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
diff --git a/packages/okta-react/package.json b/packages/okta-react/package.json
index 36c80fd65..eb77f1ebf 100644
--- a/packages/okta-react/package.json
+++ b/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": {
diff --git a/packages/okta-react/src/LoginCallback.js b/packages/okta-react/src/LoginCallback.js
index e8724a602..214b27898 100644
--- a/packages/okta-react/src/LoginCallback.js
+++ b/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;
diff --git a/packages/okta-react/test/jest/loginCallback.test.js b/packages/okta-react/test/jest/loginCallback.test.js
new file mode 100644
index 000000000..748a4e335
--- /dev/null
+++ b/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}`);
+    });
+  });
+
+
+
+
+});