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