Feat/email verification flow completed

[Markkos89]

Changes

• new modal to request email
• storing email in the correct user row

save button disabled

valid email

notification

email stored in database

Next steps

• validate valid email format
• verification email with sendgrid

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
academy-turbo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 0:13am
academy-turbo-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 0:13am

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	34
🟢 Accessibility	96
🟠 Best practices	83
🟢 SEO	92
🟠 PWA	89

Lighthouse ran on https://academy-turbo-git-feat-emailverification-v2-developdao.vercel.app/

[notion-workspace]

Academy Feat: Emailing users and sybil resistance

[elPiablo]

Hey @Markkos89
At what stage of the user journey do I set up, or log in with an email? And what triggers the modal to open, and approximately how long do I have to wait for it to open? E.g. 2 scenarios when I click Academy's "CONNECT" button

1. when l log in with my piablo.eth address (used many times and done quizzes on Academy) I just sign in with my wallet and I am not prompted to do anything else. I remember waiting for a lot of seconds and nothing happened

2. when I go to log in on an incognito browser tab, the first prompt I get is to log in with a wallet. I didn't go further and create a new wallet. Is that the intended next step, i.e. log in with wallet, then get your new modal's prompts to connect my wallet with an email address?

update

1. when I went back to Academy for something else (the browser tab was still open), the email modal prompt was open on the page on my piablo.eth Brave profile (my wallet was NOT connected). I can't say how long it takes for the modal to be activated.

Let me know if this makes sense?

[kempsterrrr]

Thanks for shipping this PR quickly !

Copying in the stories we agreed on the notion doc:

• As a business, we need to validate emails for all accounts to ensure some sybil resistance before users are able to complete any quizes/lessons
• As a business, we need to be able to mass emails users (via SendGrid)
• As a user, I need to associate an my email to my account and validate it
• As a user, I want to get email updates on new courses (mass manual emails via Sendgrid)
• As a user, I can’t complete a lesson/quiz without an account and validated email

The model is looking great, good work!

Here is how I experienced the feature:

1. Click preview link to load web page
2. Modal immediately came up when web page was loaded even though I was not singed-in.
3. Filled out the modal and did not receive an email
4. Modal no longer shows up

Let me know if I'm missing something here though to associate the email with an account I expect to need to be logged into my account first. I was unable to test the verification as I did not receive the an email from sendgrind.

The flow we're looking for is:

1. Users signs-up/in
2. Modal pops up and they fill in their email
3. User gets email and comes back to site to confirm email
4. User now fully verified
5. User is only able to complete quizzes and log these in the DB once they have an account with a verified email, if they don't have an account with a verified email, the button should show "sign-up" or "validate your email". If "validate your email? is shown, it should open the modal when clicked.

Does that make sense? I booked a call in your diary this evening in case it's helpful for us to speak as it's the only time I have free, and I'm out most of the day. If we can tackle this async then awesome too :)

[Markkos89]

Hello guys! Thanks a millon for both inputs!
I updated the branch with more work done, the email sent method wasn't pushed before. Now it should work and send it to the email inserted in the input.
I have to update the env var for sendgrid.
I also updated the database schema with the verificationNumber field wich is a autogenerated random number of 6 digits and stored there so we can validate against it.

Let me know what do you think about the flow or anything. Open to suggestions/ideas.

Next steps would be to mutate the emailVerifed field with the verification Date with a mutation I have to built and that would be it.

Thank you so much!! 🙌

@elPiablo @kempsterrrr @wolovim

🚀

[kempsterrrr]

@Markkos89 opened issue re privacy policy as discussed - #234

[Markkos89]

The email validation flow is completed now! With email with verification being sent, verification of the number, and everything stored in database.

cc: @wolovim @elPiablo @kempsterrrr please check it and let's ship it

[elPiablo]

HEy @Markkos89
Just want to show what the basic user flow is.
Here are two scenarios I've tested:
Number 1:

• I have a brand new browser profile, with a brand new wallet, and I will be using a new email address

• I open: https://academy-turbo-ktaoi4yeb-developdao.vercel.app/ on that profile and nothing happens.

• So I click on Academy's CONNECT button => wallet opens, I click on 'Connect' in the wallet => "Verify your Account"/Send message => Sign in and =>

• I get your modal to "Configrure your email".

• I fill in email in modal, but i don't get an email notification (also not in spam/junk)

• therefore I can't "Insert the verification Code Sent"

Number 2:

