Setup AppGyver and Firebase REST API

Hi @George_Pillari … putting your request for more details on now to use AppGyver and Firebase in a separate thread in case others are also interested.

Here’s an overview of what you need to setup AppGyver and Firebase REST API.

Refer to the Firebase Auth REST API documentation for more details … https://firebase.google.com/docs/reference/rest/auth/

As well as the Firebase Realtime Database REST API documentation … https://firebase.google.com/docs/database/rest/retrieve-data

Each HTTP call to Firebase Auth has a similar layout.

  1. Create an object for the HTTP request body

  2. Assign the values to the request body

  3. Build a HTTP request function using a URL and request body

  4. Create an object and manually assign the values from the HTTP response

Couple of things to note:

  1. A login request returns an id_token and a refresh_token (see STEP 1)

  2. The id_token expires after 60 min

  3. You can request a new id_token using the refresh_token (see STEP 2)

  4. You use the id_token when making standard get and update calls to your Firebase Realtime Database using the AppGyver REST API direct integration. The id_token is passed as an auth query parameter.

  5. You can store the refresh_token using the AppGyver Client side storage data functions to automatically log people back in when the re-open the app. Just remember to resave the returned refresh_token after each refresh.

  6. New account, password reset, and other Firebase Auth REST API calls are all similar. Refer to the Firebase Auth REST API documentation for details on what fields to include in the HTTP request body and response as well as the URL … https://firebase.google.com/docs/reference/rest/auth/

STEP 1: Log In

1.a) Inside AppGyver, create a firebaseSignIn object as follows …

1.b) Assign values to the firebaseSignIn object. The email and password fields would be entered by the user on the login screen.

image

1.c) Build a data HTTP request function.

The full URL is https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=[your firebase application key]

1.d) Create a firebaseLoginReponse object as follows …

1.e) Manually assign the output of the HTTP Request function to the firebaseLoginReponse variables using formulas that match the field names …

STEP 2: Token Refresh

2.a) Inside AppGyver, create a firebaseRefreshRequest object as follows …

2.b) Assign values to the firebaseRefreshRequest object. Use the refresh_token the you stored from step 1.

2.c) Build a data HTTP request function.

The full URL is https://securetoken.googleapis.com/v1/token?key=[your firebase application key]

2.d) Create a firebaseRefreshReponse object as follows …

2.e) Manually assign the output of the HTTP Request function to the firebaseRefreshReponse variables using formulas that match the field names …

4 Likes

Wow. Really appreciate it. Will see if I can make it work.

Thank you

GP

@vereggen thanks for putting this together! Quick clarification are you creating the firebaseSignIn object & firebaseLoginResponse object as page/app Variables or as data resources?

It appears you are using the HTTP Request logic versus the AppGyver REST API direct integration. Is that correct?

Thanks!

Correct, using direct HTTP Request logic for the Auth signup/login.

I am using the AppGyver REST API for the Firebase Realtime Database gets/updates. You need to pass the id_token as an auth query parameter.

Hi,

Just looking at 1.b) and I do not know where I edit this information.

I’ve created an App Variable as an object called firebaseSignIn. Where do I go from here?
image

Thanks for creating this topic,
Eoin.

Hi @eoinparkinson … if you haven’t already, you need to enable Auth.

This will add the login screen to your app.

Use the email and password fields from the login screen to populate the firebaseSignIn object.

1 Like

Hi,

I see this now. Sorry I am coming from a different blockly based app builder and this is a whole new layout for me. These examples are fantastic though, so thank you.

I don’t quite think I’ve got it here:

Which tab do I assign the variables?

Many thanks, Eoin.

Hi @eoinparkinson

Have you watched the AppGyver tutorials? This will give you the basics of how to assign variables and manage other workflows. You can find them here.

I think what you are looking for is the logic canvas.

Here’s a screenshot of my logic for my login button. I’ve marked the flow with the corresponding steps.