Routing samples

.eslintignore

@@ -2,3 +2,4 @@ node_modules
 dist
 /scripts
 build
+test/apps/react-routing/e2e

.gitignore

@@ -8,3 +8,4 @@ testenv
 yalc.lock
 .yarnrc
 .yarn
+.env

generator/_templates/samples/config/new/bs-config.js.t

@@ -0,0 +1,18 @@
+---
+to: ../samples/<%= dest %>/bs-config.js
+force: true
+---
+// "IMPORTANT: THIS FILE IS GENERATED, CHANGES SHOULD BE MADE WITHIN '@okta/generator'"
+
+module.exports = {
+  port: process.env.PORT || 8080,
+  logLevel: 'silent',
+  files: ['./dist/**/*.{html,htm,css,js}'],
+  server: { 
+    baseDir: './dist',
+    middleware: {
+      0: null
+    }
+  },
+  open: false
+};

generator/_templates/samples/config/new/package.json.t

@@ -17,7 +17,9 @@ force: true
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+<% if (reactRouterDomVersion !== 'false') { -%>
     "react-router-dom": "<%= reactRouterDomVersion %>",
+<% } -%>
     "@okta/okta-auth-js": "^<%= oktaAuthJsVersion %>",
 <% if (useSiw === 'true') { -%>
     "@okta/okta-signin-widget": "^<%= siwVersion %>",
@@ -28,6 +30,10 @@ force: true
 <% } -%>
 <% if (usePolyfill === 'true') { -%>
     "text-encoding": "0.7.0",
+<% } -%>
+<% if (reachRouterVersion !== 'false') { -%>
+    "@reach/router":"<%= reachRouterVersion %>",
+    "@types/reach__router": "<%= reachRouterVersion %>",
 <% } -%>
     "@okta/okta-react": "*"
   },

generator/_templates/samples/config/new/vite.config.js.t

