chore: add deploy to heroku button to the repo

OKTA-429490
<<<Jenkins Check-In of Tested SHA: afb39e1 for [email protected]>>>
Artifact: samples-js-react
Files changed count: 21
PR Link: "#225"

.gitignore

@@ -1,4 +1,5 @@
 build2
+build
 node_modules
 dist
 npm-debug.log

.travis.yml

@@ -15,4 +15,3 @@ notifications:
     secure: m930AIv4/BRdNuh+M0aHUbZx1UyNTFPynbSP7mLgXeLclyWCUzBqcX+WLJnjJRYwqQNQAnzJIvHNH5FQZWLmDW11DW/wzS9vdiOk/l4e58qVPhYAkXfY2ltQUV5y5C5K6YN/8oiiJBnt/EhDlaMeYkHWeVpNUTK5jGYJWsrQb3vVojW9nnUNpU8mqiuFQQOvrmxeuoFzBdxRCPr8Ny5IF5BoQVZlxP4lOjbZyz9N4TfW6fi4Mbmkyw1E4IZQ3uca4vdO7UcbnOMXqEfO2N0ScO1wGkyG9BU/vncLeXgCU8vvZ0DTMBTfpe50thud0AFXWOCQ9XgCrNEguCuFsRoRe/CjdI6pnHgWGQaHfA3lqLXmJWMrek+0WFaCXN2KeH0IrbLL/qztRmd1dSzPPduVHhGrVgLv1QZFYf9j2ZzdgOfqTwJVaSiPdXVfsWHtKVN/mh7Faa2LdfCBpPmtsPlGdMut88+wGXZH9oejONmJ2qNj9FWXgvaQoTfQCK1XA9+m/9XdaVUEZxuKuymWSNByfSEweoYj6xxr+xpnh4JI5ueTBXVMj0uA+InY/Bqg6KkInoD6Yxpx5haqXo3lgxfTAfbL2VSpG1iIOUT9xjR2cerHmWsgoTae8UCRXrApnByVeL5I2Hu2mTK4Be8H9l4n6uuSt8I0M+4ug0Ib+gRXC1U=
     on_success: never
     on_failure: always
-

README.md

@@ -37,6 +37,27 @@ Please find the sample that fits your use-case from the table below.
 
 [Okta React Library]: https://github.com/okta/okta-react
 
