chore(examples): Fix functions examples + add google oauth (#31953)

Co-authored-by: LekoArts <[email protected]>

Author: graysonhicks

examples/functions-airtable-form/.env.example

@@ -0,0 +1,2 @@
+AIRTABLE_KEY=
+AIRTABLE_DB=

examples/functions-airtable-form/README.md

@@ -24,14 +24,14 @@
 
 3. **Start developing.**
 
-   To get started, run `yarn` to add all necessary packages.
+   To get started, run `npm install` to add all necessary packages.
 
-   When developing locally, you'll want to include the ENV variables in your `.env.development`. Read more about how Gatsby handles `.env` files and environment variables in the [Gatbsy Docs](https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/)
+   When developing locally, you'll want to include the ENV variables in your `.env.development`. Read more about how Gatsby handles `.env` files and environment variables in the [Gatsby Docs](https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/)
 
    ```shell
-   cd airtable-form
-   yarn
-   yarn run develop
+   cd examples/functions-airtable-form
+   npm install
+   npm run develop
    ```
 
 4. **Open the code and start customizing!**
@@ -53,15 +53,3 @@
 5. **Deploy**
 
 You can deploy this example on Gatsby Cloud by copying the example into a new repo and [connecting that to Gatsby Cloud](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-gatsby-cloud/#set-up-an-existing-gatsby-site).
-
-<!--- Working on improving deploy now to use subdirectories
-4.  **Deploy**
-You can directly deploy this example by using the Deploy button below and select the directory for the Airtable example. Otherwise, fork this repo and create your own repo and [connect that to Gatsby Cloud](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-gatsby-cloud/#set-up-an-existing-gatsby-site).
-
-[<img src="https://www.gatsbyjs.com/deploynow.svg">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-functions-beta/)
-
-
-
-[<img src="https://www.gatsbyjs.com/deploynow.svg">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-functions-beta/tree/main/examples/airtable-form)
-
--->

examples/functions-airtable-form/gatsby-config.js

@@ -1,7 +1,6 @@
+require("dotenv").config()
+
 module.exports = {
-  flags: {
-    FUNCTIONS: true,
-  },
   siteMetadata: {
     title: "Airtable Form",
   },

examples/functions-airtable-form/package.json

@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "airtable": "^0.10.1",
-    "gatsby": "^3.4.0",
-    "gatsby-plugin-gatsby-cloud": "^2.3.0",
+    "gatsby": "next",
+    "gatsby-plugin-gatsby-cloud": "next",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }

examples/functions-auth0/.env.template renamed to examples/functions-auth0/.env.example

@@ -12,7 +12,7 @@ To test this Example locally you'll need to:
 
 1. Create an application in [Auth0](https://auth0.com/) of type "Single Page Application" and configure `http://localhost:8000` as the Allowed Callback URL, Allowed Logout URL, Allowed Web Origins and Allowed CORS.
 2. Create an API in Auth0 (e.g. with the name of `tv-shows` and identifier of `https://api/tv-shows`) and create a permission for that API (e.g. `read:shows`)
-3. Rename the `.env-template` file to `.env.development` and update all of the settings there with the domain and clientId from the appplication you made in Auth0.
+3. Rename the `.env-template` file to `.env.development` and update all of the settings there with the domain and clientId from the application you made in Auth0.
 4. Run `yarn run start` which will run the Gatsby application and the Gatsby functions.
 
 ## How does example this work?
@@ -27,7 +27,7 @@ The `access_token` is then provided to our Functions to authenticate the request
 
 In the Gatsby Functions we use [@serverless-jwt/jwt-verifier](https://github.com/sandrinodimattia/serverless-jwt/tree/master/packages/jwt-verifier) to secure our functions.
 
-The `JwtVerifier` serves as a way to verify your token. If the token is not valid, the we return an error to the client. If it is valid, it will expose all of the claims to the current function and you'll have the guarantee that the request is authenticated.
+The `JwtVerifier` serves as a way to verify your token. If the token is not valid, then we return an error to the client. If it is valid, it will expose all of the claims to the current function and you'll have the guarantee that the request is authenticated.
 
 ```js
 const {

examples/functions-auth0/LICENSE

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { navigate } from "gatsby"
 import { Auth0Provider } from "@auth0/auth0-react"
 

examples/functions-auth0/README.md

@@ -6,9 +6,6 @@ require("dotenv").config({
 })
 
 module.exports = {
-  flags: {
-    FUNCTIONS: true,
-  },
   plugins: [
     {
       resolve: "gatsby-plugin-create-client-paths",

examples/functions-auth0/gatsby-browser.js

@@ -12,15 +12,15 @@
     "@auth0/auth0-react": "^1.0.0",
     "@serverless-jwt/jwt-verifier": "^0.2.1",
     "dotenv": "^8.2.0",
-    "gatsby": "^3.4.0-next.6",
-    "gatsby-plugin-gatsby-cloud": "^2.3.0",
+    "gatsby": "next",
+    "gatsby-plugin-gatsby-cloud": "next",
     "node-fetch": "^2.6.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "gatsby-plugin-create-client-paths": "^3.3.0",
-    "gatsby-plugin-postcss": "^4.3.0",
+    "gatsby-plugin-create-client-paths": "next",
+    "gatsby-plugin-postcss": "next",
     "prettier": "^2.2.1",
     "tailwindcss": "^1.5.2"
   }