Embedded Files
INTRO
INTRO
A few people have asked about creating a registration and login system with Firebase, probably without realising that they can use the full extent of Firebase's powers to do this, it will do some of the heavy lifting often associated with a workable login system in an App Inventor app.
I have used the Web component and the Firebase REST API for this guide, as per my longer Firebase guide, it is more flexible and exposes more of the options for further development. I have also used the simple Email/Password login method on Firebase.
The premise is simple:
A new user of your app will register with a (real) email address and a password (minimum 6 characters) of their choice
On registering, Firebase sends a verification email to their email address.
The user must verify their email address
Once verified, the user can now login to your app
SETUP
SETUP
Firebase
Create a new project
Get the API Key
That is all you need to do, however if you plan to use the database or storage then you will need to setup rules, projectBuckets etc.
App Inventor
Create a new app
Add a Web component, Notifier, and a series of vertical arrangements containing buttons and textboxes to create the registration and login UI
BLOCKS
BLOCKS
Registration and Login methods always require a seemingly disproportionate number of blocks, it is no different here....
Detailed description of the method:
The user enters their email address and password
If these are of the correct format and size, the app will send a GET request to Firebase to SignUp a new user to your project, and return the all important idToken
Once the app has the idToken, it can then send a second GET request to Firebase, this time to generate the verification email
Outside of the app, the new user must check their emails for the verification email, click the link to verify
Once this is done, the verification process sends confirmation back to Firebase, and a user profile setting of "emailVerified" is set to true (boolean)
The new user can now attempt a login.
Another GET request to SignIn the user, but with the response content we are only after the idToken again, because we need to check for verification
Final GET request to test the user's profile for "emailVerified" = true, and if so
User is logged in
note; there are several sanity checks along the way, I took a shortcut and lumped any returned Firebase errors into one notification (EMAIL_EXISTS, INVALID_EMAIL,WEAK_PASSWORD,EMAIL_NOT_FOUND, are some examples
AIA and FILES
AIA and FILES
Page updated
Google Sites
Report abuse