To make requests to a vehicle, your end user must connect their vehicle using Smartcar Connect. Smartcar Connect uses the OAuth 2.0 protocol to provide a secure and elegant authorization flow for your users.

1. Initialize the Smartcar object

Instantiate a Smartcar object in the constructor of the App component.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
// src/App.jsx

constructor(props) {
  ...
  // TODO: Authorization Step 1: Initialize the Smartcar object
  this.smartcar = new Smartcar({
    clientId: process.env.REACT_APP_CLIENT_ID,
    redirectUri: process.env.REACT_APP_REDIRECT_URI,
    scope: ['required:read_vehicle_info'],
    mode: 'test',
    onComplete: this.onComplete,
  });
}

2. Launch Connect

A single-page application will launch a pop-up window with Smartcar Connect to request access to a user’s vehicle. On Connect, the user logs in with the username and password for their vehicle’s connected services account and grants the application access to their vehicle.

To launch Connect, we can use the openDialog function that our Smartcar object has access to. We can place this is an onClick handler of an HTML button.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
// src/App.jsx

authorize() {
  // TODO: Authorization Step 2a: Launch Connect
  this.smartcar.openDialog({forcePrompt: true});
}

render() {
  // TODO: Authorization Step 2b: Render the Connect component
  return <Connect onClick={this.authorize} />;
}

Connect is a simple component that renders an HTML button with the passed in onClick handler.

3. Receive the authorization code

Once a user has authorized the application to access their vehicle, the user is redirected to the redirect_uri with an authorization code as a query parameter and the pop-up dialog is closed. Using the JavaScript SDK, the front-end can receive this code in the onComplete callback passed into the Smartcar object.

The authorization code represents a user consenting your application access to their vehicle. It does not grant access to the vehicle itself.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
// src/App.jsx

onComplete(err, code, status) {
  // TODO: Authorization Step 3: Receive the authorization code
  console.log(code);
  // prints out the authorization code
}

Try it out

Let’s try authenticating a vehicle in test mode.

In test mode, any username or password is valid for each brand.

Restart your server, open up your browser and go to http://localhost:3000/login. Notice once you log in, Smartcar showcases all the permissions your application is asking for, in this case, read_vehicle_info. A user has to consent to all the permissions.

Once you have logged in and accepted the permissions, you should see your authorization code printed to your console.

In the next section, we will cover how to exchange the authorization code for an access_token and make your first request to Smartcar API with it!