Changes for Heroku integration

README.md

@@ -38,6 +38,25 @@ Please find the sample that fits your use-case from the table below.
 
 [Okta Vue Library]: https://github.com/okta/okta-oidc-js/tree/master/packages/okta-vue
 
+## Quick Start: Automatic Setup with Heroku
+
+You need a [Heroku](https://signup.heroku.com/) account to follow these instructions.
+
+You can create a free Okta Developer org and deploy this app directly to Heroku by clicking the purple button:
+
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)
+
+To deploy the app, you will need an Okta org setup as described in the section above.
+
+You will also need to replace the config values for `ISSUER` and `CLIENT_ID` in Heroku configuration based on your Okta org.
+Also be sure to add your Heroku app's base URL to the list of trusted origins in your Okta admin settings.
+
+After you deploy the app, click on **View** on the result screen to navigate to the newly deployed app.
+
+Click **Login** button on the app. Browser displays the sign-in page to authenticate. 
+
+You can use your Okta user credentials to login to the application. That's it! You've successfully logged in using Okta. 
+
 ## Running the resource server
 The samples include a page which accesses a protected resource (messages). To start the sample resource server:
 

app.json

@@ -0,0 +1,33 @@
+{
+  "name": "Custom Login Sample",
+  "description": "Sample that demonstrates use of Custom Login/Embedded Sign-in Widget",
+  "repository": "https://github.com/okta/samples-js-vue/custom-login",
+  "keywords": ["oidc", "identity", "security", "authentication"],
+  "success_url": "/",
+  "env": {
+    "ISSUER": {
+      "description": "Issuer URL for your org",
+      "value": "https://qa-st-cda1.oktapreview.com/oauth2/default"
+    },
+    "CLIENT_ID": {
+      "description": "Client ID for your application",
+      "value": "0oa1mb3urzAsFdkNc0x7"
+    },
+    "NPM_CONFIG_PRODUCTION": {
+      "description": "npm config production",
+      "value": "false"
+    },
+    "OKTA_TESTING_DISABLEHTTPSCHECK": {
+      "description": "Okta test disable https check",
+      "value": "false"
+    },
+    "USE_INTERACTION_CODE": {
+      "description": "Use interaction code flow",
+      "value": "true"
+    },
+    "YARN_PRODUCTION": {
+      "description": "Yarn production",
+      "value": "false"
+    }
+  }
+}

custom-login/README.md

@@ -6,6 +6,24 @@ This example shows you how to use the [Okta Vue Library][] to log in a user to a
 
 This example is built with the [Vue CLI][].
 
+## Quick Start: Automatic Setup with Heroku
+
+You need a [Heroku](https://signup.heroku.com/) account to follow these instructions.
+
+You can create a free Okta Developer org and deploy this app directly to Heroku by clicking the purple button:
+
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)
+
+After you deploy the app, click on **View** on the result screen to navigate to the newly deployed app.
+
+Open your browser's developer tools view and choose the **Network** tab.
+
+Click **Profile (pkce)** at the top of the app. You are redirected to your Okta org to authenticate. BUT, you won't yet know the credentials.
+
+Back on the result tab from the deployment, click on **Manage App**. This brings you to the Heroku dashboard for the app. Click **Settings** and then **Reveal Config Vars**. Here, you see values for `OKTA_ADMIN_EMAIL` and `OKTA_ADMIN_PASSWORD`. You can use these values to login to the app on the other tab.
+
+After you login, you'll see an `ID Token`, `Access Token` and profile details.
+
 ## Prerequisites
 
 Before running this sample, you will need the following: