new user login flow with Magic Link

[0xmovses]

We are trying to onboard users who are not used to using crypto in an effortless and seemingless way. We want the user to be able to click one button which at once connects their wallet and logs them in. We also want to abstract away any wallet functionality and all use of Metamask Wallet Extenstion.

The current version of the app uses Metamask as the wallet provider. MagicLink enables passwordless login and wallet provider service with a backend and frontend SDK.

We are going to implement a new user login flow using fortmatic-magiclink like this:

New User Login Journey

• there is only one type of user intially 'fan'.
• when they click login, they are taken through the magiclink modal login.

• A fan can the apply as an artist in the account details page.

  Tasks for Daniil

part I track user login ID

• [x] make a new branch, 'magiclink_login',
• [x] set up backend node magic link SDK, here is how to do it https://magic.link/docs/admin-sdk/node/api-reference Returns string : DID token. Also see this guide for node and magic https://magic.link/posts/magic-link-nodejs
• [x] upon user login get DID data from magic link https://magic.link/docs/decentralized-id#decentralized-id-token-specification
• [x] use one of the fields of DID, mayb use tid to track user identity.

part II

• [x] create new database route for 'Artist Applications' and controller to write data to mongo collection.
• [x] create mongoose schema for 'Artist Applications' collection.
• [x] create Api post request from new form data with formData.append() method as in src/page/createSocialToken.js

part III enable change to Artist user type

• [x] in Admin Dashboard create field for user email and button 'create new artist'
• [x] create Axios.post request to '/createnewartist' with email data sent as json.
• [x] create a new post route '/createnewartist', the controller will find user by email, and change account_type property in DB from account_type : user to accountType : artist
• [x] the controller also should move the user from collection Users to collection
• [x] If user has become Artist, upon login they should see all Artist Management icon and have access to that page.

part IV, UX upgrade

• [x] upgrade React Router so that Manage Artist only appears if account_type = artist && approved = true.
• [x] regular user should see dashboard icon upon logging in
• [x] Admin, upon logging in should see Admin Dashboard Icon and have access.

Tasks for Degen

• [x] create 'Apply as Artist Button,'

  

• [x] create form modal with the following fields: 'Artist Name', 'Artist social links' (three fields), city, country, email, phone number, email, aritst profile image, artist banner image.

• [x] create axios post request with artist application data sent as JSON object

• [x] In the file src/page/MyDashboard.js current token data is being fetched using an Axios request to get tokenBought data from the Database. You can think of this page as a wallet dashboard with a custom UI. All the data will actually come from the Magic Link wallet, not the database. refactor the code so that all the data displayed on the UI comes from the users' Magic Link Wallet. Use ethers.js to get balance data from the wallet, where magic Link is the wallet provider.

bugs / fixes

• [x] #18
• [x] #19

[derivativedegen]

created branch magiclink_login to start work on part two... please pull from git when starting work on part one @Daniil-MERN-Dev

[derivativedegen]

I made the modal and realized a lot of the info we already had in the user profile is reused such as address, city, country, zip, profileImage. I think having a modal pop up asking for a lot of the same info seemed like bad UX imo.

So for simplicity I added a button to toggle "apply for artist" mode and then those additional artist fields appear in the account settings form with an "Apply" button that has a handler sending a POST request. This way there's no need for redundancy of info or a modal at all.

These fields are all hooked up functionally with component state. Just need someone to look over the Axios POST request to make sure it's wired up properly in regards to the API endpoint & database fields. Also need the current getData() function to retrieve this new data and populate on page

[derivativedegen]

https://magic.link/docs/blockchains/ethereum

Leaving this here for later.

[derivativedegen]

@Daniil-MERN-Dev @rvmelkonian

i did the latest server git pull and magiclink_login branch git pull before beginning today, and now im getting 1 error and 1 infinite loading bug. please let me know if this is the same for you when recreated.

1) error -- when clicking logout i get a "Error: Actions must be plain objects. Use custom middleware for async actions." and it wont let me log out. I know you're working on the login function so i assume this will be patched.

2) bug -- when clicking on any artist, the page is stick in loading forever, none of the components load and the green loader is shown. I'm not sure what this is stuck up on. I've attached a console log with errors. I assume this has to do with price fetching and using metamask which we arent anymore.

[derivativedegen]

Done:

• [x] Refactored Mydashboard code
• [x] Set up MagicLink instance and provider with Rinkeby
• [x] Pulling token balances from user's MetaMask wallet
• [x] Pulling current token price
• [x] Calculating total value of portfolio
• [x] Displaying total value of portfolio

Need:

• [x] Need to be able to login to MagicLink
• [x] Need to get MockUSDC to MagicLink wallet
• [x] Need Artist page loading bug fixed to buy artist tokens
• [x] Have to figure out how to pull token balances from MagicLink after setup

Summary of Work & Questions

• [x] For now I have hardcoded the two tokens I own in MetaMask, set connectedWallet initialState to true, and designed functionality based off MetaMask. I also imported MagicLink SDK and set up a MagicLinkProvider instance. Once MagicLink is setup, would switching walletProvider to magicLinkProvider essentially be the only thing I need to do to get it working successfully with magicLink?

@Daniil-MERN-Dev please do a git pull before working on this @rvmelkonian please let me know about the above questions/needs list

[derivativedegen]

@Daniil-MERN-Dev update notes: temporarily added "CONNECT" button since i cannot login with magiclink, please disregard. i will remove it once i have magiclink functional.

@rvmelkonian could you please add my email derivativedegen@gmail.com to the app DB with artist and admin permissions so i can successfully validate with magiclink and also access all areas of the app?

[derivativedegen]

Magiclink login flow complete User data from server fetch and load during login complete Magicwallet access works and displays user's wallet address + token balance for current 2 hardcoded tokens (LTA & HFT)