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 …

10 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.

1 Like

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.

2 Likes

Hey @vereggen,

Thanks for your reply. I haven’t looked at the docs properly, that was lazy on my behalf.

The screenshot from the original post kind of threw me off. Let me read the docs and watch the videos there and I’ll get back to you.

Much appreciated,
Eoin.

Thanks @verfor showing the logic flows. Would you be able to take a screen shot of the logic flow for step 2 as well?

Trying to understand how to setup the refresh and where exactly (global canvas?)

Sure @William_Glass

You’re correct that I stored the refresh on the global canvas.

You can see the by the delay that I’m refreshing every 30min (since the tokens expire in 60min).

I created an event trigger to run the refresh on successfully login.

Here’s the flow of the refresh token.

You can see that after step 2.e there’s an update record.

I created a local DB to store the refresh_token.

This is a bit advanced, but you can use the stored refresh_token and automatically log a user in every time they load the app.

1 Like

Thanks so much @vereggen! Super helpful. I’m going to see if I can get it working properly and let you know once it is up and running. :grinning:

1 Like

Thanks for this. I have also been implementing the Firebase REST API, but I implemented it via the AppGyver REST API feature. Was there a reason you chose the HTTP request instead?

Hi @Bryony

I just use the HTTP requests for the AUTH API (login / new user / password reset).

When I set this up a few months ago I was still learning AppGyver and for some reason, I couldn’t get it to work. Don’t remember why.

I use the AppGyver REST API feature for all Firebase Realtime Database get/updates.

NOTE: There are two different Firebase databases. Cloud Firestore and Realtime Database. I could only get the Firebase AUTH REST API working with the Firebase Realtime Database REST API.

If you have an example of using the AppGyver REST API, feel free to add it here :slight_smile:

Oh, nice. That makes sense. If I get mine working I’ll share it here. Right now I have an issue returning the Get User Data response into an app variable for some reason and my debugger isn’t working :sweat_smile:

2 Likes

@vereggen I’ve almost got the first step to work except the returned JSON data is not storing properly to an app variable. In the debugger, it shows the HTTP request is returning the correct JSON data but won’t store the data to the object app variable loginResponse correctly.

I’ve tried the way you have it shown above as well as hard defining the data to a string type. Neither is storing properly.

Funny enough it initially appeared to work because it actually flows through and let’s a user log in except none of the users log-in data is actually stored and the refresh is impossible because the refresh token is not stored.

Any ideas on how to troubleshoot the issue?

Did you manually type that in?

Try selecting it from resBody here … and add .idToken at the end.

1 Like

If you can open up a terminal window you can test the login using a curl command …

curl -d"returnSecureToken=true" -d"email=[email]" -d"password=[password]" https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=[API_KEY]

and see the response that comes back.

1 Like

Thanks @vereggen it worked! I have a login page and a separate create an account page. I accidentally set up login auth on the create an account page so when I copied the flow function over to the correct login page it failed to automatically update the output from the newly copied HTTP Request node.

For future reference though, I can use terminal to test any curl command? I’ve only played around with the terminal window a few times and never used a curl command before.

Great!

Yes, you can use curl to test any json request.

I use it often to test the AppGyver REST API calls to the Firebase Realtime Database get/updates.

Once you enable rules in your Firebase Realtime Database to secure your data you need a valid id_token to pass as an auth parameter.

1 Like