Login With G$ SDK - 3500$ worth of G$

[sirpy]

Motivation

• G$ Wallet should also work as "self sovereign identity" so users can easily register to services that work with G$s.
• More over , each claimer is verified as a unique human being, which acts as a very good spam/bot prevention which is very useful for any service that requires registration.

Details

The bounty has two parts, one for implementing this feature in the wallet and the second part is for creating an SDK for developers that want to integrate it with websites and apps.

The login process is simple:

• The website/app shows a link/button/QR code to the user which opens https://wallet.gooddollar.org/loginwith/?login=encodedrequest
• The wallet then shows the user a confirmation screen with the request details
• If user confirms/denies then wallet sends data via callback url or redirect url
• The website/app parses the response and continues its own the login flow

Login link

• [x] create a separate package "LoginSDK" that handles login link creation/parsing
• [x] add a method to generate the link. it has the form of "https://wallet.gooddollar.org/loginwith/?login=" + encoded request
  • [x] the encoded request is a json object encoded with base64 and encodeURIComponent
  • [x] the request object has the following fields
    • v: string - name of the vendor
    • web: url - vendor url
    • id: string - vendor whitelisted G$ address
    • cbu: url - callback url
    • rdu: url - redirect url
    • r: array - an array with extra user information fields requested (ie mobile,location,email,avatar,name)
  • [x] add a method to parse a payment link and return an object/class with long field names (ie vendor for v etc..)
  • see share/index.js in GoodDAPP for similar link handling example
  • [ ] unit tests

Wallet Changes

• [x] add the loginwith route
• [ ] create a confirmation screen
  • [x] show the details of the vendor
  • [x] show the details the vendor requests and the values that will be shared
  • [x] if cbu/rdu domain is different than web domain show warning
  • [x] if id (wallet address of vendor) is not whitelisted show warning
  • [ ] mobile/location/email/name should be editable by user (see payment confirmation screen for example)
• [x] handle user response
  • [x] if user declines send error object via POST to the cbu and a base64 encoded via rdu
  • [x] if user confirms send the response object with the fields:
    • a: string - wallet address
    • v: bool - true if user address is whitelisted
    • l: string - user location
    • n: string - user name
    • e: string - user email
    • m: string - user mobile
    • av: string - user small avatar CID on ipfs
    • nonce: number - timestamp of response
    • sig: all of the response signed by the user wallet(address) private key
  • [ ]  details fields (location, email,mobile) should actually be a pair v,s, where v is the actual value and s is the signed value by GoodDollar if available, so for example a response containing just the user mobile would look like: {m: {v:'+97255111111', s:signaturebytes}}
  • [x] sign the stringified json object keccak256 hash using the user wallet private key. so vendor can verify user actually owns the address he sent + that he sent those details. add the signature as the sig field
  • [x] send data to rdu/cbu
    • [x] if rdu is supplied then wallet should modify the current window url to the rdu url and append the param login with value of encodeURIComponent(btoa(JSON.stringify(responseObject)))
    • [x] if cbu is supplied the perform a post request and send the responseObject as plain json
    • [x] if only cbu is supplied then after POST request is success, close the current window
• [ ] unit tests

Server LoginSDK

• [x] add method to parse and verify login response
  • verify sig matches the response object and that it was done by the address specified in a
  • verify nonce is not too old
  • verify on blockchain from Identity contract that address is still whitelisted if v was true
• [x] unit tests

Client LoginSDK

• [x] add react component that handles the login flow from the website/app perspective
• [x] show a login button that opens the login link
• [x] in case of rdu current window url changes to the login link on button press
• [x] in case of cbu button press opens a popup window with the login link
• [x] component should receive onLogin callback in props
• [x] in case of cbu, component should detect when popup was closed and then call the onLogin callback (it is the responsibility of the developer to take care of the rest of the flow and making sure callback was triggered on backend)
• [x] in case of rdu, component should parse the window url on mount and look for the login param, to identify the case of redirect back from wallet. if login param was found it should parse the response and verify it, using the LoginSDK and trigger the onLogin with the SDK result
• [x] unit tests

Documentation

Write a README with instructions how to use the API

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work has been started.

These users each claimed they can complete the work by 264 years, 3 months from now. Please review their action plans below:

1) harjaapdhillon16 has been approved to start work.

I have good experience with developing with the gooddollar wallet and I think I'll be able to tackle this bounty too ! 2) arnaudkleinveld has applied to start work _(Funders only: approve worker | reject worker)_.

Starting my first crypto wallet coding experience with this bounty and I can contribute writing documentation. Have a broad knowledge of computer science and able to oversea things well on an architectural level. Built multi currency order processing and inventory management system from scratch (www.myjigsawpiece.com) which should give me a good foundation. Eager to learn and look forward to assist with this project on any way I can. 3) codepiratead has applied to start work _(Funders only: approve worker | reject worker)_.

Interesting stuff I want to be a part of it. 4) malato2021ma has applied to start work _(Funders only: approve worker | reject worker)_.

paid https://docs.opencollective.com/help/expenses-and-getting-paid 5) tawanc has applied to start work _(Funders only: approve worker | reject worker)_.

Tawanchay.lek@gmail.coming back 6) ezhimakov has applied to start work _(Funders only: approve worker | reject worker)_.

As an experienced frontend developer i can complete this task 7) pmlambert has applied to start work _(Funders only: approve worker | reject worker)_.

I want to work on this feature

Learn more on the Gitcoin Issue Details page.

[sirpy]

@arnaudkleinveld @chaitudapp @codepiratead please join our dev telegram channel (see README) see if you can do it together with Harjaap

[codepirateAd]

Link for telegram channel?

On Tue, 8 Feb 2022, 3:44 pm sirpy, @.***> wrote:

@ArnaudKleinveld https://github.com/ArnaudKleinveld @chaitudapp https://github.com/chaitudapp @codepirateAd https://github.com/codepirateAd please join our dev telegram channel (see README) see if you can do it together with Harjaap

— Reply to this email directly, view it on GitHub https://github.com/GoodDollar/Bounties/issues/5#issuecomment-1032437719, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKREZT2C55RJ2P5NGHOTC6TU2DUIZANCNFSM5GN3RMRQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>