Login with DIMO

Expedite your build using the Login with DIMO components

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.

Login with DIMO Button Component

Popup Component

Embedded Component

Key Features

1. Pre-built components: The SDK offers pre-built React components that can be imported easily.

2. Flexibility with multiple integration modes: The components are designed to be flexible with multiple integration modes, such as embed, popup, or redirect.

3. 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. This utilizes the Accounts API for developers.

4. 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.

Integration Modes

Embed

The embed mode basically embeds an iframe HTML element that surfaces the Login with DIMO interface.

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.

Core Functionalities

DIMO Account Creation / Logins

Login with DIMO allow developers to surface an interface for the end users to authenticate by integrating with the Accounts API. This functionality sets up the smart contract wallet for the end user, giving full root access to the user (and only the user), enabling logins across all DIMO platforms with the use of a passkey.

Account Creation, Email OTP, User Sign-in

DIMO Check-in

Learn more about how passkey is more secure and the future for Internet security in this Google blog: https://blog.google/inside-google/googlers/ask-a-techspert/how-passkeys-work/

Vehicle Permission Sharing

This is an optional functionality that you can enable on the Component SDK. When this is enabled, logged in users are prompted with a share permission(s) page to share their selected vehicles with your application.

Using the SDK

1. Download the React Component SDK via NPM

2. In your React project, import { LoginWithDimo }

3. In your React app, drop in the component with the following input configurations:

Parameter Name	Type	Details
mode*	String	One of the three available modes: popup, embed, or redirect.
onSuccess*	Callback	Callback function called when the access_token is returned.
onError*	Callback	Callback function called when error occurs.
clientId*	String	A valid client ID registered with your Developer License.
redirectUri*	String	A valid redirect URI registered with your Developer License.
apiKey	String	Optional API key of your Developer License. This is currently not used and reserved for future applications.
permissionTemplateId	String	Optional template ID of the SACD permissions template on IPFS. If undefined, no permissions flow will be triggered for the end users.
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 for the developers. This is used to target vehicles of certain interest, such as EVs or ICEs or certain brands. The SDK will also filter out any vehicle tokenId that doesn't belong to the signed in user.
environment	String	Environment where your app is registered to. Defaults to production if not indicated. Supports development or production at the moment.

Usage Example

<LoginWithDimo
            mode="redirect" //can be set to "redirect", "popup", or "embed"
            onSuccess={(authData) => console.log("Success:", authData)} //auth data is the JWT token, this onsuccess won't trigger if redirect
            onError={(error) => console.error("Error:", error)}
            clientId={"some_0x_client_id"}
            redirectUri={"some_redirect_uri"}
            environment={"development"} //OPTIONAL, will default to prod, ensure correct client ID/redirect URI for dev licence
            apiKey={"some_api_key"} //OPTIONAL
            permissionTemplateId={"1"} //OPTIONAL, if not set, will not prompt users to share vehicles
            vehicles={["585","586", "1273"]} //OPTIONAL, if not set, will fetch all vehicles
          />