Login with DIMO
Expedite your build using the Login with DIMO components
Last updated
Was this helpful?
Expedite your build using the Login with DIMO components
Last updated
Was this helpful?
Login with DIMO is a React component SDK, providing developers with a set of pre-built, customizable building blocks for applications that integrate with DIMO. These components simplify the process of integrating Accounts API and Transactions SDK in React applications.
Pre-built components: The SDK offers pre-built React components that can be imported easily.
Flexibility with multiple integration modes: The components are designed to be flexible with multiple integration modes, such as embed
, popup
, or redirect
.
Login with DIMO: End users are presented with a email login field, and an OTP will be sent to the email for authentication. A passkey prompt will be triggered after the OTP for either setup or login. .
Integration with the Transactions SDK: The React components seamlessly integrate with the Transactions SDK, allowing you to leverage the SDK's features and functionalities such as creating a vehicle and sharing vehicle permissions, etc.
This SDK utilizes Accounts API for developers and manages to connect to the user's DIMO account. Once connected, it further integrates with the Transactions SDK to perform operations associated with the user's vehicles and permissions.
Depending on the component you're looking to surface, choose between the following inputs:
LoginWithDimo
& ShareVehiclesWithDimo
mode
*
String
One of the three available modes: popup
, embed
, or redirect
.
onSuccess
*
Callback
Callback function called when the authData
is returned for popup
and embed
modes.
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
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' ]
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.
ExecuteAdvancedTransactionWithDimo
mode
*
String
One of the three available modes: popup
, embed
, or redirect
.
onSuccess
*
Callback
Callback function called when data
is returned for popup
and embed
modes.
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.
Congratulations for reaching this step, you're one huge step closer to launching an integration with DIMO!
Developer Notes
If you don't use the React framework, you can still build a button in your tech stack and redirect the users to the following URLs depending on the flow of interest.
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 User JWT.
Any components that require this value should be wrapped in the DimoAuthProvider
, as follows:
When permissionTemplateId
are provided:
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:
Skips permission sharing
Skips permission sharing
Skips permission sharing
This is a decoupled component that developers can use post-login, will trigger login if user isn't logged in:
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
This is a decouple component that developers can use post-login, will trigger login if user isn't logged in.
embed
By default, browsers like Chrome and Firefox allows 3rd party cookies, but browsers like Safari and Brave blocks them.
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.
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 to explicitly specify an expiration date for permissions in the (YYYY-MM-DD).
The embed
mode basically embeds an HTML element that surfaces the Login with DIMO interface. In this mode, the JWT returned is considered a 3rd party cookie so be aware of the user's browser settings.