Add authentication examples (#3135)

CONTRIBUTING.md

@@ -62,7 +62,7 @@ If your application has dependencies other than `@mui/toolpad`, you have to temp
 1. Make sure to start the build in watch mode again and the run the app with
 
    ```bash
-   pnpm toolpad dev examples/qr-generator --dev
+   pnpm toolpad dev examples/qr-generator/toolpad --dev
    ```
 
 ### Linking Toolpad in a folder on your system (advanced)

docs/src/modules/components/ExamplesGrid.js

@@ -106,6 +106,13 @@ function layouts() {
       href: 'https://github.com/mui/mui-toolpad/tree/master/examples/charts',
       source: 'https://github.com/mui/mui-toolpad/tree/master/examples/charts',
     },
+    {
+      title: 'Google Authentication',
+      description: 'An app that shows how to set up Google authentication in Toolpad.',
+      src: '/static/toolpad/marketing/auth-google.png',
+      href: 'https://github.com/mui/mui-toolpad/tree/master/examples/auth-google',
+      source: 'https://github.com/mui/mui-toolpad/tree/master/examples/auth-google',
+    },
     {
       title: 'Custom server',
       description: 'An app that shows how to use Toolpad with a custom server.',

examples/auth-github/.env.example

@@ -0,0 +1,4 @@
+TOOLPAD_AUTH_SECRET=
+
+TOOLPAD_GITHUB_CLIENT_ID=
+TOOLPAD_GITHUB_CLIENT_SECRET=

examples/auth-github/README.md

@@ -0,0 +1,35 @@
+# GitHub Authentication
+
+<p class="description">An app that shows how to set up GitHub authentication in Toolpad.</p>
+
+Example showcasing how to set up GitHub authentication in a Toolpad app. [The docs](https://mui.com/toolpad/concepts/authentication/).
+
+<a target="_blank">
+  <img src="https://mui.com/static/toolpad/marketing/auth-github.png" alt="GitHub Authentication" style="aspect-ratio: 131/88;" width="524">
+</a>
+
+## How to run
+
+To use this example, you need to set the environment variables shown in [.env.example](.env.example).
+To get those values, please:
+
+- Follow [this section](https://mui.com/toolpad/concepts/authentication/#authentication-secret) on how to create an authentication secret.
+- Set up your own GitHub OAuth app by following [these instructions](https://mui.com/toolpad/concepts/authentication/#github).
+
+Then, use `create-toolpad-app` to bootstrap the example:
+
+```bash
+npx create-toolpad-app@latest --example auth-github
+```
+
+```bash
+yarn create toolpad-app --example auth-github
+```
+
+```bash
+pnpm create toolpad-app --example auth-github
+```
+
+or:
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/mui/mui-toolpad/tree/master/examples/auth-github)

examples/auth-github/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "auth-github",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "toolpad dev",
+    "build": "toolpad build",
+    "start": "toolpad start"
+  },
+  "dependencies": {
+    "@mui/toolpad": "0.1.49"
+  }
+}

examples/auth-github/toolpad/.gitignore

@@ -0,0 +1 @@
+.generated

examples/auth-github/toolpad/application.yml

@@ -0,0 +1,6 @@
+apiVersion: v1
+kind: application
+spec:
+  authentication:
+    providers:
+      - provider: github

examples/auth-github/toolpad/pages/protectedpage/page.yml

@@ -0,0 +1,14 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.49/docs/schemas/v1/definitions.json#properties/Page
+
+apiVersion: v1
+kind: page
+spec:
+  alias:
+    - sP_2TKM
+  title: Protected Page
+  displayName: Protected Page
+  content:
+    - component: Text
+      name: text
+      props:
+        value: Only authenticated users can see me.

examples/auth-google/.env.example

@@ -0,0 +1,4 @@
+TOOLPAD_AUTH_SECRET=
+
+TOOLPAD_GOOGLE_CLIENT_ID=
+TOOLPAD_GOOGLE_CLIENT_SECRET=

examples/auth-google/README.md

@@ -0,0 +1,35 @@
+# Google Authentication
+
+<p class="description">An app that shows how to set up Google authentication in Toolpad.</p>
+
+Example showcasing how to set up Google authentication in a Toolpad app. [The docs](https://mui.com/toolpad/concepts/authentication/).
+
+<a target="_blank">
+  <img src="https://mui.com/static/toolpad/marketing/auth-google.png" alt="Google Authentication" style="aspect-ratio: 131/88;" width="524">
+</a>
+
+## How to run
+
+To use this example, you need to set the environment variables shown in [.env.example](.env.example).
+To get those values, please:
+
+- Follow [this section](https://mui.com/toolpad/concepts/authentication/#authentication-secret) on how to create an authentication secret.
+- Set up your own Google OAuth client ID by following [these instructions](https://mui.com/toolpad/concepts/authentication/#google).
+
+Then, use `create-toolpad-app` to bootstrap the example:
+
+```bash
+npx create-toolpad-app@latest --example auth-google
+```
+
+```bash
+yarn create toolpad-app --example auth-google
+```
+
+```bash
+pnpm create toolpad-app --example auth-google
+```
+
+or:
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/mui/mui-toolpad/tree/master/examples/auth-google)

examples/auth-google/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "auth-google",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "toolpad dev",
+    "build": "toolpad build",
+    "start": "toolpad start"
+  },
+  "dependencies": {
+    "@mui/toolpad": "0.1.49"
+  }
+}

examples/auth-google/toolpad/.gitignore

@@ -0,0 +1 @@
+.generated

examples/auth-google/toolpad/application.yml

@@ -0,0 +1,6 @@
+apiVersion: v1
+kind: application
+spec:
+  authentication:
+    providers:
+      - provider: google

examples/auth-google/toolpad/pages/protectedpage/page.yml

@@ -0,0 +1,14 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.49/docs/schemas/v1/definitions.json#properties/Page
+
+apiVersion: v1
+kind: page
+spec:
+  alias:
+    - sP_2TKM
+  title: Protected Page
+  displayName: Protected Page
+  content:
+    - component: Text
+      name: text
+      props:
+        value: Only authenticated users can see me.