Guides & tutorials

Signup and auto login with Firebase and Arengu

Table of contents

Learn how to integrate Arengu with your own Firebase project, leveraging their user management APIs and creating a full authentication flow in a few steps.

Previous requirements

  • An existing Firebase project. If you don't have one, you can create one for free in the Firebase console.
  • An existing web app, where you'll be embedding the Arengu form.

1. Prepare your Firebase project

In the Firebase console for your project, enable the "Email/Password" sign-in provider in Build > Authentication > Sign-in method.

If you don't have an app registered in your project, go to the project settings (the cogwheel icon, next to "Project Overview"), in the "General" tab and register a new web app by clicking on the </> button.

Give it any name, and unless you are using it, don't enable the "Set up Firebase hosting for this app" checkbox, we won't be using that.

You'll be presented with a snippet of code. Save it somewhere as we'll be using later and click on "Continue to console".

Lastly, in the "Service accounts" tab and under "Firebase Admin SDK", click on the "Generate new private key" button. A JSON file will be downloaded, keep it for later!

2. Connect your Arengu account to your Firebase project

In Arengu, click on your profile button in the lower left corner and then on the "Vault" option.

Click on the "Add connection" button and choose "Firebase". Then, select the JSON file you downloaded from the Firebase console earlier, in the preparation step. The 3 fields will be automatically filled:

Click on "Continue" and give the connection a meaningful name. Finally, complete the connection with the "Add connection" button. Now you can use all the Firebase actions on your project from all Arengu flows.

3. Build the signup form

In the forms module, create a new form to your liking. We'll be needing only one step, containing at least:

An email field:

  • ID: 'email'
  • Required: enable this checkbox to make it mandatory

A password field:

  • ID: 'password'
  • Required: enable this checkbox to make it mandatory
  • Min. length: Firebase requires the passwords to be at least 6 characters, so it's a good idea to enforce it here instead of failing later in a less user-friendly way.

A next button and an HTML block.


For the last item, the HTML block, we'll have to fill it with some code in order to detect the successful form submission and log the user in. You can use the following script:

  <script>
    document.addEventListener('af-submitForm-success', (event) => {
      firebase
        .auth()
        .signInWithCustomToken(event.detail.confirmation.data.token)
        .then(() => {
          window.location.href = '/my-home-page';
        })
        .catch((err) => {
          console.error(err);    
          alert('Something went wrong!');
        });
    });
  </script>

This code will wait for the "form submitted successfully" event, log the user in, and finally redirect the browser to a URL of your choosing. For example, your home page.

Your form should look like something like this:

4. Add form logic with a flow

Now we need to build some logic to handle the data the user will submit in the form and generate the token Firebase needs to actually log the user in.

Add a new before submission flow to the form we just created and set it up this way:

Tryin to get a user with that email

This action tries to get the user from the database of your Firebase project, using the email that the user entered in the form. Set it up like this:

  • ID: 'firebaseLookup'
  • Field: Email
  • Value: {{input.body.email}}

Checking the result of the lookup

If the previous lookup was successful (i.e. its result had a value), that means that email was already registered and we'll stop with an error message. We can check this with an if/then condition configured this way:

  • Condition: {{firebaseLookup.body.user}} and "has value"

Creating the user

If the user does not exist, create the user in Firebase with the sign up action, using the email and password from our form. Configure the 'Sign up' action with these settings:

  • ID: 'firebaseSignup'
  • Enable the 'Set email' checkbox
  • Email: {{input.body.email}}
  • Password: {{input.body.password}}

What about the 'Mark email as verified' checkbox? Note that — because we want to keep this tutorial short — we're skipping a very important step, which is verifying that the email address actually exists. But don't worry, you can do that easily in Arengu too. Just head over to our guide about email OTP flows.

Requesting a secure token for logging in

The sign up action returned a unique random identifier for the user we just created. We'll be using that in the 'Log in without password' action, so Firebase gives us back a secure token that we will use to actually log in the user.

Set the action up like this:

  • ID: 'firebaseLogin'
  • Local ID: {{firebaseSignup.body.localId}}

Making the secure token available to the form

The previous action returned a secure token that we have to make available in the form, where the Firebase SDK will be waiting for it so it can actually log in the user.

In order to do that, use the "Set data fields" action configured this way:

  • Data fields, item with name token and value {{firebaseLogin.token}}

5. Embed the form into your web app

Go back to the form editor in Arengu and open the form you created. Click on the 'Embed' tab at the top, choose the type of web app you're integrating Arengu with, and follow the instructions there. They are most often just copying a couple of lines of HTML.


You might like to read

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.