ODHack: Implement Social Login(OAuth Authentication)

[Julian-dev28]

Please add PRs to the update-P21 branch

Description:
Add OAuth authentication to the Soroban Example Dapp to allow users to log in using their social media accounts.

Tasks:

1. Set Up OAuth Providers:
   • Configure OAuth providers (e.g., Google, Facebook).
   • Obtain necessary API keys and credentials.
2. Implement Frontend Login Flow:
   • Create a login button for each OAuth provider.
   • Redirect users to the provider's authentication page.
   • Handle the OAuth callback and retrieve user information.
3. Integrate OAuth Authentication on Backend:
   • Implement backend endpoints to handle OAuth authentication.
   • Validate and store OAuth tokens securely.
   • Create or update user records based on OAuth data.
4. Ensure Secure Handling of OAuth Tokens:
   • Implement best practices for storing and managing OAuth tokens.
   • Ensure secure transmission of tokens between frontend and backend.

Create and Store a Key Pair After Signing in with OAuth

Account Creation

1. Generate Key Pair:

   • After the user signs in using OAuth, generate a public and private key pair.
   • Use a secure method to generate these keys, ensuring they are unique and sufficiently random.

2. Display Key Pair:

   • Display the generated public and secret keypair to the user.
   • Provide an option for the user to regenerate the keypair if they prefer.

3. Encrypt and Store Secret Key:

   • Prompt the user to enter a pincode to encrypt their secret key.
   • Use a strong encryption algorithm (e.g., AES) to encrypt the secret key before storing it in the browser’s localStorage.

User Experience

1. Secure Key Management:

   • Inform the user that their encrypted secret key will only be stored locally in their browser.
   • Emphasize that the key will not be shared with any server or third parties.

2. Confirm Pincode:

   • When the user submits their pincode, confirm it by encrypting a sample data and verifying it can be decrypted correctly.

Code Implementation: Key Pair Management

1. Svelte Store for Key Pair:

   • Create a Svelte store to handle the user's keypair.
   • Use the js-stellar-wallets SDK to manage key encryption and decryption.

2. Store Key Pair:

   import { persisted } from "svelte-local-storage-store";
   import { KeyManager, KeyManagerPlugins, KeyType } from "@stellar/wallet-sdk";
   import { error } from "@sveltejs/kit";
   import { get } from "svelte/store";
   
   function createWalletStore() {
     const { subscribe, set } = persisted("walletStore", {
       keyId: "",
       publicKey: "",
     });
   
     return {
       subscribe,
   
       register: async ({ publicKey, secretKey, pincode }) => {
         try {
           const keyManager = setupKeyManager();
   
           let keyMetadata = await keyManager.storeKey({
             key: {
               type: KeyType.plaintextKey,
               publicKey: publicKey,
               privateKey: secretKey,
             },
             password: pincode,
             encrypterName: KeyManagerPlugins.ScryptEncrypter.name,
           });
   
           set({
             keyId: keyMetadata.id,
             publicKey: publicKey,
             devInfo: {
               secretKey: secretKey,
             },
           });
         } catch (err) {
           console.error("Error saving key", err);
           throw error(400, { message: err.toString() });
         }
       },
   
       confirmCorrectPincode: async ({ pincode, firstPincode = "", signup = false }) => {
         if (!signup) {
           try {
             const keyManager = setupKeyManager();
             let { keyId } = get(walletStore);
             await keyManager.loadKey(keyId, pincode);
           } catch (err) {
             throw error(400, { message: "Invalid pincode" });
           }
         } else {
           if (pincode !== firstPincode) {
             throw error(400, { message: "Pincode mismatch" });
           }
         }
       },
   
       sign: async ({ transactionXDR, network, pincode }) => {
         try {
           const keyManager = setupKeyManager();
   
           let signedTransaction = await keyManager.signTransaction({
             transaction: TransactionBuilder.fromXDR(transactionXDR, network),
             id: get(walletStore).keyId,
             password: pincode,
           });
           return signedTransaction;
         } catch (err) {
           console.error("Error signing transaction", err);
           throw error(400, { message: err.toString() });
         }
       },
     };
   }
   
   export const walletStore = createWalletStore();
   
   const setupKeyManager = () => {
     const localKeyStore = new KeyManagerPlugins.LocalStorageKeyStore();
   
     localKeyStore.configure({
       prefix: "walletApp",
       storage: localStorage,
     });
   
     const keyManager = new KeyManager({
       keyStore: localKeyStore,
     });
   
     keyManager.registerEncrypter(KeyManagerPlugins.ScryptEncrypter);
   
     return keyManager;
   };

Creating the Account on the Stellar Network

Fund Account

1. Fund with Friendbot (Testnet):
   • Use Friendbot to fund the new account with Testnet XLM for testing purposes.

   import { server } from "./stellarServer";
   
   export async function fundWithFriendbot(publicKey) {
     console.log(`Requesting Friendbot funding for ${publicKey}`);
     await server.friendbot(publicKey).call();
   }

Using the Wallet Store

1. Pincode Confirmation:
   • Use the wallet store throughout the application to handle user pincode confirmation and transaction signing.
   • Integrate the wallet store with UI elements like confirmation modals.

