Updated package.json to include all non-breaking security fixes

.env-example

@@ -0,0 +1,5 @@
+VV_AUTHORITY='https://auth.yoursite.com'
+VV_CLIENT_ID='U_AYUjkfQxxxxxxx'
+VV_CALLBACK_URI='http://localhost:3000/dashboard'
+VV_POST_LOGOUT_URI='http://localhost:3000'
+

.eslintrc.js

@@ -78,6 +78,7 @@ module.exports = {
  'redux-saga/no-yield-in-race': 2,
  'redux-saga/yield-effects': 2,
  'require-yield': 0,
+ 'react/prop-types': 'off',
  },
  settings: {
  'import/resolver': {

.gitignore

@@ -8,3 +8,7 @@ stats.json
 .DS_Store
 npm-debug.log
 .idea
+.env
+
+#npm files not appropriate for boilerplate
+package-lock.json

DOCUMENTATION.md

@@ -0,0 +1,63 @@
+# Eagles Documentation
+
+## Configuration
+
+**Vault Vision Configuration [Visit Vault Vision](https://manage.vaultvision.com/register)**
+
+1. Create a [new user account at Vault Vision](https://manage.vaultvision.com/register) then complete the 'Getting Started' Wizard. Accepting all the defaults will allow you to run this boilerplate locally. Make sure you select a 'Single Page Application' as the type of application during setup
+
+2. At the end of the 'Getting Started' Wizard you will be shown the proper environment variables, copy-paste or download and save them into the .env file at the root of this project. These environment variables should match the same structure shown in the .env-example file at the root of this project.
+
+## Installation
+
+How to install boilerplate
+
+ ```bash
+ git clone https://github.com/vaultvision/react-boilerplate-vv.git
+ # change directory
+ cd react-boilerplate-vv
+ # install dependencies
+ npm install --legacy-peer-deps
+
+ # start application
+ npm start
+ ```
+
+
+**React Configuration**
+1. create a new .env file using the .env-example with the [values from Vault Vision](https://manage.vaultvision.com/go#applications)
+2. Replace each variable with necessary values
+
+```bash
+#.env example
+# VV_AUTHORITY : tenant url
+VV_AUTHORITY = 
+# VV_CLIENT_ID: application client id
+VV_CLIENT_ID =
+# VV_CALLBACK_URI: specified callback uri after authentication 
+# make sure to add url in your application callback url field
+VV_CALLBACK_URI =
+# VV_POST_LOGOUT_URI: specified redirect uri after logout
+VV_POST_LOGOUT_URI =
+```
+
+In **app.js**
+wrap the pages and/or routes with the PrivateRoute Component
+
+**Example**
+
+```bash
+ {/** gets all request to /dashboard and renders the dashboardPage, and requires auth */}
+ <PrivateRoute path="/dashboard" component={DashboardPage} />
+ {/** gets all request to /profile and renders the profilePage, and requires auth */}
+ <PrivateRoute path="/profile" component={Profile} />
+ {/** The /oidc/callback route is what will receive the 
+```
+
+## How to see your new React application now with user authentication from Vault Vision
+1. visit https://localhost:3000
+2. Click on login and get redirected to vault vision authentication page
+3. After successful authentication you would be redirected to specified **Callback URI**
+
+
+

README.md

@@ -3,7 +3,7 @@
 <br />
 
 <div align="center"><strong>Start your next react project in seconds</strong></div>
-<div align="center">A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices</div>
+<div align="center">A highly scalable boilerplate foundation with the best DX and a focus on performance and best practices</div>
 
 <br />
 
@@ -73,9 +73,6 @@
  <dt>Industry-standard i18n internationalization support</dt>
  <dd>Scalable apps need to support multiple languages, easily add and support multiple languages with `react-intl`.</dd>
 
- <dt>Offline-first</dt>
- <dd>The next frontier in performant web apps: availability without a network connection from the instant your users load the app.</dd>
-
  <dt>Static code analysis</dt>
  <dd>Focus on writing new features without worrying about formatting or code quality. With the right editor setup, your code will automatically be formatted and linted as you work.</dd>
 
@@ -96,7 +93,7 @@ But wait... there's more!
 
 There’s also a <a href="https://vimeo.com/168648012">fantastic video</a> on how to structure your React.js apps with scalability in mind. It provides rationale for the majority of boilerplate's design decisions.
 
-<sub><i>Keywords: React.js, Redux, Hot Reloading, ESNext, Babel, react-router, Offline First, ServiceWorker, `styled-components`, redux-saga, FontFaceObserver</i></sub>
+<sub><i>Keywords: React.js, Redux, Hot Reloading, ESNext, Babel, react-router, `styled-components`, redux-saga, FontFaceObserver</i></sub>
 
 ## Quick start
 
@@ -167,3 +164,4 @@ This project would not be possible without the support of these amazing folks. [
 
 This project is licensed under the MIT license, Copyright (c) 2019 Maximilian
 Stoiber. For more information see `LICENSE.md`.
+

app/.htaccess

@@ -41,12 +41,4 @@
  # Rewrite all requests to the root
  RewriteRule ^(.*) /
 
-</ifModule>
-
-<IfModule mod_headers.c>
- # Do not cache sw.js, required for offline-first updates.
- <FilesMatch "sw\.js$">
- Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
- Header set Pragma "no-cache"
- </FilesMatch>
-</IfModule>
+</ifModule>

app/.nginx.conf

@@ -81,15 +81,6 @@ server {
  try_files $uri /index.html;
  }
 
-# Do not cache sw.js, required for offline-first updates.
- location /sw.js {
- add_header Cache-Control "no-cache";
- proxy_cache_bypass $http_pragma;
- proxy_cache_revalidate on;
- expires off;
- access_log off;
- }
-
 ##
 # If you want to use Node/Rails/etc. API server
 # on the same port (443) config Nginx as a reverse proxy.

app/app.js

@@ -87,10 +87,3 @@ if (!window.Intl) {
 } else {
  render(translationMessages);
 }
-
-// Install ServiceWorker and AppCache in the end since
-// it's not most important operation and if main code fails,
-// we do not want it installed
-if (process.env.NODE_ENV === 'production') {
- require('offline-plugin/runtime').install(); // eslint-disable-line global-require
-}

app/components/AuthButton/buttonStyles.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+/** ---- Vault Vision added code file ---- */
+/**
+ * Button Styled component for authButton
+ */
+export const Button = styled.button`
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0.25em 2em;
+ text-decoration: none;
+ border-radius: 4px;
+ -webkit-font-smoothing: antialiased;
+ -webkit-touch-callout: none;
+ user-select: none;
+ cursor: pointer;
+ outline: 0;
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ font-size: 16px;
+ border: 2px solid #41addd;
+ color: #41addd;
+ margin: 1rem 0;
+
+ &:active {
+ background: #41addd;
+ color: #fff;
+ }
+`;

app/components/AuthButton/signin.jsx

@@ -0,0 +1,22 @@
+/** ---- Vault Vision added code file ---- */
+/**
+ * SignInButton Component
+ * The button handles signIn process
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from './buttonStyles';
+import { userManager } from '../../utils/userManager';
+
+// eslint-disable-next-line react/prop-types
+function SignInButton({ children }) {
+ return (
+ <Button onClick={() => userManager.signinRedirect()}>{children}</Button>
+ );
+}
+
+SignInButton.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+export default SignInButton;

app/components/AuthButton/signout.jsx

@@ -0,0 +1,27 @@
+/** ---- Vault Vision added code file ---- */
+/**
+ * SignOutButton Component
+ * The button handles signOut process
+ */
+
+import React from 'react';
+import { Button } from './buttonStyles';
+import { userManager } from '../../utils/userManager';
+import PropTypes from "prop-types";
+import SignInButton from "./signin";
+
+// eslint-disable-next-line react/prop-types
+function SignOutButton({ children }) {
+
+ /**
+ * If auth.userData it shows the signOut button
+ */
+ return (
+ <Button onClick={() => userManager.signoutRedirect()}>{children}</Button>
+ );
+}
+
+SignOutButton.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+export default SignOutButton;

app/components/AuthButton/signup.jsx

@@ -0,0 +1,28 @@
+/** ---- Vault Vision added code file ---- */
+/**
+ * SignUpButton Component
+ * The button handles signOut process
+ */
+
+import React from 'react';
+import { Button } from './buttonStyles';
+import { userManagerRegister } from '../../utils/userManager';
+import PropTypes from "prop-types";
+import SignOutButton from "./signout";
+
+// eslint-disable-next-line react/prop-types
+function SignUpButton({ children }) {
+ /**
+ * If auth.userData it shows the signUp button
+ */
+ return (
+ <Button onClick={() => userManagerRegister.signinRedirect()}>
+ {children}
+ </Button>
+ );
+}
+
+SignUpButton.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+export default SignUpButton;

app/components/Footer/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import A from 'components/A';
 import LocaleToggle from 'containers/LocaleToggle';
 import Wrapper from './Wrapper';
 import messages from './messages';
@@ -15,14 +14,6 @@ function Footer() {
  <section>
  <LocaleToggle />
  </section>
- <section>
- <FormattedMessage
- {...messages.authorMessage}
- values={{
- author: <A href="https://twitter.com/mxstbr">Max Stoiber</A>,
- }}
- />
- </section>
  </Wrapper>
  );
 }

app/components/Footer/tests/__snapshots__/index.test.js.snap

@@ -31,19 +31,5 @@ exports[`<Footer /> should render and match the snapshot 1`] = `
  </select>
  </div>
  </section>
- <section>
- <span>
-
- Made with love by 
- <a
- className="A-br8h0y-0 dwVNvo"
- href="https://twitter.com/mxstbr"
- >
- Max Stoiber
- </a>
- .
-
- </span>
- </section>
 </footer>
 `;

app/components/Header/index.js

@@ -21,6 +21,15 @@ function Header() {
  <HeaderLink to="/features">
  <FormattedMessage {...messages.features} />
  </HeaderLink>
+ {/** ---- Vault Vision added buttons for authenticated pages ---- */}
+ <HeaderLink to="/dashboard">
+ <FormattedMessage {...messages.dashboard} />
+ </HeaderLink>
+
+ <HeaderLink to="/profile">
+ <FormattedMessage {...messages.profile} />
+ </HeaderLink>
+ {/** ---- end block ---- */}
  </NavBar>
  </div>
  );

app/components/Header/messages.js

@@ -16,4 +16,14 @@ export default defineMessages({
  id: `${scope}.features`,
  defaultMessage: 'Features',
  },
+ /** ---- Vault Vision added code for messages ---- */
+ dashboard: {
+ id: `${scope}.dashboard`,
+ defaultMessage: 'Dashboard',
+ },
+ profile: {
+ id: `${scope}.profile`,
+ defaultMessage: 'Profile',
+ },
+ /** ---- end block ---- */
 });

app/components/Header/tests/__snapshots__/index.test.js.snap

@@ -31,6 +31,22 @@ exports[`<Header /> should render a div 1`] = `
  Features
  </span>
  </a>
+ <a
+ class="HeaderLink-sc-1mtyaiv-0 hMiTYG"
+ href="/dashboard"
+ >
+ <span>
+ Dashboard
+ </span>
+ </a>
+ <a
+ class="HeaderLink-sc-1mtyaiv-0 hMiTYG"
+ href="/profile"
+ >
+ <span>
+ Profile
+ </span>
+ </a>
  </div>
 </div>
 `;

app/components/PreTag/index.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const PreTag = styled.pre`
+ white-space: pre-wrap; /* Since CSS 2.1 */
+ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+ white-space: -pre-wrap; /* Opera 4-6 */
+ white-space: -o-pre-wrap; /* Opera 7 */
+ word-wrap: break-word; /* Internet Explorer 5.5+ */
+`;