Registration & Login with Firebase Authentication

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

  • 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

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

AI2FBRegLogBlank.aia (complete aia project, you just need to add your own API key)