Authentication (Firebase)

The Authentication component (Firebase) allows you to insert an authentication form, to manage a user database and to associate data to your users (score, progress, account type...). 

Users easily log in to your application using a form. You can create a personalized user experience with events defined based on user data.

In this article

Configure the Firebase console

Create a free account 

This Authentication component requires a Firebase account for its configuration and use. Creating a Firebase account is free.
Firebase is Google's mobile platform that allows the creation of a scalable and powerful backend, dedicated mainly to mobile applications. The backend represents the server part of the application that manages responsibilities such as authentication, storage, notifications, etc...
Here is the link to create an account:  https://console.firebase.google.com/

Create new project

For each application, you need a specific project. 
Follow the instructions below to create a new project in Firebase. You will need some of this information in PandaSuite Studio.

cre_er-un-projet-firebase.png

Choose a name for your project.

choisir-un-nom-projet-firebase.png

Follow the steps and validate. 

e_tape-2-projet-firebase.png

That's it, your project is now created.

Enable the Email / Password sign-in

Go to Authentication and the Sign-in method tab. 

Click Enable for the Email Address/Password option as shown below.

autoriser-email-mot-de-passe-firebase.png

You now have an authentication procedure. 

Configure Cloud Firestore

If you want to collect other user fields (Job, Company) during registration or associate data with your users (Score, Progression), you must also configure Cloud Firebase. Cloud Firestore is a Firebase specific database.
Go to the Database tab. Click on Create Database.

cre_er-une-base-de-donne_es-firebase.png

Choose the Start in Test mode.

commencer-en-mode-test.png

nouvelle-database.png

Go to the Rules tab: you need to update the security rules in order not to be blocked after 30 days. Copy and paste the code below:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if request.auth.uid == userId
    }
  }
}

mettre-a_-jour-re_gles.png

Your Cloud Firestore configuration is ready.

Insert an authentication form

In parallel, open PandaSuite Studio. Click on Components and choose Authentication
The Authentication component allows you to display the authentication form. Insert the Authentication component in the screen of your choice. 

Insert the Authentification component

In the Properties window, copy/paste the projectID and the apiKey from the Firebase console. 

This information is accessible from the Project Settings on Firebase.

parame_tres-du-projet-firebase.png

identifiants-projet-firebase.png

Customize apparence 

You can customize the CSS style of the form by clicking on the Edit button in the Properties window.

Options of the Authentication component

The Authentication component has other options: 

Force authentification after (hours)

This option indicates the number of hours (after identification) during which the session remains valid, even without internet connection. After this number of hours, an internet connection will be required to continue. When the session is still valid, the user will not need to reconnect. By default, the value 0 creates an infinite session.

Force email verification

This is an additional email validation step in which the person receives an email with a validation web link. This step is necessary before accessing the application.

Advanced user fields

These fields are required when registering the user: Job and Company.

If you choose this option, you must have completed the Cloud Firestore configuration (see above). 

Show communication and usage terms

This option adds a checkbox for the validation of the conditions of use. A new trigger event is exposed (Terms clicked) on the Authentication component: it allows to associate an action in the user path. 

Déclencher et créer une action liée à l'authentification

The Authentication component exposes trigger events that you can use in your user journey: 
  • User Sign In: this trigger takes you to the home screen if the user is logged in
  • User Sign Out: this trigger displays the authentication screen if the user is not logged in
  • Terms clicked (if you have enabled the Show communication and usage terms option)
You can also add actions on the Authentication component: 
  • Sign out: to disconnect the user from his session
  • Modify data: to modify a data related to your users (for example a score)

Manage users

Once you have your authentication form set up, you can manage your user database directly in Firebase.
Go to Authentication and the Users tab to find your user base. You have access to the following data: email, creation date, last login date and their unique identifier (user ID). 

You can manually add one or more users. 

Associate data to users

Thanks to this component, you can also associate data to your users to personalize their journey in the application. You can associate a score to each of your users, define different types of users, know their progress in the application etc... 
These data are accessible from your Firebase and can be reused for other occasions. You can for example establish a leaderboard or statistics. You must have configured Cloud Firestore beforehand (see above).

Associate a score

Let's take the example of a score. All you have to do is create the action to increment the score from PandaSuite Studio so that the score data is automatically created in the database.
Select the right answer and the action Interact with a component > Authentication > Modify data

Data : /score
Function : Increment
Value : 1

Lean more about how to create score: Score

Track score

You can track your users' scores from Firebase.
Go to Firestore and the Data tab to find your users database. Each user is presented in the form of its unique identifier. You will find the Score field. 

Still need help? Contact Us Contact Us