Update README.md to reference new "Integrator" accounts and remove remove references to Okta CLI tool. (#764)

* Update README.md to reference new "Integrator" accounts and remove references to Okta CLI tool.

* Update README.md to use a more recognizable example value for ISSUER.

* Fix port number for accessing running application.

* Remove stale "configure okta resources" section.

---------

Co-authored-by: Joe <schoolyd@teamschoolyd.org>

Author: cavazosjoe

README.md

@@ -18,26 +18,64 @@ This code sample demonstrates:
 
 ## Prerequisites
 
-Before running this sample, you will need the following:
+Before you begin, you’ll need an Okta Integrator Free Plan account. To get one, sign up for an [Integrator account](https://developer.okta.com/login). Once you have an account, sign in to your [Integrator account](https://developer.okta.com/login). Next, in the Admin Console:
+
+1. Go to **Applications > Applications**
+2. Click **Create App Integration**
+3. Select **OIDC - OpenID Connect** as the sign-in method
+4. Select **Single-Page Application** as the application type, then click **Next**
+5. Enter an app integration name (e.g. "My Vue SPA")
+6. In the **Grant type** section, ensure both **Authorization Code** and **Refresh Token** are selected
+7. Configure the redirect URIs:
+- **Sign-in redirect URIs:** `http://localhost:8080/login/callback`
+- **Sign-out redirect URIs:** `http://localhost:8080`
+8. In the **Controlled access** section, select the appropriate access level
+9. Click **Save**
 
-* [The Okta CLI Tool](https://github.com/okta/okta-cli#installation)
-* An Okta Developer Account (create one using `okta register`, or configure an existing one with `okta login`)
+## Configure Okta resources
 
-## Get the Code
+**Verify Authorization Server**
 
-Grab and configure this project using `okta start vue`.
+When using a custom authorization server, you need to set up authorization policies. Complete these additional steps:
+
+1. In the Admin Console, go to **Security > API > Authorization Servers**
+2. Select your custom authorization server (`default`)
+3. On the **Access Policies** tab, ensure you have at least one policy:
+    - If no policies exist, click **Add New Access Policy**
+    - Give it a name like “Default Policy”
+    - Set **Assign to** to “All clients”
+    - Click **Create Policy**
+4. For your policy, ensure you have at least one rule:
+    - Click **Add Rule** if no rules exist
+    - Give it a name like “Default Rule”
+    - Set **Grant type** is to “Authorization Code”
+    - Set **User** is to “Any user assigned the app”
+    - Set **Scopes requested** to “Any scopes”
+    - Click **Create Rule**
+
+For more details, see the [Custom Authorization Server documentation](https://developer.okta.com/docs/concepts/auth-servers/#custom-authorization-server).
 
-Follow the instructions printed to the console.
+## Get the Code
 
-## Configure Okta resources
+```bash
+git clone https://github.com/okta-samples/okta-vue-sample.git
+cd okta-vue-sample
+```
+
+Update your `.okta.env` file with the values from your application's configuration:
 
-**Enable Refresh Tokens**
+```text
+ISSUER=https://integrator-1337.okta.com
+CLIENT_ID=0oab8eb55Kb9jdMIr5d6
+```
 
-Sign into your [Okta Developer Edition account](https://developer.okta.com/login/) to add a required setting to your Vue Okta app to avoid third-party cookies. Navigate to **Applications** > **Applications** and select "okta-vue-sample" application to edit. Find the **General Settings** and press **Edit**. Enable **Refresh Token** in the **Grant type** section. **Save** your changes.
+### Where are my new app's credentials?
 
-**Verify Authorization Server**
+Creating an OIDC Single-Page App manually in the Admin Console configures your Okta Org with the application settings. You may also need to configure trusted origins for `http://localhost:8080` in **Security > API > Trusted Origins**.
 
-This repo calls a custom resource server to demonstrate making a protected resource request using an access token. Ensure that your default custom authorization server has an access policy. Add an access policy if it's not there. See [Create access polices](https://help.okta.com/okta_help.htm?type=oie&id=ext-create-access-policies).
+After creating the app, you can find the configuration details on the app’s **General** tab:
+- **Client ID**: Found in the **Client Credentials** section
+- **Issuer**: Found in the **Issuer URI** field for the authorization server that appears by selecting **Security > API** from the navigation pane.
 
 ## Run the Example
 
@@ -53,7 +91,7 @@ With variables set, start your app:
 npm run dev
 ```
 
-Navigate to http://localhost:5173 in your browser.
+Navigate to http://localhost:8080 in your browser.
 
 If you see a home page that prompts you to login, then things are working!  Clicking the **Log in** button will redirect you to the Okta hosted sign-in page.