feat: update okta login guide for realworld app (#4883)

* feat: update okta login guide for realworld app

* chore: make changes to okta to have parity with cognito changes

* chore: address code review comments

Author: AtofStryker

assets/img/examples/okta-origin.mp4

@@ -7,31 +7,37 @@ e2eSpecific: true
 
 ## <Icon name="graduation-cap"></Icon> What you'll learn
 
+- Log in to [Okta](https://okta.com) through the UI with
+  [`cy.origin()`](/api/commands/origin)
 - Programmatically authenticate with [Okta](https://okta.com) via a custom
   Cypress command
 - Adapting your [Okta](https://okta.com) application for programmatic
-  authentication during testing
-
-</Alert>
+  authentication during testing </Alert>
 
 <Alert type="warning">
 
 The scope of this guide is to demonstrate authentication solely against the
 [Okta Universal Directory](https://www.okta.com/products/universal-directory/).
-Future guides will expand to include cover [Okta](https://okta.com)
-authentication with other identity providers.
+Future guides will expand to cover [Okta](https://okta.com) authentication with
+other identity providers.
 
 </Alert>
 
 <Alert type="success">
 
-<strong class="alert-header">Why authenticate programmatically?</strong>
+<strong class="alert-header">Authenticate by visiting a different domain with
+[`cy.origin()`](/api/commands/origin)</strong>
 
 Typically, logging in a user within your app by authenticating via a third-party
-provider requires visiting login pages hosted on a different domain. Since each
-Cypress test is limited to visiting domains of the same origin, we can subvert
-visiting and testing third-party login pages by programmatically interacting
-with the third-party authentication API to login a user.
+provider requires visiting a login page hosted on a different domain. Before
+Cypress [v12.0.0](https://on.cypress.io/changelog#12-0-0), Cypress tests were
+limited to visiting domains of the same origin, making programmatic login the
+only option for authenticating users with a third-party API. As of Cypress
+[v12.0.0](https://on.cypress.io/changelog#12-0-0), Cypress tests are no longer
+limited to visiting domains of a single origin, meaning you can easily
+authenticate to
+[Okta Universal Directory](https://www.okta.com/products/universal-directory/)
+via the UI!
 
 </Alert>
 
@@ -70,11 +76,116 @@ require('dotenv').config()
 
 ## Custom Command for Okta Authentication
 
+There are two ways you can authenticate to Okta:
+
+- [Login with `cy.origin()`](/guides/end-to-end-testing/okta-authentication#Login-with-cy-origin)
+- [Programmatic Access](/guides/end-to-end-testing/okta-authentication#Programmatic-Login)
+
+### Login with [`cy.origin()`](/api/commands/origin)
+
+Next, we'll write a custom command called `loginByOkta` to perform a login to
+[Okta](https://okta.com). This command will use
+[`cy.origin()`](/api/commands/origin) to
+
+1. navigate to the Okta origin
+2. input user credentials
+3. sign in and redirect back to the
+   [Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app)
+4. cache the results with [`cy.session()`](/api/commands/session)
+
+```jsx
+// cypress/support/auth-provider-commands/okta.ts
+// Okta
+const loginToOkta = (username: string, password: string) => {
+  Cypress.log({
+    displayName: 'OKTA LOGIN',
+    message: [`🔐 Authenticating | ${username}`],
+    autoEnd: false,
+  })
+
+  cy.visit('/')
+  cy.origin(
+    Cypress.env('okta_domain'),
+    { args: { username, password } },
+    ({ username, password }) => {
+      cy.get('input[name="identifier"]').type(username)
+      cy.get('input[name="credentials.passcode"]').type(password, {
+        log: false,
+      })
+      cy.get('[type="submit"]').click()
+    }
+  )
+
+  cy.get('[data-test="sidenav-username"]').should('contain', username)
+}
+// right now our custom command is light. More on this later!
+Cypress.Commands.add('loginByOkta', (username: string, password: string) => {
+  return loginToOkta(username, password)
+})
+```
+
+Now, we can use our `loginByOkta` command in the test. Below is our test to
+login as a user via [Okta](https://okta.com) and run a few basic sanity checks.
+
+<Alert type="success">
+
+The
+[runnable version of this test](https://github.com/cypress-io/cypress-realworld-app/blob/develop/cypress/tests/ui-auth-providers/okta.spec.ts)
+is in the
+[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app).
+
+</Alert>
+
+```jsx
+describe('Okta', function () {
+  beforeEach(function () {
+    cy.task('db:seed')
+    cy.loginByOkta(Cypress.env('okta_username'), Cypress.env('okta_password'))
+  })
+
+  it('verifies signed in user does not have a bank account', function () {
+    cy.get('[data-test="sidenav-bankaccounts"]').click()
+    cy.get('[data-test="empty-list-header"]').should('be.visible')
+  })
+})
+```
+
+<DocsVideo src="/img/examples/okta-origin.mp4"></DocsVideo>
+
+Lastly, we can refactor our login command to take advantage of
+[`cy.session()`](/api/commands/session) to store our logged in user so we don't
+have to reauthenticate with everything test.
+
+```jsx
+Cypress.Commands.add('loginByOkta', (username: string, password: string) => {
+  cy.session(
+    `okta-${username}`,
+    () => {
+      return loginToOkta(username, password)
+    },
+    {
+      validate() {
+        cy.visit('/')
+        cy.get('[data-test="sidenav-username"]').should('contain', username)
+      },
+    }
+  )
+})
+```
+
+<DocsVideo src="/img/examples/okta-session-restore.mp4"></DocsVideo>
+
+### Programmatic Login
+
 Next, we will write a command named `loginByOktaApi` to perform a programmatic
-login into [Okta](https://okta.com) and set an item in localStorage with the
+login into [Okta](https://okta.com) and set an item in `localStorage` with the
 authenticated users details, which we will use in our application code to verify
 we are authenticated under test.
 
+In order to make sure this is enabled inside the
+[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app),
+Please set the `REACT_APP_OKTA_PROGRAMMATIC` environment variable to `true`.
+
 The `loginByOktaApi` command will execute the following steps:
 
 1. Use the
@@ -166,16 +277,20 @@ is in the
 
 </Alert>
 
-## Adapting an Okta App for Testing
+### Adapting an Okta App for Testing
 
 <Alert type="info">
 
 <strong class="alert-header">Note</strong>
 
-The previous sections focused on the recommended Okta authentication practice
-within Cypress tests. To use this practice it is assumed you are testing an app
+The previous section focused on the programmatic Okta authentication practice
+within Cypress tests. To use this practice, it is assumed you are testing an app
 appropriately built or adapted to use Okta.
 
+Unlike programmatic login, authenticating with
+[`cy.origin()`](/api/commands/origin) does not require adapting the application
+to work. This step is only needed if implementing programmatic login.
+
 The following sections provides guidance on building or adapting an app to use
 Okta authentication.
 
@@ -202,7 +317,7 @@ Use the `yarn dev:okta` command when starting the
 
 </Alert>
 
-### Adapting the back end
+#### Adapting the back end
 
 In order to validate API requests from the frontend, we install
 [Okta JWT Verifier for Node.js](https://github.com/okta/okta-oidc-js/tree/master/packages/jwt-verifier)
@@ -281,7 +396,7 @@ if (process.env.REACT_APP_OKTA) {
 // routes ...
 ```
 
-### Adapting the front end
+#### Adapting the front end
 
 We need to update our front end React app to allow for authentication with
 [Okta](https://okta.com) using the