React

Introduction

Smartcar is an API that allows mobile and web applications to communicate with vehicles across brands (think “check odometer” or “unlock doors.”). This guide will help you get up and running with the Smartcar API.

In this integration guide, we will use the JavaScript SDK to create a React web application that displays your car's information.

How Smartcar works with single-page applications

Single-Page Application Architecture with Smartcar's API.

  1. The Single-Page Application launches a pop-up window with Smartcar Connect to request access to a user's vehicle. It does so by using the Smartcar JavaScript SDK. On Connect, the user logs in with their vehicle credentials and grants the Application access to their vehicle.
  2. The user's browser is redirected to a specified Smartcar-hosted redirect_uri: the Smartcar JavaScript SDK redirect page.
  3. The Smartcar JavaScript SDK redirect page will receive an authorization code as a query parameter. The redirect page will then send the code to the Single-Page Application's onComplete callback using the postMessage web API. This step is handled entirely by the JavaScript SDK.
  4. The Single-Page Application sends the received authorization code to the Application's back-end service.
  5. The Application sends a request to the Smartcar API. This request contains the authorization code along with the Application's client id and client secret.
  6. In response, Smartcar returns an access_token and a refresh_token.
  7. Using the access_token, the Application can now send requests to the Smartcar API. It can access protected resources and send commands from and to the user's vehicle, such as retrieve the location and unlock the doors.

How this guide is structured

Follow along with our integration guide to build our simple web application.

This guide is split into 3 sections -

  1. Setup - Set up your environment to develop on Smartcar
  2. Authorization flow - Learn about Smartcar Connect and how to get an authorization code
  3. Send a request - Learn how to exchange an authorization code for an access_token required to send a request to Smartcar

Let's get building!