Step 2: JS packages and storing configuration

In Step 2, you will build a login form that will be presented to the user so they can authenticate with Achievers. Before you build the login form, you must add packages to the project that will aid you in building something quickly. We will also cover how to store your configuration settings in an.env file.

1. JS packages

You will need the following packages:

Semantic UI React- To make a Semantic UI.
react-cookies - To set and access cookies.
build-url and query-string - To build URLs and parse query strings.

To install these packages, press CTRL+C to shut down the server that you started with yarn start. To include the packages in your project, execute the following on the command line:

yarn add semantic-ui-react
yarn add semantic-ui-css
yarn add react-cookies
yarn add build-url
yarn add query-string

2. Storing configuration

You'll want to keep the environments and the credentials that you use in easy to manage configuration files. We recommend following the best practices for Adding Custom Environment Variables and creating an .env file to store the domain that you will connect to (so you can easily differentiate between the Achievers Test and Production sites) and the associated keys.

Create a new file named .env in the root of your code directory. Add the following to this file, making sure to include your actual <yoursubdomain> and <yourclientid> for the Achievers Test site.

Note: You must define your variables starting with REACT_APP_ in order for them to be accessible in the provided starter app. The variables will be exposed in your JavaScript as process.env.REACT_APP_YOUR_VARIABLE.

.env

REACT_APP_API_DOMAIN='https://<yoursubdomain>.uat.achievers.com'
REACT_APP_CLIENT_ID='<yourclientid>'