Vault Vision Configuration Visit Vault Vision
-
Create a new user account at Vault Vision 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
-
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.
How to install boilerplate
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
- create a new .env file using the .env-example with the values from Vault Vision
- Replace each variable with necessary values
#.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
{/** 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
- visit https://localhost:3000
- Click on login and get redirected to vault vision authentication page
- After successful authentication you would be redirected to specified Callback URI