Code-the-Dream-School / react

Primary React repo template for classes in 2023 and beyond
MIT License
5 stars 11 forks source link

Airtable APIs vs Tokens 1.8 #6

Open catbus00 opened 11 months ago

catbus00 commented 11 months ago

Airtable has phased out APIs and it only remains on legacy accounts. The instructions should be updated to use airtable tokens. Someone from the Emu cohort had great instructions that can be included in the updates:

Step 1: Go to your account and create a new token. (I recommend deleting your old ones first). Make sure your scope includes "data.records:read" and "data.records:write" and your access is to your table that you made according to assignment 1.8 instructions. Once you save, it will give you a token for you copy. It will only show once unless you regenerate a key which will give you a different one.

Step 2: Keep following the instruction in the assignment 1.8. To get the Base Id, click on Web API documentation on the left side menu and click on the table you made. It will give you the Base ID.

Step 3: The headers authorization is still a bearer token so use your token from step 1.

royemosby commented 10 months ago

Deprecation Notice

*Extracted timeline from above:

mamooredesigns commented 10 months ago

@royemosby @catbus00 could either/both of you double check that the changes I made here https://github.com/Code-the-Dream-School/react/wiki/Lesson-1.8 (also shown below) accurately reflect suggested changes when you have a moment please?

--> added to help point out specific lines with most changes made

OLD VERSION:

...

We connect to the API with the proper key and authorization via the Fetch API. Responding to server error(s) 
are handled by the try/catch but if there is a 4xx client error, checking the response.ok property tells us 
if the response was successful or not.

...

--> Generate Airtable API Key

--> Navigate to https://airtable.com/account.
--> Click "Generate API Key".
--> Copy the key from the input field.
Open .env.local.
--> Create a new variable named REACT_APP_AIRTABLE_API_KEY.
--> Paste the key as its value.

Connect to Airtable API

--> Back in Airtable, click "Help" button.
--> Click "API Documentation" link.
Copy the "Base ID".
Open .env.local.
Create a new variable named REACT_APP_AIRTABLE_BASE_ID.
Paste the ID as its value.
Create a new variable named REACT_APP_TABLE_NAME and then set it equal to "Default"
At this point, you should have a dotenv file that resembles:

--> REACT_APP_AIRTABLE_API_KEY="super_secret_value"
REACT_APP_AIRTABLE_BASE_ID="super_secret_value"
REACT_APP_TABLE_NAME="Default"

NEW VERSION:

...

We connect to the API with a unique token to authorize the Fetch API. Responding to server error(s) 
are handled by the try/catch but if there is a 4xx client error, checking the response.ok property tells us 
if the response was successful or not.

...

--> Generate Airtable API Token

--> Navigate to https://airtable.com/account and create a new token. If you have any tokens already 
--> assigned to the base, we recommend deleting your old ones first. Make sure your scope includes 
--> "data.records:read" and "data.records:write" and your access is to your table that you made according 
--> to assignment 1.8 instructions above. Once you save, it will give you a token for you copy. NOTE: It will 
--> only show once unless you regenerate a key which will give you a different one.
Open .env.local.
--> Create a new variable named REACT_APP_AIRTABLE_API_TOKEN.
--> Paste the token as its value.

Connect to Airtable API

--> Back in Airtable, click "Web API Documentation" link on the left side menu then click on the 
--> table you made.
Copy the "Base ID".
Open .env.local.
Create a new variable named REACT_APP_AIRTABLE_BASE_ID.
Paste the ID as its value.
Create a new variable named REACT_APP_TABLE_NAME and then set it equal to "Default"
At this point, you should have a dotenv file that resembles:

--> REACT_APP_AIRTABLE_API_TOKEN="super_secret_value"
REACT_APP_AIRTABLE_BASE_ID="super_secret_value"
REACT_APP_TABLE_NAME="Default"
royemosby commented 10 months ago

@mamooredesigns I'll be back in next week and will be able to give it closer eyes then. If this is urgent, let me know and I'll see what I can do to fit it in.