Adds Feature 'Okta Initiated Login' To Both Sample Apps

README.md

@@ -58,3 +58,13 @@ PASSWORD=testpass
 **NOTE**: The test suite expects you to use `8080` for your port number. Make sure your Okta app has the redirect URI if you want to test these samples.
 
 With these variables set, you should be able to run `npm test` and bask in the glory of passing tests.
+
+## Setup Okta Initated Login
+
+In your Okta Application, from the **General** tab edit the **General Settings** section:
+* `Grant Type` select `implicit`
+* `Login initiated by` select `Either Okta or App`
+* `Application visibility` select `Display application icon to users`
+* `Login flow` select `Redirect to app to initiate login (OIDC Compliant)`
+* `Initiate login URI` set `http://localhost:8080/okta/initiated`
+

custom-login/README.md

@@ -72,3 +72,13 @@ This sample contains the same "Messages" page that is included in the [Okta Host
 [OIDC SPA Setup Instructions]: https://developer.okta.com/docs/guides/sign-into-spa/react/before-you-begin
 [PKCE Flow]: https://developer.okta.com/docs/guides/implement-auth-code-pkce
 [Okta Sign In Widget]: https://github.com/okta/okta-signin-widget
+
+## Setup Okta Initated Login
+
+In your Okta Application, from the **General** tab edit the **General Settings** section:
+* `Grant Type` select `implicit`
+* `Login initiated by` select `Either Okta or App`
+* `Application visibility` select `Display application icon to users`
+* `Login flow` select `Redirect to app to initiate login (OIDC Compliant)`
+* `Initiate login URI` set `http://localhost:8080/okta/initiated`
+

custom-login/package.json

@@ -19,7 +19,7 @@
     "text-encoding": "^0.7.0"
   },
   "scripts": {
-    "start": "cross-env PORT=8080 react-app-rewired start",
+    "start": "cross-env PORT=3001 react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-scripts test --watchAll=false",
     "eject": "react-scripts eject",

custom-login/src/App.jsx

@@ -22,6 +22,7 @@ import Messages from './Messages';
 import Navbar from './Navbar';
 import Profile from './Profile';
 import CorsErrorModal from './CorsErrorModal';
+import OidcCompliant from './OidcCompliant';
 
 const oktaAuth = new OktaAuth(config.oidc);
 
@@ -58,6 +59,7 @@ const App = () => {
           <Route path="/login" render={() => <CustomLoginComponent {...{ setCorsErrorModalOpen }} />} />
           <SecureRoute path="/messages" component={Messages} />
           <SecureRoute path="/profile" component={Profile} />
+          <Route path="/okta/initiated" component={OidcCompliant} />
         </Switch>
       </Container>
     </Security>

custom-login/src/OidcCompliant.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { useOktaAuth } from '@okta/okta-react';
+
+const OidcCompliant = () => {
+  const { oktaAuth, authState } = useOktaAuth();
+
+  const login = async () => oktaAuth.signInWithRedirect('/');
+
+  const searchParams = new URLSearchParams(useLocation().search);
+  const iss = searchParams.get('iss');
+  // if app can be configured for multiple issuers use this value
+  console.log(`iss: ${iss}`);
+
+  if (!authState || !authState.isAuthenticated) {
+    login();
+  }
+
+  return (
+    <div>
+      <h2>Authorizing.....</h2>
+    </div>
+  );
+};
+
+export default OidcCompliant;

okta-hosted-login/README.md

@@ -75,3 +75,13 @@ Once you have the resource server running (it will run on port 8000) you can vis
 [OIDC SPA Setup Instructions]: https://developer.okta.com/docs/guides/sign-into-spa/react/before-you-begin
 [PKCE Flow]: https://developer.okta.com/docs/guides/implement-auth-code-pkce
 [Okta Sign In Widget]: https://github.com/okta/okta-signin-widget
+
+## Setup Okta Initated Login
+
+In your Okta Application, from the **General** tab edit the **General Settings** section:
+* `Grant Type` select `implicit`
+* `Login initiated by` select `Either Okta or App`
+* `Application visibility` select `Display application icon to users`
+* `Login flow` select `Redirect to app to initiate login (OIDC Compliant)`
+* `Initiate login URI` set `http://localhost:8080/okta/initiated`
+