In Nowadays there are many extension to integrate firebase authentication in app inventor app, but these extensions have not all functionality.So, here you are going to learn how to integrate firebase authentication in your app with the help of Firebase Rest API. You can easily integrate with Kodular, Appybuilder, Thunkable or App Inventor
Sign up with email / password
You can create a new email and password user by issuing an HTTP
POST request to the Auth
SIGN UP URL
First of all open any project in the builder and drag & drop the web component
Go to Block section and set, when screen initialize set web url to the url given above with your firebase API key. And use obfuscated text block to secure your API key.
Request Body Payload
|The email for the user to create.|
|password||The password for the user to create.|
|returnSecureToken||Whether or not to return an ID and refresh token. Should always be true.|
After setting web url create a post request with email & password.
URL : 'https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=[FIREBASE_API_KEY]' POST : 'email=[firstname.lastname@example.org]&password=[PASSWORD]&returnSecureToken=true'
In the example above, you would replace [FIREBASE_API_KEY] with the Web API Key of your Firebase project,[email@example.com] with the new user’s email, and [PASSWORD] with the new user’s password.
|kind||The request type, always “identitytoolkit#VerifyPasswordResponse”.|
|idToken||A Firebase Auth ID token for the authenticated user.|
|The email for the authenticated user.|
|refreshToken||A Firebase Auth refresh token for the authenticated user.|
|expiresIn||The number of seconds in which the ID token expires.|
|localId||The uid of the authenticated user.|
|rejistered||Whether the email is for an existing account.|
After post request, if the authentication will be successful then you get response with idToken, email, refreshToken, expiresIn, localId. You can use it to get user profile data like email, name, profile picture, phone no., gender, etc.
To get user profile data you have to download json tool extension to parse json.After downloading import extension in project.
Drag & Drop web ‘when got text ‘ block and put json tool extension ‘parse json’ block inside it. And join response content with json string.By this way you can get string value of any json.
Add new web component and set get user info url with firebase API
GET USER INFO URL
Create a new post request with web 2. Drag & Drop join text block, At first put ‘idToken=’ and at second put json tool extension ‘getintvalue’ block with attribute name ‘idToken’.
URL : 'https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=[FIREBASE_API_KEY]' POST : 'idToken=[FIREBASE_ID_TOKEN]'
Sign in with email / password
You can sign in a user with an email and password by issuing an HTTP
POST request to the Auth
Sign in method is same as sign up method only Post URL will be change. And you again get same post response with idToken . You can use ‘get user info’ method to get user info
SIGN IN URL
This is only an example to make you understand, ‘how to integrate firebase authentication rest API in App Inventor’. You can make yourself a better authentication system using firebase authentication rest api .
You can also send user email verification email during authentication & user also can reset their password.