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
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
<yourclientid> for the Achievers Test site.
Note: You must define your variables starting with
Updated 6 months ago