Expected Outcome:

• Users can log in using their social media accounts.
• Secure and seamless OAuth authentication flow.
• Properly stored and managed OAuth tokens.

Why This Is Important:
OAuth authentication provides a convenient and secure login method for users, enhancing user experience and potentially increasing user engagement.

[Jonatan-Chaverri]

Hello, I will like to take care of this one during the LambdaHackWeek!

[Julian-dev28]

Hello, I will like to take care of this one during the LambdaHackWeek!

Hey @Jonatan-Chaverri I've added some context to the bounty that should help with the issues we discussed earlier. Please have a look. If you want to check out the Stellar Account Creation Tutorial, this would also help you out.

[Iwueseiter]

Hi @Julian-dev28 can I work on this?

[onlydustapp]

Hey @Iwueseiter!
Thanks for showing interest.
We've created an application for you to contribute to Soroban Example Dapp.
Go check it out on OnlyDust!

[armsves]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have implemented oauth before, but not with web 3,it looks like a nice security challenge

How I plan on tackling this issue

Add the oauth code, create a hot wallet and store the key until the user decides to take ownership of the wallet, or could also not allow it and keep it under our control.

[Dprof-in-tech]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello
I’m Isaac, a JavaScript developer with notable experience contributing to projects on OnlyDust on and off the ODHACK. I am a returning contributor to your project and would love to contribute more here.

I’m skilled in using JavaScript and typescript to build out efficient solutions and this experience of mine can be seen on my OnlyDust profile at https://app.onlydust.com/u/Dprof-in-tech and on my GitHub at https://github.com/dprof-in-tech

I have my proposed solution to this issue below.

How I plan on tackling this issue

I have experience working on integrating social logins from contributing to a project in a previous odhack, underware_gg given the detailed description of the issue, i will follow te instructions ajs given to build out the solution to tis issue

[Dedigraz]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have implemented oauth in at least 15 apps and websites from asp.net with c# to go and react-native systems.

How I plan on tackling this issue

Rust -> Create a middleware that makes checks whether the default session is authenticated or not for the key api methods
Svelte -> Implement auth.js qith both google and email providers with the appropriate view

[Jayse007]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a backend developer who usually works with django and I have made use of OAuth on a number of projects. I believe I am well suited for the job.

How I plan on tackling this issue

I would make use of the OAuth library available to django and work in tandem with your instructions. The work would easily be delivered within 48 hours.

[ScottyDavies]

I am applying to this issue via OnlyDust platform.
As a frontend developer, here's how I would approach this problem:

Set Up OAuth Providers:
Configure the necessary OAuth providers (e.g., Google, Facebook) and obtain the required API keys and credentials.
Ensure that the OAuth provider configurations are set up correctly in your application.
Implement Frontend Login Flow:
Create login buttons for each OAuth provider in your Svelte components.
When a user clicks on a login button, redirect them to the provider's authentication page.
Handle the OAuth callback and retrieve the user's information from the provider.
Integrate OAuth Authentication on the Backend:
Implement backend endpoints to handle the OAuth authentication flow.
Validate the received OAuth tokens and securely store them.
Create or update user records based on the obtained OAuth data.
Ensure Secure Handling of OAuth Tokens:
Implement best practices for storing and managing the OAuth tokens, such as using secure storage mechanisms and following the principle of least privilege.
Ensure the secure transmission of tokens between the frontend and backend.
Create and Store a Key Pair After Signing in with OAuth:
After the user signs in using OAuth, generate a public and private key pair.
Use a secure method (e.g., the js-stellar-wallets SDK) to generate the keys, ensuring they are unique and sufficiently random.
Display the generated public and private key pair to the user, and provide an option to regenerate the key pair if desired.
Prompt the user to enter a pincode to encrypt their private key, and use a strong encryption algorithm (e.g., AES) to store the encrypted key in the browser's localStorage.
Implement Secure Key Management:
Inform the user that their encrypted private key will only be stored locally in their browser and will not be shared with any server or third parties.
When the user submits their pincode, confirm it by encrypting a sample data and verifying it can be decrypted correctly.
Integrate the Wallet Store:
Create a Svelte store to handle the user's key pair management, using the js-stellar-wallets SDK.
Implement the necessary functions to register the key pair, confirm the pincode, and sign transactions.
Use this wallet store throughout your application to handle user pincode confirmation and transaction signing.
Fund the Newly Created Account:
Use the Friendbot service on the Stellar Testnet to fund the newly created account with XLM for testing purposes.
Integrate the Wallet Store with the UI:
Ensure a smooth and seamless user experience by integrating the wallet store with various UI elements, such as confirmation modals.
Testing and Validation:
Thoroughly test the entire OAuth authentication flow, key pair management, and transaction signing functionality.
Ensure that the application handles edge cases and error scenarios gracefully.

[CrimsonKarma44]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have 3 years of experience in backend programming in golang and python framework (django, flask)

How I plan on tackling this issue

I will create an oauth authentication that generates a public and private key pair on login which will be sent to the frontend to be displayed to the user