LogoLogo
DocsHomeSupportContact
  • Getting Started
    • Introduction
    • Build on DIMO
  • DEVELOPER GUIDE
    • Developer Overview
    • Developer Console
    • Authentication
    • DIMO Developer SDKs
      • Data SDK
      • Login with DIMO SDK
        • React Component
        • Login with DIMO Redirect
        • Core Functionalities
      • TypeScript: Transactions SDK
      • SDK Release Notes
    • Low Code Tools
      • n8n: Getting Started
    • Permissions Contract: SACD
    • DIMO Credits
    • Response Types
    • Rate Limits
    • Developer FAQ
    • Developer Changelogs
    • Troubleshooting Common Issues
  • API References
    • Overview of DIMO API
    • Attestation API
    • Device Definitions API
    • Identity API
      • Schema & Types
      • Scalars
      • Nodes & Objects
        • AftermarketDevice
        • AftermarketDeviceConnection
        • DCN
        • DCNConnection
        • DeveloperLicense
        • DeviceDefinition
        • Earning
        • EarningsConnection
        • Manufacturer
        • Sacd
        • SyntheticDevice
        • Vehicle
        • VehicleConnection
        • VehicleEarnings
        • UserRewards
      • Common Queries
    • Telemetry API
      • Schema & Types
      • Scalars
      • Nodes & Objects
        • Signals
        • SignalsLatest
      • Common Queries
    • Token Exchange API
    • Trips API
    • Valuations API
  • DIMO Hardware
    • Introduction
    • DIMO Hardware Application
    • DIMO Manufacturing License
    • Development & Certification
    • Audits & Assessments
      • Hardware & Security Audit
      • Customer Experience Assessment
      • Integration Testing & Quality Control
      • Final Approval
    • DIMO Device License
      • Device Minting Certificates
    • Essential Documents
      • Hardware & Security Audit Checklist
      • Approved Hardware Auditors
      • DIMO Memorandum of Understanding (MOU)
  • Additional References
    • Developer License
    • DIMO GraphQL Basics
  • Deprecated Resources
    • Guides
      • Developer Journey
      • Quick Start Guide
      • Hello World
      • Code Exchange Flow
    • Data Availability
Powered by GitBook
On this page
  • React Component SDK
  • Using the SDK
  • Next Steps:
  • Additional Resources:
  • Component Types:
  • Integration Modes
  • Usage Example

Was this helpful?

  1. DEVELOPER GUIDE
  2. DIMO Developer SDKs
  3. Login with DIMO SDK

React Component

PreviousLogin with DIMO SDKNextLogin with DIMO Redirect

Last updated 29 days ago

Was this helpful?

React Component SDK

The React Component SDK provides developers with a set of pre-built, customizable building blocks for applications that integrate with DIMO. These components simplify the process of integrating our and in React applications.


Using the SDK

1

Installation

npm install @dimo-network/login-with-dimo
2

Initialization

import { 
  initializeDimoSDK, 
  useDimoAuthState
} from "@dimo-network/login-with-dimo";

// Initialize the State Variables
const { 
  isAuthenticated, 
  getValidJWT, 
  email, 
  walletAddress, 
  getEmail 
} = useDimoAuthState();

// Initialize the SDK
initializeDimoSDK({
  clientId: "<dev_license_clientId>",
  redirectUri: "<dev_license_redirectUri>",
  // OPTIONAL
  // apiKey: "<dev_license_apiKey>",
  // environment: "<environment>", 
  // options: {
  //    forceEmail: true, //BY DEFAULT, this is False - users won't have to share email
  // }
});
Parameter
Type
Details

clientId*

String

redirectUri*

String

apiKey

String

environment

String

Environment where your app is registered to. Defaults to production if not indicated. Supports development or production at the moment.

options

Object

Additional options for the Login with DIMO Component. Currently supports forceEmail:true, which requires users to opt into email sharing when logging in. If excluded, defaults to optional email sharing on login.

3

Import the Components

import { 
    LoginWithDimo, 
    ShareVehiclesWithDimo,
    ExecuteAdvancedTransactionWithDimo
} from "@dimo-network/login-with-dimo";

In your React app, import the different components as needed and drop in the component of interest with the following input configurations.

4

Configure the Components

Depending on the component you're looking to surface, choose between the following inputs:

Inputs for LoginWithDimo & ShareVehiclesWithDimo

Parameter
Type
Details

mode*

String

One of the two available modes: popup or redirect.

onSuccess*

Callback

Callback function called when the authData is returned for popup mode. Example for authData: { token: <access_token> } For redirect mode, the access_token is in the redirect URI. Example for redirect: https://your-site.com/redirect?token=<access_token>&email=<user_email>

onError*

Callback

Callback function called when error occurs.

permissionTemplateId

String

utm

String

vehicles

[String]

Optional array of vehicle tokenId's to target for the logged in user. If vehicles is not provided, the flow will pull all available vehicles. This also filters out any vehicle tokenId that doesn't belong to the signed-in user.

vehicleMakes

[String]

Optional array of vehicle makes to filter for compatibility with your app. If vehicleMakes is not provided, all available vehicles will be marked as compatible. Example: [ 'Tesla', 'Audi', 'Lexus' ]

powertrainTypes

[String]

Optional array of powertrain types to filter for compatibility with your app. If powertrainTypes is not provided, all vehicle types will be marked as compatible. Example: ['BEV', 'HEV', 'PHEV', 'ICE', 'FCEV']

expirationDate

[String]

authenticatedLabel

[String]

Optional parameter to override default button label text for authenticated users.

unAuthenticatedLabel