• I open a well used browser profile, i.e. my 'daily' Brave profile, which has my 'piablo.eth' wallet (I've done loads of quizzes, etc with this wallet) with the URL: https://academy-turbo-ktaoi4yeb-developdao.vercel.app/
• Nothing happens, so I do the same as above, log into my piablo.eth wallet and sign on to Academy.
• Important to note, I haven't coupled/paired this wallet to an email address on Academy, but the modal appears asking me to "Insert the verification code Sent"

Can you give some bullet points on 2 or 3 scenarios of the user please? (

• a brand new user
• and a user who has a wallet and email successfully coupled to each other
• and a user such as me, where my wallet is recognised in the database, but I don't have an email yet address attached to it (maybe I'm wasting your time with this 3rd option, and it's not relevant for us all)

[Markkos89]

HEy @Markkos89 Just want to show what the basic user flow is. Here are two scenarios I've tested: Number 1:

• I have a brand new browser profile, with a brand new wallet at, and I will be using a new email address
• I open: https://academy-turbo-ktaoi4yeb-developdao.vercel.app/ on that profile and nothing happens.
• So I click on Academy's CONNECT button => wallet opens, I click on 'Connect' in the wallet => "Verify your Account"/Send message => Sign in and =>
• I get your modal to "Configrure your email".
• I fill in email in modal, but i don't get an email notification
• therefore I can't "Insert the verification Code Sent"

Number 2:

• I open a well used browser profile, i.e. my 'daily' Brave profile, which has my 'piablo.eth' wallet (I've done loads of quizzes, etc with this wallet) with the URL: https://academy-turbo-ktaoi4yeb-developdao.vercel.app/
• Nothing happens, so I do the same as above, log into my piablo.eth wallet and sign on to Academy.
• Important to note, I haven't coupled/paired this wallet to an email address on Academy, but the modal appears asking me to "Insert the verification code Sent"

Can you give some bullet points on 2 or 3 scenarios of the user please? (

• a brand new user
• and a user who has a wallet and email successfully coupled to each other
• and a user such as me, where my wallet is recognised in the database, but I don't have an email yet address attached to it (maybe I'm wasting your time with this 3rd option, and it's not relevant for us all)

Hey Piablo! GM!

Let's check:

Important to note, I haven't coupled/paired this wallet to an email address on Academy, but the modal appears asking me to "Insert the verification code Sent"

you already have email's set up:

So, @elPiablo are you NOT receiving the verification number email?

[elPiablo]

Hey @Markkos89 !!

So, @elPiablo are you NOT receiving the verification number email?

yes, correct, I don't have email notifications in either (=both for negative sentences) email account

[Markkos89]

Hey @Markkos89 !!

So, @elPiablo are you NOT receiving the verification number email?

yes, correct, I don't have email notifications in either (=both for negative sentences) email account

have you check the spam folder?

wanna check together? wrote to you on discord

[kempsterrrr]

Hey @Markkos89 - I've just logged in to test this and was shown the code verification modal right away before I was given a chance to enter my email and request the code. I assume this is because I requested a code the first time I tested this flow and was unable to enter it, as when I initially tested this last week, the email didn't arrive. I am, therefore, stuck on this verification screen without any way to fix this as a user.

I suspect this highlights a need for someone to request another verification code (a typical flow in these scenarios) if the initial email doesn't arrive for whatever reasons.

I am stuck on this screen:

[elPiablo]

Hey @Markkos89
Scenario 1:

• 1. I open up my 'piablo-aca-test' browser profile and my 'piablo-aca-test' wallet was already logged in from my last browser session, and this is this should be connected to the '[email protected]' email (you and I used these variables on our Saturday testing session) and no Academy modals opened up.
• 2. I disconnected that wallet, and reconnected it. No modals opened.
• 3. So far, I haven't received any new emails.
• 4. The Final Quiz buttons are active:
     
• 5. Quiz completed:
     

Scenario 2:

• 1. I open my piablo-dev Brave profile and connect that wallet - there is a chance that I have done quizzes using that wallet: 0xf4bAFA90241e808461653C17dB0f8669Fa4342a1 - can you check that in the back end?
• 2. It asks to config my email:
     
• 3. I won't take any further action until you check that back-end situation with this wallet

Scenario 3:

• need to go and eat something - I'll come back and finish off setting up a complete new profile (protonmail was being difficult with recovery accounts)

[elPiablo]

Scenario 3 (resumed):

• log into brand new Brave profile, wallet and email.
• open Academy => no modals
• connect wallet, send message, sign in =>
• "configure your email" modal opens => fill in new email [email protected]
• "insert the verification code sent" modal opens straightaway
• however, no new email received in new inbox/spam/junk
  @Markkos89