Real-Dev-Squad / mobile-app

The main app for our organization
MIT License
12 stars 30 forks source link

QR scanner Feature #146

Open shreya-mishra opened 1 year ago

shreya-mishra commented 1 year ago

Currently, users have to manually enter their GitHub credentials in the mobile app to sign in.

Signup with GitHub should redirect to the web browser and ask for the login details and then redirect back to our Mobile app
https://github.com/Real-Dev-Squad/mobile-app/issues/142

This can be a tedious process because a lot of people didn't sign into GitHub on the mobile app. To make the sign-in process smoother and more efficient, we propose the implementation of QR code scanning for sign-in in the mobile app.

With this feature, users will be able to scan a QR code from the my-site website using their mobile camera, which will automatically fill in their login credentials in the mobile app provided that they should be logged in to my-site, making the sign-in process much easier and faster. This will improve the overall user experience and increase user engagement with our app.

Implementation of this feature will require updates to the mobile app, the website, and the backend. We will need to develop a QR code generator for the website, as well as a QR code scanner for the mobile app. The scanner will need to be able to decode the QR code and extract the user's login credentials securely.

We believe that this feature will be highly beneficial for our users and will set our app apart from competitors. We look forward to working on this feature and improving the user experience of our app.

STEPS:

- [ ] https://github.com/Real-Dev-Squad/website-backend/issues/940

sakshambhatt commented 1 year ago

SignInWithSiteActivityDiagram

@shreya-mishra please check the above diagram

sakshambhatt commented 1 year ago

Hello @shreya-mishra , I was scoping the task down. I wanted to ask the following things for clarification.

  1. Where will I get the code for signIn in the website?
  2. Which API do I need to call after the user has pasted their code?
shreya-mishra commented 1 year ago

Hello @shreya-mishra , I was scoping the task down. I wanted to ask the following things for clarification.

  1. Where will I get the code for signIn in the website?
  2. Which API do I need to call after the user has pasted their code?
  1. We will get the code on the RDS home page
  2. We haven't made any api for that
RitikJaiswal75 commented 1 year ago

How do we get code? And how is it linked to a specific user?

shreya-mishra commented 1 year ago

We have some changes in this scenario, at first, we were getting the code from the website and pasting it on the mobile app signIn screen but now the user will be on our mobile app and they will click on sign in with the RDS site they will be redirected to the page where the text will be shown ie; go to my site and then they will write the same code manually on the website from the mobile app and if the time-based code match then they will redirect to the homepage of the mobile app.

shreya-mishra commented 1 year ago

How do we get code? And how is it linked to a specific user?

shreya-mishra commented 1 year ago

@sakshambhatt , will you please start working on the above issue, start with random OTP generation on the mobile app after clicking on sign in with the RDS site button, and below the text should be visible ( go to my site and paste the above code).

sakshambhatt commented 1 year ago

Yes, I will start on this today.

sakshambhatt commented 1 year ago

New flow for sign in with QR code:

  1. User signs-in in mobile app
  2. Generate public and private key for the user. Send public key to backend. Store private key of the user in Secure Storage in mobile.
  3. User opens my site, where backend sends a token, which will shown in the form of a QR code. [Refresh on interval]
  4. User scans QR code with their mobile app -> which signs the token of QR with their private key using a good digital signature algo, and sends the signed message to backend
  5. Backend uses the public key of the user from whom the signed message came, and use that user's public key to verify that the signature was generated using that user's private key or not, without an iota of a doubt.
  6. If verification is successful then generate an accessToken for that user and send it to the client having the token of QR
sakshambhatt commented 1 year ago

Few more points to consider:

  1. We can use a common pair of public/ private keys
  2. We can forego the use public/ private keys entirely and just send the token of QR with the access token. As there is no additional need for this. The user already has gone through a complex flow to acquire their access token.

Will try out and make 2 PoCs for 2nd one and then 1st one.

iamitprakash commented 1 year ago

@shreya-mishra @sahsisunny please update design and schedule call for discussion

shreya-mishra commented 1 year ago

@shreya-mishra @sahsisunny please update design and schedule call for discussion

will do it by 13th!