Building Login Page based on REST API (Airtable)

Dears,

Am trying to test myself to build a Login page based on Airtable.

the logic I want to reach and please if it’s wong anyone can evaluate it and tell me the right way to protect the system.

The logic:
The login page must be connected to the table in Airtable with these details:

EXAMPLE RESPONSE

{
    "id": "recAGg7CwItM2V1Sw",
    "fields": {
        "U_Pass": "appgyver",
        "U_ID": 22
    },
    "createdTime": "2020-06-12T21:14:32.000Z"
}

I need to validate if this user can access or not the system, therefore I need to GET one record based on the U_ID and U_Pass.
I connect the REST API under the (base, get a record, get collection) tabs and set the schema but,

The problems:
1- I need to search in airtable to get (Found or NotFound ) based on the U_ID and U_Pass.
2- In airtable, I created two columns and I found in addition ID column, I need to just use my created two columns only.

My Steps:
I create button with “get records” logic connected with the REST API Data but nothing happened

Application number:99924
page:3 login page

Last Update:

  • Based on Airtable documentation you have to add filterByFormula in query parameter.

The problem now:

1- how to set the filterByFormula in the runtime from value write in inputtext.

thanks

Hi,

Disclaimer - I am not an expert but storing plain passwords and sending plain passwords, from security point of view sounds like a terrible idea. Having said that - I can’t say that I haven’t tested it … and well it is possible and a way to implement some access restrictions…

Data set up:
Your relative path is something like :
http://api.airtable.com/v0/appwf8430t3o/TableName

Using this method, you wont be able to get a single record (because this requires providing a record ID to Airtable API), but you are able to get a filtered out collection of records - which hopefully if user ID and password are a unique combination will return just 1 value.

You need to add to base Relative Path in Get Collection view following filter by formula:
filterByFormula=AND(U_ID=“UserId”,U_Pass=“UserPassword”)

This is regular Airtable formula where UserId and User Password will be the parameters sent from Appgyver. The encoded URL will look like this:

[base URL already in gray box]?view=YourViewIfYouUseOne&filterByFormula%3DAND%28U_ID%3D%22{UserId}%22%2CU_Pass%3D%22{UserPassword}%22%29

Please note the added curly brackets {} around the parameters - next step you need to set up these parameters in field “URL Placeholder”

This way the process will work link 2 variables (UserId and UserPassword) to input boxes. On pressing the send button you link to Get Collection wich will now require 2 parameters (from your variables). This should return to you a single record from Airtable.

To get this record out you need to add “records” to the response path. This will give you back an array with (hopefully) single object. If there is no object in the array - there is no match for your password.

Here is a mock up:

@Harri_Sarsa is there a way to hash a variable inside of appgyver and send hash to store at server instead? Still though probably that is very rudimentary way to set up auth… I am looking at connecting AWS cognito to my app, but this is still early stage.

Thanks so much for your explanation.

I missed this part, how to link this URL Placeholder with input text?

tries:
1- create data variable – > not work
2- creat page variable-- > not work
3- in the getrecord logic – I set object with parameter and add the placehoder with linked to fixed value but not working

First, for debugging purpose in Data setting in the Get Collecton part - use hardcoded value instead of URL Parameters (remove the URL Parameters in the URL and in URL Placeholder below). If the connection to Airtable works and returns a single item in your collection, all is fine. You can move on to step 2.

Step 2. Substitute hardcoded value for {parameter} and add the parameter to URL placeholder - setting variable properties as on my screenshot. The URL needs to be URL encoded but the {} curly brackets around the URL placeholder should not be - as this will be substituted by Appgyver.

Set 3 . Get record collection - set static variables first to test, if that works either page variable or page parameter will work fine.

image

Hi,

I just wanted to underline how terribly bad idea it is to publish to the world an app that is connecting to the Airtable. Just using Chrome Dev tools it is possible for anyone to see the key added in the header of the request your web app is making…

@Harri_Sarsa it is mentioned in your Airtable tutorial - but it sounds a bit hypothetical. Probably it would be good to say that your key will be visible to anyone (with even little technical skills as mine) once you publish the web app live…

you are right, it’s not a production why.

I will stop using Airtable. but what do u recommend for me I need to build a system that includes Web and mobile APP. which API or backed do u recommend but something can be used in production.

thanks for your full support for me, hope to see you in my next questions :slight_smile:

Once I have a solid answer I will let you know…

In the mean this can be used as a workaround - but it might react a bit slow…