Automatically Send an Email with OTP


#1

TUTORIAL DIFFICULTY: Easy
If you have been working with a database (Firebase or Fusion) you should have no trouble understanding the challenge. The overall concept should be easy for almost everyone to follow. You should be able to follow along easily if you are able to find blocks by looking at a screenshot.

VIDEO DESCRIPTION:
This video will help you set up a new applet on the IFTTT website. This applet will be used to automatically send an email to a user containing a One-Time-Password (OTP). In AppyBuilder, we’ll generate the OTP using a 5-digit-pin. The numbers are generated at random, giving us 100,000 possible combinations. When the user receives the email, they’ll be asked to enter their OTP. If the user input matches the generated OTP, we’ll output a success message; otherwise, we’ll output an “Invaid Pin”. The Challenge for this video explains how you might want to allow the user to change their password after receiving the success message.

YOU AGREE THAT BY DOWNLOADING THIS .AIA FILE you will ONLY use it for education purposes or as part of your app. Any apps published to Google Play using any or parts of this .aia file MUST legibly include the phrase “original app design by Pixii Bomb” either on the title screen or somewhere in the “About” section. ANY Or ALL parts of this project MAY NOT be uploaded to another youtube channel, website, or publication in which the uploader receives credit for my work. If you wish to use ANY part of this tutorial in a tutorial that you create, you MUST have my permission to do so.
If you violate any of the above terms, your channel/website/publication will be flagged for copyright infringement.
Project .aia File: OTP_FREE.aia (71.4 KB)

:fairy: Exclusive Graphics for this Project available to the Pixii Bomb Squad :bomb:


One time password (otp) using firebase
#2

Wow nice
@PixiiBomb , you always help us to increase the quality of our’s app by doing new tutorials.—
thanks alot

if possible
Any tutorials for the receive otp by sms


#3

yes, real kewl tutorials :blush:


#4

Thanks so much Shiv and Hossein! :hugs:

Sending a Text Message is one of the original App Inventor Tutorials:
http://www.appinventor.org/content/ai2apps/simpleApps/noTexting

In the video I mentioned that if you had the user’s phone number + email, you could have the option of setting Button2 to “Send Text”.

Try practicing implementing the changes with your phone number to test it out :slight_smile:


#5

wow @PixiiBomb call me by my nick name

:heart_eyes: :heart_eyes: :heart_eyes:


#6


#7

pixii you are awosame .your tutorial is very helpful to increase the quality of my apps and I Love you so much


#8

thank you so much :fairy: :bomb: :heart:


#9

Regarding this tutorial I need help (
set up a new applet on the IFTTT website. This applet will be used to automatically send an email to a user containing a One-Time-Password (OTP).)
I am using this IFTTT website for OTP it is working well but in my application so many users type wrong emails or misspelling emails. the reason I am using textbox for emails input so textbox cannot check valid email. how can I check valid mail address in textbox before submitting.
I got this mail yesterday.

Your email was bounced…
… because something went wrong between you and your recipient. Ugh!
What to do next?
Well, your specific problem was a 5.1.2 error.
Which means you should: Check the “gmial.com” part of "janushah437@gmial.com" for misspellings or missing letters. If you find an error, correct it in your contacts list or address book for next time.
Or further: It is possible that the domain is temporarily inactive. If the spelling looks correct, contact your mail provider and if necessary, contact your recipient another way (e.g., phone or text message).


#10

try the EmailAddressIsValid method from the tools extension https://puravidaapps.com/tools.php
EmailAddressIsValid
Taifun


Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.


#11

thank you sir,
god bless you.
solved


#12

Hello Pixi,
During the setup of the IFTTT action fields, you paste in a simple HTML for the body. Not sure how to create this and the specifics behind it.

Mike Brennan


#13

God bless. I am grateful, and must adhere to the ethics.


#14

Hey there Mike,
At about 3:40 into the video you’ll see me copy/paste the simple HTML. You can make this as simple or complex as you like, but for the tutorial, I kept it very simple.

At 3:44 in the video, you’ll see an example of what the email will look like (outlined in red)

The full HTML for the body of the email looks like this:
html

  • {{OccurredAt}} and {{Value2}} are special variable placeholders from IFTTT (this was explained around 3 minutes into the video)
  • Line 1 - will center the text in the email (start of the center tag)
  • Line 2 - will display the date the email was sent, and change the text color to gray
  • Line 3/4 - will display the message “Use this PIN to reset your password…” (same gray color). The text is also displayed a Header 3 (which is why it’s larger than the date)
  • Line 5 - is a horizontal line break (this line --------------)
  • Line 6 - will display the 5 digit pin sent from the app. (same gray color, Header 1)
  • Line 7 - horizontal line break
  • Line 8 - end of the center tag

You’ll see this again at around ~5:50 in the video. (About a minute prior to that was testing out IFTTT and making sure the event worked)

Hope that helps. :slight_smile:


#15

i have a problem that my otp is coming in 5-6 parts please solve.


#16

Yes Pixi, it does help. Thanks so much. Your videos are really driving my understanding and helping me teach my students new ideas.

Mike Brennan


#17

Happy to hear it :smiley:


#18

One more technical question which deals specifically with design. Is it possible to use a TinyDB for retrieving the OPT by email? I ask since my students have yet to be taught how to use cloud based data management systems and I want to develop the ability to retrieve a OTP and then I can expand it to include cloud based management.

Mike Brennan


#19

Dear sir, Is that possible to - when someone (user ) send any massage or chat it going to be an selective email address, Such as i attached or link one mail id and when user send any massage it will be send by mail . Please inform me Thanks


#20

thanks so much. but is there no way i can send OTP to mobile phone apart from using way2sms