@@ -44,7 +44,7 @@ export default defineConfig({
     }
   },
   server: {
-    port: 8080
+    port: process.env.PORT || 8080
   },
   build: {
     rollupOptions: {

generator/config.js

@@ -17,6 +17,7 @@ module.exports = [
     useSemanticUi: true,
     usePolyfill: true,
     reactRouterDomVersion: '5.2.0',
+    reachRouterVersion: false,
     specs: [
       'okta-hosted-login'
     ]
@@ -27,6 +28,7 @@ module.exports = [
     useSemanticUi: true,
     usePolyfill: true,
     reactRouterDomVersion: '5.2.0',
+    reachRouterVersion: false,
     specs: [
       'custom-login'
     ]
@@ -37,6 +39,7 @@ module.exports = [
     useSemanticUi: false,
     usePolyfill: false,
     reactRouterDomVersion: '5.2.0',
+    reachRouterVersion: false,
     specs: [
       'doc-embedded-widget'
     ]
@@ -47,16 +50,59 @@ module.exports = [
     useSemanticUi: false,
     usePolyfill: false,
     reactRouterDomVersion: '5.2.0',
+    reachRouterVersion: false,
     specs: [
       'doc-direct-auth'
     ]
   },
   {
     name: '@okta/samples.react.react-router-dom-v6',
+    nested: 'routing/',
     useSiw: false,
     useSemanticUi: false,
     usePolyfill: false,
     reactRouterDomVersion: '6.2.1',
+    reachRouterVersion: false,
+    specs: []
+  },
+  {
+    name: '@okta/samples.react.react-router-dom-v6-hash',
+    nested: 'routing/',
+    useSiw: false,
+    useSemanticUi: false,
+    usePolyfill: false,
+    reactRouterDomVersion: '6.2.1',
+    reachRouterVersion: false,
+    specs: []
+  },
+  {
+    name: '@okta/samples.react.react-router-dom-v5',
+    nested: 'routing/',
+    useSiw: false,
+    useSemanticUi: false,
+    usePolyfill: false,
+    reactRouterDomVersion: '5.3.0',
+    reachRouterVersion: false,
+    specs: []
+  },
+  {
+    name: '@okta/samples.react.react-router-dom-v5-hash',
+    nested: 'routing/',
+    useSiw: false,
+    useSemanticUi: false,
+    usePolyfill: false,
+    reactRouterDomVersion: '5.3.0',
+    reachRouterVersion: false,
+    specs: []
+  },
+  {
+    name: '@okta/samples.react.reach-router',
+    nested: 'routing/',
+    useSiw: false,
+    useSemanticUi: false,
+    usePolyfill: false,
+    reactRouterDomVersion: '5.3.0',
+    reachRouterVersion: "^1.3.4",
     specs: []
   }
 ];

generator/gulpfile.js/samples.js

@@ -23,8 +23,8 @@ const samplesConfig = (() => {
   return configs.map(config => {
     const nameParts = config.name.split('.');
     const name = nameParts[nameParts.length - 1];
-    const dest = `${name}`;
-    return { 
+    const dest = `${config.nested || ''}${name}`;
+    return {
       ...config, 
       ...versions, 
       name, 

package.json

@@ -13,7 +13,7 @@
     "start": "yarn workspace @okta/test.app.test-harness-app start",
     "test": "yarn lint && yarn test:unit && yarn test:e2e",
     "test:e2e": "yarn workspace @okta/test.e2e test",
-    "test:e2e:samples": "yarn workspace @okta/test.e2e-samples test",
+    "test:e2e:samples": "yarn workspace @okta/test.e2e-samples test && yarn workspace @okta/test.e2e.routing-samples test",
     "test:unit": "jest",
     "bundle": "rollup -c",
     "dev": "yarn bundle --watch",
@@ -120,11 +120,14 @@
       "env",
       "generator",
       "samples/**/*",
+      "samples/routing/**/*",
       "test/apps/*",
       "test/e2e/harness",
-      "test/e2e-samples"
+      "test/e2e-samples",
+      "test/routing-samples"
     ],
     "nohoist": [
+      "**/@wdio/**",
       "**/@okta/okta-auth-js",
       "**/react",
       "**/react/**",

samples/custom-login/bs-config.js

@@ -1,7 +1,7 @@
 // "IMPORTANT: THIS FILE IS GENERATED, CHANGES SHOULD BE MADE WITHIN '@okta/generator'"
 
 module.exports = {
-  port: 8080,
+  port: process.env.PORT || 8080,
   logLevel: 'silent',
   files: ['./dist/**/*.{html,htm,css,js}'],
   server: { 

samples/custom-login/vite.config.js

@@ -40,7 +40,7 @@ export default defineConfig({
     }
   },
   server: {
-    port: 8080
+    port: process.env.PORT || 8080
   },
   build: {
     rollupOptions: {

samples/doc-direct-auth/bs-config.js

@@ -1,7 +1,7 @@
 // "IMPORTANT: THIS FILE IS GENERATED, CHANGES SHOULD BE MADE WITHIN '@okta/generator'"
 
 module.exports = {
-  port: 8080,
+  port: process.env.PORT || 8080,
   logLevel: 'silent',
   files: ['./dist/**/*.{html,htm,css,js}'],
   server: { 

samples/doc-direct-auth/vite.config.js

@@ -40,7 +40,7 @@ export default defineConfig({
     }
   },
   server: {
-    port: 8080
+    port: process.env.PORT || 8080
   },
   build: {
     rollupOptions: {

samples/doc-embedded-widget/bs-config.js

@@ -1,7 +1,7 @@
 // "IMPORTANT: THIS FILE IS GENERATED, CHANGES SHOULD BE MADE WITHIN '@okta/generator'"
 
 module.exports = {
-  port: 8080,
+  port: process.env.PORT || 8080,
   logLevel: 'silent',
   files: ['./dist/**/*.{html,htm,css,js}'],
   server: { 

samples/doc-embedded-widget/vite.config.js

@@ -40,7 +40,7 @@ export default defineConfig({
     }
   },
   server: {
-    port: 8080
+    port: process.env.PORT || 8080
   },
   build: {
     rollupOptions: {

samples/okta-hosted-login/bs-config.js

@@ -1,7 +1,7 @@
 // "IMPORTANT: THIS FILE IS GENERATED, CHANGES SHOULD BE MADE WITHIN '@okta/generator'"
 
 module.exports = {
-  port: 8080,
+  port: process.env.PORT || 8080,
   logLevel: 'silent',
   files: ['./dist/**/*.{html,htm,css,js}'],
   server: { 

samples/okta-hosted-login/vite.config.js

@@ -40,7 +40,7 @@ export default defineConfig({
     }
   },
   server: {
-    port: 8080
+    port: process.env.PORT || 8080
   },
   build: {
     rollupOptions: {

samples/routing/reach-router/README.md

@@ -0,0 +1,26 @@
+# Okta Reach Router Sample App
+
+Sample app to demonstrate how to use `reach-router` with `@okta/okta-react`.
+
+## Install
+```bash
+$ git clone https://github.com/okta/okta-react.git
+$ yarn
+```
+
+## Configure
+Add an `testenv` file with the following fields
+```
+SPA_CLIENT_ID=<YOUR CLIENT ID>
+ISSUER=<YOUR ISSUER URL>
+```
+
+## Start
+```bash
+$ yarn workspace @okta/samples.react.reach-router start
+```
+OR
+```bash
+$ cd ./samples/reach-router
+$ yarn start
+```

samples/react-router-dom-v6/bs-config.js → samples/routing/reach-router/bs-config.js

@@ -1,7 +1,7 @@
 // "IMPORTANT: THIS FILE IS GENERATED, CHANGES SHOULD BE MADE WITHIN '@okta/generator'"
 
 module.exports = {
-  port: 8080,
+  port: process.env.PORT || 8080,
   logLevel: 'silent',
   files: ['./dist/**/*.{html,htm,css,js}'],
   server: { 

samples/react-router-dom-v6/index.html → samples/routing/reach-router/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>Reach Router Sample</title>
   </head>
   <body>
     <div id="root"></div>

samples/routing/reach-router/package.json

@@ -0,0 +1,28 @@
+{
+  "comment": "IMPORTANT: THIS FILE IS GENERATED, CHANGES SHOULD BE MADE WITHIN '@okta/generator'",
+  "name": "@okta/samples.react.reach-router",
+  "private": true,
+  "version": "0.3.0",
+  "scripts": {
+    "prestart": "vite build",
+    "start": "lite-server", 
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "5.3.0",
+    "@okta/okta-auth-js": "^6.2.0",
+    "@reach/router":"^1.3.4",
+    "@types/reach__router": "^1.3.4",
+    "@okta/okta-react": "*"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^1.0.7",
+    "vite": "^2.8.0",
+    "lite-server": "^2.6.1",
+    "dotenv": "^16.0.0"
+  }
+}

samples/routing/reach-router/src/App.tsx

@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2017-Present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import React from 'react';
+
+import { navigate } from '@reach/router';
+import { Security } from '@okta/okta-react';
+import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
+
+import Footer from './components/Footer';
+import Nav from './components/Nav';
+import Routes from './components/Routes';
+
+function App() {
+  const oktaAuth = new OktaAuth({
+    issuer: process.env.ISSUER,
+    clientId: process.env.SPA_CLIENT_ID,
+    redirectUri: window.location.origin + '/login/callback'
+  });
+
+  const restoreOriginalUri = (_oktaAuth: any,  originalUri: string) => {
+    navigate(toRelativeUrl(originalUri || '/', window.location.origin), { replace: true });
+  };
+
+  return (
+    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
+      <div className="App">
+        <header className="App-header">
+          <Nav />
+        </header>
+        <main>
+          <Routes />
+        </main>
+        <Footer />
+      </div>
+    </Security>
+  );
+}
+
+export default App;