Implementation
There are multiple ways to implement Hydro Raindrop after getting approved as a developer. You can use one of the handy Raindrop plugins available on popular CMS and e-commerce stores, or build a custom implementation!
Wordpress Site
The Hydro Raindrop plugin brings the power of multi-factor authentication to tens of millions of Wordpress sites globally. This plugin has a beautiful UI and near instant installation, and is of course 100% free:
Joomla Site
The Hydro Raindrop plugin brings the power of multi-factor authentication to millions of Joomla sites globally. To get started, follow the instructions on the Joomla store:
Drupal Site
The Hydro Raindrop plugin brings the power of multi-factor authentication to millions of Joomla sites globally. To get started, follow the instructions on the Joomla store:
Shopify, Salesforce, Magento, & More
There will be many more plugins available soon. We will post the links when the work has been completed by the Hydro developer community.
Custom Implementation
Let’s walk through an example of how a site can do a custom implementation of Raindrop through the Hydro API!
The examples and screenshots are drawn from the Raindrop UI example, available on Github. The demo in turn relies on the Raindrop SDK to interface with the Hydro API. Finally, documentation for the Hydro API is available online.
- First Time Signup:
When users of your service elect to enable Client Raindrop, this preference must be associated with their account via the unique identifier specific to your website.
In the example, users are identified by “Internal Username”. For demonstration purposes this field is editable, but in reality you would glean it from an access token, session data, etc. This internal username, which uniquely identifies users in a backend database, should be associated with a flag indicating whether or not the user has opted in to Client Raindrop. In the example, this information is relayed to the frontend and displayed to the user.
When opting in, users must provide their HydroID. This is a unique identifier assigned to each user in their Hydro mobile app. Before storing the user’s HydroID, you’ll need to register the user with your application via the Hydro API. Since calling the Hydro API requires secret credentials, the frontend cannot make this call. The Link button in the demo passes the given HydroID to the backend via an internal API which in turn calls the registerUser function of the Raindrop SDK. Ultimately, this function wraps a POST to the /application/client endpoint of the Hydro API.
After successfully registering the user with the Hydro API, you can then store the association between their Internal Username and their HydroID. In the example, the backend database which stores this information is displayed in the frontend (for demonstration purposes only, to clearly demonstrate the sign-up flow).
The status of their link may be displayed to users, and an Unregisterbutton should be provided. This button again passes information to the backend, which calls DELETE on the Hydro API’s /application/clientendpoint via the SDK.
2. First-Time Verification
After a successful link, your site must prompt users to verify a signature to confirm their ownership of the HydroID they entered. This ensures that users passed the correct HydroID to your website. This is similar to SMS verification where you would need to send a text to the phone and ask the user to confirm before considering the mapping of internal username to phone number permanent.
The demo uses the SDK to generate a random 6-digit number that users must enter into their Hydro Mobile App. Note that this code should be generated/validated by the backend, since allowing users to manipulate the code from the frontend could be a security risk. After users successfully enter this number and press Authenticate on your website, they have completed the sign-up process!
After the verification is complete, the database should be updated accordingly to indicate that the link is confirmed. This is how your website knows which users should be redirected to the permanent verification screen for all future attempts. A basic demonstration of this redirect logic is shown in the example.
3. Ongoing Verifications
After users have confirmed that they own their HydroID, they should be redirected to a screen like the one in the example on all login attempts, payment requests, transactions, etc. In practice, your website is free to implement IP-based TTL, account recovery options, or other custom logic on top of this flow.
If you are interested in design, UX, or other ideas for your custom implementation of Raindrop, please get in touch with our team on Discord.
After Integration
Have your users download the Hydro app on iOS or Android and get instant security and protection against fraud!
Here is video demo of what the onboarding looks like for users when they download the app from the app stores, and below we show the full experience side-by-side with a website. The Hydrogen site’s developer login portal, protected by Hydro Raindrop, is used as this example:
Welcome to the Hydro family!
