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

Co-authored-by: LekoArts <lekoarts@gmail.com>

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/README.md

@@ -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/gatsby-browser.js

@@ -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/gatsby-config.js

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

examples/functions-auth0/package.json

@@ -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"
   }

examples/functions-basic-form/README.md

@@ -4,12 +4,12 @@ This example shows how to build a form with [react-hook-form](https://react-hook
 
 1.  **Start developing.**
 
-    To get started clone this repo locally and run `yarn` to add all necessary packages.
+    To get started clone this repo locally and run `npm install` to add all necessary packages.
 
     ```shell
-    cd basic-form
-    yarn
-    yarn run develop
+    cd examples/functions-basic-form
+    npm install
+    npm run develop
     ```
 
 2.  **Open the code and start customizing!**

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

@@ -1,7 +1,4 @@
 module.exports = {
-  flags: {
-    FUNCTIONS: true,
-  },
   siteMetadata: {
     title: "form",
   },

examples/functions-basic-form/package.json

@@ -15,7 +15,7 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "gatsby": "^3.4.1",
+    "gatsby": "next",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hook-form": "^7.5.2"

examples/functions-google-gmail/.env.example

@@ -0,0 +1,2 @@
+GATSBY_GOOGLE_CLIENT_ID=
+CLIENT_SECRET=

examples/functions-google-auth/README.md → examples/functions-google-gmail/README.md

@@ -4,7 +4,7 @@
   </a>
 </p>
 <h1 align="center">
-  Gatsby Functions Google Auth Examples
+  Gatsby Functions Google Gmail Examples
 </h1>
 
 ## 🚀 Quick start
@@ -26,14 +26,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 include environment variables to 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 google-auth
-    yarn
-    yarn run develop
+    cd examples/functions-google-gmail
+    npm install
+    npm run develop
     ```
 
 4.  **Open the code and start customizing!**
@@ -45,15 +45,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 Google Auth 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-google-auth/gatsby-config.js → examples/functions-google-gmail/gatsby-config.js

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

examples/functions-google-auth/package.json → examples/functions-google-gmail/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "google-auth",
+  "name": "google-gmail",
   "version": "1.0.0",
   "private": true,
-  "description": "Google Auth",
+  "description": "Google Gmail",
   "author": "Polina Vorozheykina",
   "keywords": [
     "gatsby"
@@ -16,9 +16,8 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "gatsby": "^3.1.0-functions-next.60",
-    "gatsby-plugin-functions": "^0.1.0-7",
-    "gatsby-plugin-gatsby-cloud": "^2.3.0",
+    "gatsby": "next",
+    "gatsby-plugin-gatsby-cloud": "next",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-use-googlelogin": "^0.12.5"

examples/functions-google-oauth/.env.example

@@ -0,0 +1,5 @@
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+GOOGLE_REDIRECT_URI="http://localhost:8000/api/googleAccessToken"
+APP_REDIRECT_URI="http://localhost:8000/auth-redirect"
+APP_HOSTNAME="http://localhost:8000"

examples/functions-google-oauth/README.md

@@ -0,0 +1,48 @@
+# Gatsby Functions + Google OAuth Example
+
+This example illustrates logging in with Google 0Auth via Gatsby Functions and defining a [private client route behind this authentication](https://www.gatsbyjs.com/tutorial/authentication-tutorial/). The primary focus is on the Functions aspect, not the client side routing/authentication. [This article](https://soshace.com/react-user-login-authentication-using-usecontext-and-usereducer/#crayon-60c920bddc105062139412) has a good example for setting up the client side auth provider you could layer on top of this example.
+
+![Image of Google Auth Gatsby App](./localhost_8000.png)
+
+## 🚀 Quick start
+
+1.  **Set up Google OAuth Client.**
+
+    This sample uses google oAuth client to authenticate into the Google inbox api. Obtain an oAuth credential from the Google Cloud [API & Services Credentails Page](https://console.cloud.google.com/apis/credentials?)
+
+    - Generate an Oauth Client ID. You can follow the steps highlighted in [Account Authentication - Service Account](https://theoephraim.github.io/node-google-spreadsheet/#/getting-started/authentication?id=oauth). Make sure to set up at least one **Authorized redirect URI** to be `http://localhost:8000`
+
+2.  **Add the Google Oauth Credentials to your `.env.development` file**
+
+    There are **2** environment variable you'll need to add to your project:
+
+    - `GOOGLE_CLIENT_ID`: Fetch the ClientId from the newly created OAuth 2.0 Client ID. Yuo can find it in the [Google Credentials Console](https://console.cloud.google.com/apis/credentials)
+    - `GOOGLE_CLIENT_SECRET`: Fetch the Client Secret from the newly created OAuth 2.0 Client ID. Yuo can find it in the [Google Credentials Console](https://console.cloud.google.com/apis/credentials)
+
+    You'll also want to add these as environment variables when deploying to Gatsby Cloud.
+
+3.  **Start developing.**
+
+    To get started, run `npm install` to add all necessary packages.
+
+    When developing locally, you include environment variables to 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 examples/functions-google-oauth
+    npm install
+    npm run develop
+    ```
+
+4.  **Open the code and start customizing!**
+
+    Your site is now running at http://localhost:8000! You can use the UI on the index page to test the functions or directly access them at http://localhost:8000/api/{function_name}
+
+    Edit `src/pages/index.js` to see your site update in real-time!
+
+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). **Note** The live URLs of your site will need to be set in the [Google Cloud allowed URLs](https://console.cloud.google.com/apis/credentials) settings for your Client ID and the environment variables need to be set in Gatsby Cloud for:
+
+- GOOGLE_REDIRECT_URI="{YOUR_DOMAIN}/api/googleAccessToken"
+- APP_REDIRECT_URI="{YOUR_DOMAIN}/auth-redirect"
+- APP_HOSTNAME="{YOUR_DOMAIN}"

examples/functions-google-oauth/gatsby-config.js

@@ -0,0 +1,8 @@
+require("dotenv").config()
+
+module.exports = {
+  siteMetadata: {
+    title: "Gatsby Functions with Google OAuth Example",
+  },
+  plugins: ["gatsby-plugin-gatsby-cloud", `gatsby-plugin-sass`],
+}

examples/functions-google-oauth/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "gatsby-functions-google-oauth-example",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Example of using Gatsby Functions with Google OAuth",
+  "author": "Grayson Hicks",
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "dependencies": {
+    "babel-preset-gatsby": "^1.5.0",
+    "gatsby": "next",
+    "gatsby-plugin-gatsby-cloud": "next",
+    "gatsby-plugin-sass": "next",
+    "googleapis": "^73.0.0",
+    "node-fetch": "^2.6.1",
+    "query-string": "^7.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "sass": "^1.32.13"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.13.13"
+  }
+}

examples/functions-google-oauth/src/api/googleAccessToken.js

@@ -0,0 +1,29 @@
+const { google } = require("googleapis")
+
+const clientId = process.env.GOOGLE_CLIENT_ID
+const clientSecret = process.env.GOOGLE_CLIENT_SECRET
+
+// Initialize our Google OAuth client, same as in login function.
+const oauth2Client = new google.auth.OAuth2(
+  clientId,
+  clientSecret,
+  process.env.GOOGLE_REDIRECT_URI
+)
+
+google.options({ auth: oauth2Client })
+
+const googleAccessToken = async (req, res) => {
+  // Get the code appended from Google generateAuthUrl.
+  const code = req.query.code
+
+  // Get the auth token.
+  const token = await oauth2Client.getToken(code)
+
+  // http://localhost:8000/auth-redirect
+  // Redirect to auth page and set the token in the URL.
+  return res.redirect(
+    `${process.env.APP_REDIRECT_URI}?token=${JSON.stringify(token?.tokens)}`
+  )
+}
+
+export default googleAccessToken