+## 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, you will also need to go to your Okta account to [enable cors](https://developer.okta.com/docs/guides/enable-cors/granting-cors/) and configure the `login` and `logout` redirect URI in your client application settings for the newly deployed app domain if they are not preconfigured. 
+
+**Note:** Due to sample apps are served under different routes, base urls will be needed for the redirect uris, e.g.`https://<myapp.heroku.com>/okta-hosted-login` or `https://<myapp.heroku.com>/custom-login`.
+
+Finally, click on **View** on the result screen to navigate to the newly deployed app.
+
+You can use your Okta user credentials to login to the applications. 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": "React Sample Applications for Okta",
+  "description": "Sample applications that demonstrate various Okta use-cases in your React application.",
+  "repository": "https://github.com/okta/samples-js-react",
+  "keywords": ["oidc", "identity", "security", "authentication"],
+  "success_url": "/",
+  "env": {
+    "ISSUER": {
+      "description": "Issuer URL for your org",
+      "value": "https://{yourDomain}/oauth2/default"
+    },
+    "CLIENT_ID": {
+      "description": "Client ID for your application",
+      "value": "CLIENT_ID"
+    },
+    "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/.gitignore

@@ -6,9 +6,6 @@
 # testing
 /coverage
 
-# production
-/build
-
 # misc
 .DS_Store
 .env.local

custom-login/package.json

@@ -31,7 +31,6 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.1.1",
-    "h": "^1.0.0",
     "react-app-rewired": "^2.1.8",
     "react-scripts": "^4.0.3",
     "source-map-loader": "^1.1.0"

custom-login/src/Login.jsx

@@ -35,7 +35,7 @@ const Login = ({ setCorsErrorModalOpen }) => {
       baseUrl: issuer.split('/oauth2')[0],
       clientId,
       redirectUri,
-      logo: '/react.svg',
+      logo: `${process.env.PUBLIC_URL}/react.svg`,
       i18n: {
         en: {
           'primaryauth.title': 'Sign in to React & Company',

custom-login/src/Navbar.jsx

@@ -25,8 +25,9 @@ const Navbar = ({ setCorsErrorModalOpen }) => {
   const isCorsError = (err) => (err.name === 'AuthApiError' && !err.errorCode && err.xhr.message === 'Failed to fetch');
 
   const logout = async () => {
+    const basename = window.location.origin + history.createHref({ pathname: '/' });
     try {
-      await oktaAuth.signOut();
+      await oktaAuth.signOut({ postLogoutRedirectUri: basename });
     } catch (err) {
       if (isCorsError(err)) {
         setCorsErrorModalOpen(true);
@@ -45,7 +46,7 @@ const Navbar = ({ setCorsErrorModalOpen }) => {
       <Menu fixed="top" inverted>
         <Container>
           <Menu.Item header>
-            <Image size="mini" src="/react.svg" />
+            <Image size="mini" src={`${process.env.PUBLIC_URL}/react.svg`} />
             &nbsp;
             <Link to="/">Okta-React Sample Project</Link>
           </Menu.Item>

custom-login/src/config.js

@@ -1,7 +1,8 @@
 const CLIENT_ID = process.env.CLIENT_ID || '{clientId}';
 const ISSUER = process.env.ISSUER || 'https://{yourOktaDomain}.com/oauth2/default';
 const OKTA_TESTING_DISABLEHTTPSCHECK = process.env.OKTA_TESTING_DISABLEHTTPSCHECK || false;
-const REDIRECT_URI = `${window.location.origin}/login/callback`;
+const BASENAME = process.env.PUBLIC_URL || '';
+const REDIRECT_URI = `${window.location.origin}${BASENAME}/login/callback`;
 let USE_INTERACTION_CODE = false;
 if (process.env.USE_INTERACTION_CODE === 'true') {
   USE_INTERACTION_CODE = true;
@@ -20,4 +21,7 @@ export default {
   resourceServer: {
     messagesUrl: 'http://localhost:8000/api/messages',
   },
+  app: {
+    basename: BASENAME,
+  },
 };

custom-login/src/index.js

@@ -16,14 +16,13 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import 'semantic-ui-css/semantic.min.css';
 import './polyfills';
 import App from './App';
+import config from './config';
 import './index.css';
-import registerServiceWorker from './registerServiceWorker';
 
 /* eslint-disable react/jsx-filename-extension */
 ReactDOM.render(
-  <Router>
+  <Router basename={config.app.basename}>
     <App />
   </Router>,
   document.getElementById('root'),
 );
-registerServiceWorker();

heroku/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>React Sample Applications for Okta</title>
+  <link rel="shortcut icon" href="/favicon.ico">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" crossorigin="anonymous">
+  <style>
+    body { padding-top: 50px; }
+  </style>
+</head>
+<body>
+
+  <div class="ui text container">
+    <h1 class="ui large header"><img class="ui large image" src="react.svg" />React Sample Applications for Okta</h1>
+    <div class="ui divider"></div>
+
+    <p>Congratulations! You've successfully started this application.</p>
+    <p>Please find the sample that fits your use-case from the table below.</p>
+
+    <table class="ui celled table">
+      <thead>
+        <tr>
+          <th>Sample</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td data-label="Sample"><a href="/okta-hosted-login">Okta-Hosted Login</a></td>
+          <td data-label="Description">A React application that will redirect the user to the Okta-Hosted login page of your Org for authentication. The user is redirected back to the React application after authenticating.</td>
+        </tr>
+        <tr>
+          <td data-label="Sample"><a href="/custom-login">Custom Login</a></td>
+          <td data-label="Description">A React application that uses the Okta Sign-In Widget within the React application to authenticate the user.</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+</html>

heroku/server.js

@@ -0,0 +1,25 @@
+const express = require('express');
+const path = require('path');
+
+const app = express();
+const port = process.env.PORT || 8080;
+
+app.use(express.static('heroku'));
+
+app.use('/okta-hosted-login', express.static(path.join(__dirname, '..', 'okta-hosted-login/build')));
+
+app.use('/custom-login', express.static(path.join(__dirname, '..', 'custom-login/build')));
+
+app.use('*', (req, res) => {
+  if (req.originalUrl.startsWith('/okta-hosted-login')) {
+    res.sendFile(path.resolve(__dirname, '..', 'okta-hosted-login', 'build', 'index.html'));
+  } else if (req.originalUrl.startsWith('/custom-login')) {
+    res.sendFile(path.resolve(__dirname, '..', 'custom-login', 'build', 'index.html'));
+  } else if (req.originalUrl === '/') {
+    res.sendFile(path.resolve(__dirname, 'index.html'));
+  } else {
+    res.status(404).send('Not Found');
+  }
+});
+
+app.listen(port, () => console.log(`App is live on port ${port}!`));