Environment variables allow us to parameterize sensitive state, like third party API keys and URLs, without hard coding them into our application code. We will take you through the process of using those variables to create an application with a user login.
- To start, deploy the Begin template below. When prompted give it a cool name!
Make note of the
productionURLs after it is deployed.
- Create three OAuth applications on GitHub following these instructions …this ensures totally isolated systems for
|Application name||Homepage URL||Authorization callback URL|
|My App Local||http://localhost:3333||http://localhost:3333/login|
|My App Staging||https://foo-123-staging.begin.app||https://foo-123-staging.begin.app/login|
|My App Production||https://foo-123.begin.app||https://foo-123.begin.app/login|
- Set up local development for this project.
# Clone your app repo locally
git clone https://github.com/username/begin-app-project-name.git
# cd into your Begin project dir
# Install NPM packages
- Create a file called
.arc-envin the root of the project directory and add the GitHub Client ID, GitHub Secret Key and redirect values from the GitHub OAuth apps created in step 2. The Architect Sandbox will load environment variables from the
.arc-envfile for local testing only.
These environment variables can be accessed using
process.env.YOUR_ENV_VARIABLE. For example, in the code we make a reference to
process.env.GITHUB_CLIENT_ID which will reference the
.arc-env file. This let's us manage secrets and keys without hard coding them into the application.
⚠️ Do not commit
.arc-envto revision control. Make sure it is added to your
- Add the environment variables for
productionon Begin, since they are not committed to the GitHub repo.
To add your environment variables, open
Environments in the left nav of your project's console.
- Now that the environment variables are set both locally in the
.arc-envfile and on Begin, Proceed to implement OAuth