Before we get started building our web application, we need to complete a few set up steps.

1. Sign up for a Smartcar account

Go to our developer dashboard to sign up for a Smartcar account.

2. Retrieve your API credentials

Once you have made your account, you will notice you already have an application with API keys. You will need these keys to complete this tutorial.

3. Configure your redirect URI

You will need to set a redirect_uri for your application. We will be using this in the next section. For now, you can just set it to https://javascript-sdk.smartcar.com/v2/redirect?app_origin=http://localhost:3000. For more information about redirect URI’s, refer to our docs.

4. Clone the starter kit

First, set the following environment variables -

  • $
  • $
export REACT_APP_CLIENT_ID=<your-client-id>
export REACT_APP_REDIRECT_URI= https://javascript-sdk.smartcar.com/v2/redirect?app_origin=http://localhost:3000
Note: If you are using Windows, ensure you are appropriately setting environment variables for your shell. Please refer to this post which details how to set environment variables on Windows.

We will be setting up a server later for our React front-end to communicate with. For now, let’s assume our server is listening on http://localhost:8000 and store it in an environment variable -

  • $
export REACT_APP_SERVER=http://localhost:8000

Make sure you have cloned this repo and install the required dependencies -

  • $
  • $
  • $
git clone https://github.com/smartcar/getting-started-javascript-sdk-react.git
cd getting-started-javascript-sdk-react/tutorial
npm install
Note: If you want to run the React app without writing any code, follow along with the Readme.

Now that we’ve set up our application, let’s learn more about Smartcar Connect.