https://github.com/hydrogen-dev/raindrop-ui-web

https://github.com/hydrogen-dev/raindrop-ui-web

Last synced: 18 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/hydrogen-dev/raindrop-ui-web
• Owner: hydrogen-dev
• License: mit
• Created: 2018-04-20T10:33:00.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-12-14T20:34:14.000Z (about 4 years ago)
• Last Synced: 2023-03-03T06:42:33.090Z (almost 2 years ago)
• Language: JavaScript
• Size: 256 KB
• Stars: 8
• Watchers: 9
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Client-Side Raindrop UI - Web

This UI demo is an example implementation of the Client-Side Raindrop Authentication protocol. For a walkthrough of this process, see our [implementation guide](https://medium.com/hydrogen-api/client-side-raindrop-an-implementation-guide-4e61c84e9dda).

## Initial Setup

- Download the testing Hydro mobile app: after requesting an `applicationId` through the [Hydrogen Platform developer portal](https://www.hydrogenplatform.com/login), you will be given a Testflight link to download a version of the app compatible with the `Sandbox` environment. The live Hydro mobile app on the app store **will not be compatible** with your `Sandbox` development. When you have finished developing your integration in `Sandbox`, you will need to request and be given `Production` keys, at which point you can roll the product out to your users who will be using the public-facing Hydro mobile app on the App Store.

- Initialize the example backend: visit the [backend/](./backend) folder for setup instructions.

- Initialize the example frontend: visit the [frontend/](./frontend) folder for setup instructions.

Note: If you restart your backend without refreshing the frontend, it's possible for some session variables to get out of sync. Not to fear, simply refreshing the frontend should fix any issues!

## Terms

Once your demo is live, you can begin testing out the system! It will be helpful to define some key terms:

- Backend: A privileged server running code. It can receive and send data to/from the `frontend`. The two communicate via the `backend`'s internal API.

- Database: The database, only accessible to code running on the backend, must store, at minimum, 3 columns: `internalUsername`, `hydroID`, `confirmed`. This codifies the following relationship: users of your site can link their account (identified by `internalUsername`, a unique identifier) with their `hydroID` (a unique identifier from the Hydro mobile app). When users first enter their `hydroID`, `confirmed` must be set to `false`, and should only be set to `true` after a user successfully signs a message (i.e. after you successfully call the `verifySignature` endpoint of the `Hydro API`).

- Blockchain: Client Raindrop relies on information being stored in the `blockchain`. The `Hydro API` manages all interactions with the blockchain so you don't have to!

- Frontend: The `frontend` is your client-facing website. Users must be able to opt in to Client Raindrop by providing their `hydroID`. They then should be prompted to verify this link via a first-time signature verification. Once the link is confirmed, users should be required to sign a message for every login/transaction/etc. that you wish to protect with Client Raindrop.

- Raindrop SDK: A [Javascript wrapper](https://github.com/hydrogen-dev/raindrop-sdk-js) for making calls to the `Hydro API`. Abstracts away from many of the trivialities of making API calls.

- Hydro API: The API that powers Client-Side Raindrop. The `backend` makes calls to the `Hydro API`, authenticated with your secret credentials.

## Copyright & License

Copyright 2018 The Hydrogen Technology Corporation under the MIT License.