From 91af3a2be3f79c92d8b7f3f52d7a973167234d6d Mon Sep 17 00:00:00 2001
From: Vijet M <vijet.mahabaleshwar@okta.com>
Date: Tue, 9 Mar 2021 23:07:56 -0800
Subject: [PATCH 1/2] Updates Login.jsx with showSignInToGetTokens

---
 custom-login/src/Login.jsx | 33 ++++++++++++++-------------------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/custom-login/src/Login.jsx b/custom-login/src/Login.jsx
index f792c91c..b876ea66 100644
--- a/custom-login/src/Login.jsx
+++ b/custom-login/src/Login.jsx
@@ -9,7 +9,7 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { useOktaAuth } from '@okta/okta-react';
 import * as OktaSignIn from '@okta/okta-signin-widget';
 import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
@@ -18,13 +18,8 @@ import config from './config';
 
 const Login = () => {
   const { oktaAuth } = useOktaAuth();
-  const widgetRef = useRef();
 
   useEffect(() => {
-    if (!widgetRef.current) {
-      return false;
-    }
-
     const { issuer, clientId, redirectUri, scopes } = config.oidc;
     const widget = new OktaSignIn({
       /**
@@ -46,26 +41,26 @@ const Login = () => {
         issuer,
         scopes,
       },
-      useInteractionCodeFlow: false, // Set to true, if your org is OIE enabled
+      useInteractionCodeFlow: false, // Set to true if your org is OIE enabled
     });
 
-    widget.renderEl(
-      { el: widgetRef.current },
-      (res) => {
-        console.log(res);
-        oktaAuth.handleLoginRedirect(res.tokens);
-      },
-      (err) => {
-        throw err;
-      },
-    );
+    widget.showSignInToGetTokens({
+      el: '#sign-in-widget',
+      scopes,
+    }).then((tokens) => {
+      // Remove the widget
+      widget.remove();
 
-    return () => widget.remove();
+      // Add tokens to storage
+      oktaAuth.handleLoginRedirect(tokens);
+    }).catch((err) => {
+      throw err;
+    });
   }, [oktaAuth]);
 
   return (
     <div>
-      <div ref={widgetRef} />
+      <div id="sign-in-widget" />
     </div>
   );
 };

From c4c94c300883a138e35824caae009b387f380a9a Mon Sep 17 00:00:00 2001
From: Vijet M <vijet.mahabaleshwar@okta.com>
Date: Wed, 10 Mar 2021 22:03:28 -0800
Subject: [PATCH 2/2] Addresses Shuo's comments

---
 custom-login/config-overrides.js |  2 ++
 custom-login/src/Login.jsx       | 13 ++++++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/custom-login/config-overrides.js b/custom-login/config-overrides.js
index 32d1255f..acad52b1 100644
--- a/custom-login/config-overrides.js
+++ b/custom-login/config-overrides.js
@@ -16,6 +16,7 @@ if (fs.existsSync(TESTENV)) {
 }
 process.env.CLIENT_ID = process.env.CLIENT_ID || process.env.SPA_CLIENT_ID;
 process.env.OKTA_TESTING_DISABLEHTTPSCHECK = process.env.OKTA_TESTING_DISABLEHTTPSCHECK || false;
+process.env.USE_INTERACTION_CODE_FLOW = process.env.USE_INTERACTION_CODE_FLOW || false;
 
 const webpack = require('webpack');
 
@@ -26,6 +27,7 @@ const env = {};
   'ISSUER',
   'CLIENT_ID',
   'OKTA_TESTING_DISABLEHTTPSCHECK',
+  'USE_INTERACTION_CODE_FLOW',
 ].forEach((key) => {
   if (!process.env[key]) {
     throw new Error(`Environment variable ${key} must be set. See README.md`);
diff --git a/custom-login/src/Login.jsx b/custom-login/src/Login.jsx
index b876ea66..9a945031 100644
--- a/custom-login/src/Login.jsx
+++ b/custom-login/src/Login.jsx
@@ -9,17 +9,20 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import React, { useEffect } from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
 import { useOktaAuth } from '@okta/okta-react';
 import * as OktaSignIn from '@okta/okta-signin-widget';
 import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
 
 import config from './config';
 
+const USE_INTERACTION_CODE_FLOW = process.env.USE_INTERACTION_CODE_FLOW || false;
+
 const Login = () => {
   const { oktaAuth } = useOktaAuth();
+  const widgetRef = useRef();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const { issuer, clientId, redirectUri, scopes } = config.oidc;
     const widget = new OktaSignIn({
       /**
@@ -41,11 +44,11 @@ const Login = () => {
         issuer,
         scopes,
       },
-      useInteractionCodeFlow: false, // Set to true if your org is OIE enabled
+      useInteractionCodeFlow: USE_INTERACTION_CODE_FLOW, // Set to true if your org is OIE enabled
     });
 
     widget.showSignInToGetTokens({
-      el: '#sign-in-widget',
+      el: widgetRef.current,
       scopes,
     }).then((tokens) => {
       // Remove the widget
@@ -60,7 +63,7 @@ const Login = () => {
 
   return (
     <div>
-      <div id="sign-in-widget" />
+      <div ref={widgetRef} />
     </div>
   );
 };