[String]

Optional parameter to override default button label text for unauthenticated users.

Inputs for ExecuteAdvancedTransactionWithDimo

Parameter
Type
Details

mode*

String

One of the two available modes: popup or redirect.

onSuccess*

Callback

Callback function called when data is returned for popup mode. Example: data: { token: <access_token>; transactionHash: <tx_hash>; transactionReceipt: <tx_receipt>; }

onError*

Callback

Callback function called when error occurs.

address*

String

The 0x address of the smart contract being executed.

abi*

Any

An array of JSON representing the ABI of the advanced functions of interest.

functionName*

String

The name of the function being called.

args*

[String]

The arguments being passed into the function call.

value

String

Optional number in wei of the native currency sent as a part of the transaction.

5

Build your app

Now that you've reached this step, all you need to do is finish building your app and interact with the components. Depending on what you wish your users see, reconfigure as necessary.

6

Congratulations for reaching this step, you're one huge step closer to launching an integration with DIMO!

Next Steps:

Additional Resources:

State Variables

Any components that require this value should be wrapped in the DimoAuthProvider, as follows:

<DimoAuthProvider>
    <SomeComponentThatNeedsDimoState/>
<DimoAuthProvider/>

Component Types:

LoginWithDimo

When permissionTemplateId are provided:

User has no vehicles connected
User has all vehicles shared
User has some vehicles not shared

Shows "No vehicles connected" with a Continue Button

Shows "All vehicles have been shared" with a Continue Button

Show list of all vehicles for permission sharing

When permissionTemplateId are NOT provided. Since permissions are not requested, developers can couple this with the ShareVehiclesWithDimo component post-login:

User has no vehicles connected
User has all vehicles shared
User has some vehicles not shared

Skips permission sharing

Skips permission sharing

Skips permission sharing

ShareVehiclesWithDimo

This is a decoupled component that developers can use post-login, will trigger login if user isn't logged in:

User has no vehicles connected
User has all vehicles shared
User has some vehicles not shared

Shows "No vehicles connected" with a Continue Button

Shows "All vehicles have been shared" with a Continue Button

Show list of all vehicles for permission sharing

ExecuteAdvancedTransactionsWithDimo

This is a decouple component that developers can use post-login, will trigger login if user isn't logged in.

Integration Modes

Mode
Description

popup

The popup mode surfaces a React button component that opens up a browser pop-up (new window) containing the Login with DIMO interface.

redirect

The redirect mode surfaces a React button component that redirects the users to the Login with DIMO interface.

Usage Example

<LoginWithDimo
    mode="popup"
    onSuccess={(authData) => console.log("Success:", authData)}
    onError={(error) => console.error("Error:", error)}
    // This will control if your users are asked to share vehicles, as part of the login flow. "1" is the template for all SACD permissions
    permissionTemplateId={permissionsEnabled ? "1" : undefined}
    // Optionally, specify vehicles (uncomment the line below to use it)
    // vehicles={["585","586"]}  // Specify the vehicles to be accessed after login
    utm="utm_campaign=dimo" // OPTIONAL            
/>
 <ShareVehiclesWithDimo
    mode="popup"
    onSuccess={(authData) => console.log("Success:", authData)}
    onError={(error) => console.error("Error:", error)}
    //REQUIRED: "1" is the template for all SACD permissions
    permissionTemplateId={"1"}
    // OPTIONAL, specify vehicles (uncomment the line below to use it)
    // vehicles={["585","586"]}  // Specify the vehicles to be accessed when triggered
    expirationDate="2062-12-12T18:51:00Z" // ISO 8601 format 
    // OPTIONAL, defaults to 100 year if not specified  
    utm="utm_campaign=dimo" // OPTIONAL  
/>      
<ExecuteAdvancedTransactionWithDimo
    mode="popup"
    onSuccess={(data: any) => console.log("Success:", data)}
    onError={(error: any) => console.error("Error:", error)}
    address="0x21cFE003997fB7c2B3cfe5cf71e7833B7B2eCe10"
    value="0"
    abi={sampleAbi} //Some sample ABI required
    functionName="transfer"
    args={["0x62b98e019e0d3e4A1Ad8C786202e09017Bd995e1", "0"]}
/>         

A valid client ID registered with your .

A valid redirect URI registered with your .

Optional API key of your . This is currently not in use and reserved for future applications.

Optional template ID of the template on IPFS. If undefined, no permissions flow will be triggered for the end users. For ShareVehiclesWithDimo component, this is required as sharing requires permission templates.

Optional parameter for configuring UTMs. Useful for campaign tracking. Example: <LoginWithDimo utm="utm_campaign=dimo" /> will redirect to:

Optional parameter to explicitly specify an expiration date for permissions in the (YYYY-MM-DD).

For more information on these inputs, see:

Voila, you're all done

If you've made it this far, you've successfully set up Login with DIMO. To access vehicle data after a user has shared access with you, we recommend implementing using the on the backend. When a user authenticates via the Login component, their walletAddress is returned - meaning you're ready to query the to obtain the Token IDs of the vehicles that were shared with you.

DimoAuthProvider is used to get the auth state value from the SDK, as well as to keep track of the user email, Global Account public address, and the .

🎉
Core Functionalities
Data SDK
Identity API
Take me to the Data SDK Docs →
SACD permissions
https://redirecturi.com/?utm_campaign=dimo
ISO8601 format
Login with DIMO
Accounts API
Transactions SDK
Developer License
Developer License
Developer License
Logonpm: @dimo-network/login-with-dimonpm
Login with DIMO on NPM Registry
User JWT