Firebase Authentication - New user Sign Up in AppGyver

The default Firebase authentication page provides only login functionality. We can't always update the user credentials from the backend. So, let me show you how to add sign up functionality to the auto-generated authentication page.

Step 1: Adding text component to login page

• Add a new container below the login button named Sign Up Container and add text mentioning the same.

Step 2: Create Sign Up page

• Create a new page named Sign Up with two input components for getting your email and password and a button named Sign Up.

• Now to hold the values provided by the user, we need to create two page variables named Email and Passcode which are of type string.

• Bind the page variable Email to the input parameter of email and Passcode to the input parameter of password.

• The most important step is to enable the Allow page to be opened without authentication page property under Advanced properties, or else this page will not be triggered until authentication is done.

Step 3: Firebase Sign Up API

• We are going to achieve this functionality using the below Firebase REST API endpoint.

https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY]

• API_KEY can be found in your project settings general tab.

• The method is POST and the request body consists of email, password, and returnSecureToken keys.

Let us see how this works in POSTMAN.

• Set the method to POST.

• Paste the above endpoint and copy and paste the web key from the project settings in place of [API_KEY].

• Pass the request body with your email, password and returnSecureToken details.

• Click on Send and the sign up will be successful like below.

• You can now see the user details added to your project.

Google has validation on email and password provided as input. So the request might result in an error if you are trying to use the same email Id or weak password.

Step 4: Action on Sign Up button click

• Add an IF condition to validate the basic check on whether both the email and password fields are provided to proceed further using the formula.

• If validation is successful, then proceed with further HTTP request, else trigger a Toast stating the same.

• Paste the Firebase API into the URL parameter of the HTTP request and set the HTTP method to POST. Then go to the request body and provide the below formula to pass the details from the user to Sign Up for your application.

• Go to the login page if the HTTP request is successful using Navigate back, or else Toast the error message.

Step 5: Navigate to Sign Up page

• On the login screen, when the Sign Up component is clicked, using open page flow logic, navigate to the Sign Up page.

Step 6: Sign Up new user from AppGyver

• Let's see how this works in the preview application.

• The signed up details can be seen in the authentication of the project.

Suggestions and feedback are much appreciated. It encourages me to improve and share more content based on my experience with no code tools. If you have any doubts or queries, drop them in the comment section.